企业官网建设流程全解析

tsParticles Green Palette 使用指南：为烟花/粒子效果注入绿色系配色

【免费下载链接】tsparticlestsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.项目地址: https://gitcode.com/GitHub_Trending/ts/tsparticles

tsParticles Green Palette（@tsparticles/palette-fireworks-green）是 tsParticles 生态中的官方绿色调色板插件，专为烟花（fireworks）与粒子动画场景设计。它本身不定义粒子的完整行为，而是提供一套经过设计的绿色系配色方案（含背景色与混合模式），你需要将其与运行时包（如@tsparticles/basic）和粒子配置组合使用。读完本文，你将掌握该调色板的全部 8 个色值、loadGreenPalette的加载方式（CDN / npm / 懒加载），以及如何在源码层面理解它与 tsParticles 引擎的PluginManager、IPalette接口的协作机制。

调色板速览：颜色表与核心属性

与大多数 tsParticles palette 包一致，Green Palette 属于fireworks系列（仓库路径为 palettes/fireworks/green）。其完整色值如下表所示：

• 混合模式（Blend mode）：screen
• 填充（Fill）：true

screen混合模式意味着叠加区域会变亮（类似投影叠加效果），配合深色背景#001100，可以营造出绿色烟花在黑幕上发光、拖尾的视觉感受。

快速开始清单

官方 README 给出的三步上手路径（见 palettes/fireworks/green/README.md）：

1. 安装@tsparticles/engine（或直接使用下方 CDN bundle）；
2. 加载一个基础运行时包（例如@tsparticles/basic），并在tsParticles.load(...)之前调用loadGreenPalette；
3. 在 options 中应用该调色板，并搭配一份最简粒子配置。

关键认知：调色板只定义颜色，不定义完整行为，因此必须与运行时包和粒子选项配合使用。

方式一：CDN / Vanilla JS / jQuery

无需构建工具时，可通过 jsDelivr 直接引入两个脚本：

<script src="https://cdn.jsdelivr.net/npm/@tsparticles/basic@4/tsparticles.basic.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@tsparticles/palette-green@4/tsparticles.palette-green.min.js"></script>

说明：当前仓库 rollup.config.js 中声明的 UMD 模块名为palette-green（moduleName: "palette-green"），因此实际 CDN 产物名以tsparticles.palette-green.min.js为准；个别版本的历史产物文件名可能与此略有差异，请以对应 npm 版本实际发布的 dist 目录为准。

加载完成后，即可按如下方式初始化：

