クリックひとつで、
花火が咲く。

01 / インストール

パッケージの追加

npm でプロジェクトにパッケージを追加します。

npm

npm install shoka-fireworks

02 / カスタマイズとプレビュー

花火のパレットを作る

色を自由に増減・調整してその場で試せます。下の導入コードも自動で更新されます。

カラーリスト

カラーピッカーまたは任意の CSS カラー値を入力してください。次の花火から反映されます。

インタラクティブプレビュー

ライブプレビュー

下のキャンバスをクリックして、現在の配色を試せます。

03 / プロジェクトへ導入

サイトに組み込む

ブラウザーで document.body が利用可能になったタイミング（コンポーネントのマウントフックなど）で以下のコードを実行します。上で調整した配色が反映されています。

import { fireworks } from "shoka-fireworks";

const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
const cleanup = fireworks({
  shouldPlayAnimation: () => !reducedMotion.matches,
});

// アンマウント時やエフェクトの終了時は cleanup() を呼び出し、アニメーションとイベントリスナーを解除します。

shouldPlayAnimation はクリックごとに reducedMotion.matches を確認し、「視差効果を減らす」が有効な場合は false を返して新しい花火の発火を抑止します。

すでに開いている花火は最後まで自然に再生されます。すべてのアニメーションを即座に止め、エフェクトを完全に解除する場合（コンポーネントのアンマウント時など）は cleanup() を呼び出してください。

04 / API リファレンス

`fireworks(config?: FireworkConfig): () => void`

ブラウザーで document.body の準備ができた後に呼び出します。呼び出しごとに専用のクリーンアップ関数を返します。

`FireworkConfig`

項目	型	既定値	説明
`colors?`	`string[]`	以下に示すデフォルトのパステルカラー 4 色	花火のパーティクルに使う CSS カラー配列（1 色以上必須）。
`shouldPlayAnimation?`	`(event: MouseEvent) => boolean`	`() => true`	クリックのたびに発火します。`false` を返すとそのクリックでの花火をスキップし、再生中のアニメーションには影響しません。

ライブラリ自体は「視差効果を減らす」設定を自動検出しません。上の例のように shouldPlayAnimation 内でチェックしてください。

デフォルトパレット

[
  "rgba(255,182,185,.9)",
  "rgba(250,227,217,.9)",
  "rgba(187,222,214,.9)",
  "rgba(138,198,209,.9)"
]

クリーンアップと破棄

コンポーネントのアンマウント時やエフェクトを無効化する際は、fireworks() が返すクリーンアップ関数を呼び出してください。すべてのアニメーションを停止し、キャンバスとクリック・リサイズのイベントリスナーを解除します。

cleanup();

クレジット

本ライブラリの花火エフェクトは Hexo Theme Shoka を元に改変しました。原作者の霜月琉璃さんに感謝します。