粒子、礼花、烟花一个库全包：tsParticles 上到 v4

粒子效果看着简单，自己写就知道麻烦：发射器、重力、碰撞、拖尾、淡出，每一样都是数学活。tsParticles 把这些全包了，README 的自我描述里连场景都列好了：粒子效果、礼花爆炸和烟花动画。9 千星、MIT 协议，TypeScript 写就、无依赖，核心包 @tsparticles/engine 已迭代到 v4.5.0。这是本系列第 12 个工具，专门负责画面里那些「蹦蹦跳跳」的部分。

一、配置驱动，不是代码驱动

它最大的特点是声明式：一个 JSON 配置对象描述粒子长什么样、怎么动、怎么交互，库负责其余一切。改密度、换形状、调连线、加重力，都是在改配置而不是改逻辑，这对 agent 是天然友好：配置即文档，生成一段正确的 options 比写一段正确的模拟循环容易得多。

框架支持列出来像点名：React、Vue 2 和 3、Angular、Svelte、Solid、Qwik、Astro、jQuery 乃至 Web Components，官方组件都有。CDN 也能直接引，落地页加个背景粒子不用碰构建配置。

二、v4 拆成了插件拼盘

v4 这代的关键词是模块化：engine 只管核心循环，交互模式、形状、效果都拆成独立插件包，按需引入。嫌麻烦的话还有打包好的 bundle，一行 loadFull 全量装上，另一种是 loadSlim 只装常用的。礼花和烟花有独立的 preset 包，调用时给个方向和颜色就能开炸，节日营销页和活动结算页的庆祝动效基本零成本。

三、放进出片流水线

粒子层是视频里最常见的「氛围组件」：开场背景漂浮的微粒、达成时刻炸开的礼花、转场时的星尘。实践做法是把 tsParticles 画布作为一层嵌进 Remotion 组件树，动画时间线交给 Remotion，粒子系统照常在画布上跑，逐帧渲染输出。

有一点要注意：粒子系统默认用真实时钟驱动，序列帧渲染时记得查一下帧率相关的同步配置，别让粒子密度在慢放时翻倍。 confetti 和 fireworks 这类一次性特效则简单得多，触发一次播完即止，几乎不踩坑。

下一篇是 glTF Transform，管的是 3D 资产进引擎前的最后一道加工。