点击之处，
花火绽放。

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，谨向原作者霜月琉璃致谢。