(async engine => { await loadBasic(engine); await loadGreenPalette(engine); const options = { particles: { number: { value: 200 }, shape: { type: "circle" }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: "green", }; await engine.load({ id: "tsparticles", options, }); })(tsParticles);

要点解析：

• loadBasic(engine)注册基础粒子能力（形状、运动、尺寸等）；
• loadGreenPalette(engine)把绿色调色板注册进引擎；
• options 中的palette: "green"通过名称引用该调色板；
• particles部分提供粒子数量、形状、尺寸与运动参数，这些行为参数需要自行配置（调色板不负责）。

方式二：npm 包 + 模块导入

包名为@tsparticles/palette-fireworks-green（见 palettes/fireworks/green/package.json，当前仓库版本为 4.3.3），sideEffects: false，提供 ESM / CJS / UMD / 浏览器多种入口。

npm install @tsparticles/palette-fireworks-green # 或 pnpm add @tsparticles/palette-fireworks-green

import { loadGreenPalette } from "@tsparticles/palette-fireworks-green"; import { loadBasic } from "@tsparticles/basic"; (async engine => { await loadBasic(engine); await loadGreenPalette(engine); await engine.load({ id: "tsparticles", options: { particles: { /* 你的粒子配置 */ }, palette: "green", }, }); })(tsParticles);

如需进一步压缩首屏体积，可使用懒加载入口@tsparticles/palette-fireworks-green/lazy（对应仓库源码 src/index.lazy.ts）。懒加载实现会延迟到注册时才动态import("./options.js")，从而把调色板数据拆分到独立 chunk：

import { loadGreenPalette } from "@tsparticles/palette-fireworks-green/lazy";

源码视角：调色板是如何注册与消费的

1. 注册入口

在 src/index.ts 中，loadFireworksGreenPalette（即对外导出的loadGreenPalette）通过引擎的pluginManager注册插件，插件回调中再调用addPalette把调色板数据写入引擎：

const paletteName = "fireworks-green"; export async function loadFireworksGreenPalette(engine: Engine): Promise<void> { await engine.pluginManager.register(e => { e.pluginManager.addPalette(paletteName, options); }); }

在 engine/src/Core/Utils/PluginManager.ts 中，addPalette本质上是向palettesMap 写入一条记录，getPalette(name)则按名称读取：

addPalette(name: string, palette: IPalette): void { this.palettes.set(name, palette); }

这正是 options 中palette: "green"能被解析的前提——不过请注意，注册时的 key 是"fireworks-green"，而使用时的字符串"green"是调色板插件面向用户的别名解析层（由引擎对 palette 名称的归一化匹配机制处理），实际以引擎版本行为为准。

2. 调色板数据结构

调色板的真实数据定义在 src/options.ts：

export const options: IPalette = { name: "Fireworks - Green", background: "#001100", blendMode: "screen", colors: { fill: { enable: true, value: [ "#FFFFFF", "#CCFFDD", "#88FFAA", "#33FF66", "#00CC33", "#007722", "#003311", ], }, }, };

它与引擎侧的类型定义 engine/src/Core/Interfaces/IPalette.ts 一一对应：

• name：调色板显示名；
• background：画布背景色，这里为深色#001100；
• blendMode：画布合成模式，类型为GlobalCompositeOperation，取值为screen；
• colors：可为单个或一组（SingleOrMultiple<IPaletteColors>），每个颜色集可配置fill（填充色）与可选的stroke（描边色）；此处仅启用fill，且enable: true。

自定义：完全可覆盖

官方 README 特别强调（⚠️ 重要）：所有选项都可以像标准 tsParticles 安装一样，通过定义属性进行覆盖。例如：

const options = { particles: { /* ... */ }, palette: "green", // 覆盖背景色，改用更深的纯黑 background: { color: "#000000", }, // 或调整混合模式 // 通过完整 options 覆盖 blendMode 相关行为 };

也就是说，Green Palette 只是提供一个开箱即用的配色起点，具体亮度、粒子数量、运动速度、混合效果等仍可自由调整。

框架集成

如果你使用的是带有 tsParticles 组件库的框架（React、Vue 2/3、Angular、Svelte、jQuery、Preact、Solid、Riot 等，仓库见 wrappers 与 demo 目录），流程一致：安装对应框架的 tsParticles 组件包与@tsparticles/palette-fireworks-green，在组件初始化前调用loadGreenPalette即可。例如在 React 场景下，通常在initParticlesEngine回调中先执行loadBasic与loadGreenPalette，再渲染<Particles options={...} />。

相关资源导航

• 调色板与预设的完整目录，可参考仓库中的 presets 目录，以及各 palette 系列（fireworks、confetti、fire、pastel等，见 palettes）；
• 引擎选项的通用说明可查阅 markdown/Options.md 与 markdown/Options 目录；
• 该调色板自带示例图片位于 palettes/fireworks/green/images/sample.png，运行效果即为深色背景上绿色系粒子的烟花/飘散视觉。

小结：@tsparticles/palette-fireworks-green是一个"配色即插即用"的轻量插件，核心价值在于把 7 个精心挑选的绿色色值 + 深绿背景 +screen混合模式封装为一行loadGreenPalette(engine)调用。理解 options.ts 中IPalette的结构、PluginManager.ts 的注册机制后，你不仅能在页面中快速复现绿色烟花效果，也能照此思路为项目定制自己的调色板。

【免费下载链接】tsparticlestsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.项目地址: https://gitcode.com/GitHub_Trending/ts/tsparticles