企业官网建设流程全解析

tsParticles Thunderstorm 调色板实战：用 7 色紫蓝粒子复刻雷暴夜空粒子背景

【免费下载链接】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 官方调色板@tsparticles/palette-thunderstorm（仓库路径 palettes/atmospheric/thunderstorm）为对象，讲解调色板（Palette）机制与「雷暴」主题色板在粒子背景中的完整落地流程。读完本文，你将掌握：thunderstorm 调色板包含哪些颜色与混合模式、它的源码如何注册到引擎、如何通过 CDN 或 npm 在 Vanilla JS / jQuery / 各类前端框架中启用，以及如何在其基础上自定义粒子行为。

什么是 tsParticles 调色板：只定义颜色，不定义行为

在 tsParticles 中，「调色板」（Palette）与「预设」（Preset）是两个不同的概念，官方在 thunderstorm README 中明确强调："A palette defines colors, not complete behavior"——调色板只负责提供颜色集合，粒子数量、形状、运动等行为仍由你自行配置。

这一点在源码中可以得到印证。thunderstorm 的 options.ts 完整定义了这个调色板：

import { type IPalette } from "@tsparticles/engine"; export const options: IPalette = { name: "Thunderstorm", background: "#05030d", blendMode: "screen", colors: { fill: { enable: true, value: [ "#110022", "#220044", "#440066", "#8822AA", "#AAAAFF", "#DDDDFF", "#FFFFFF", ], }, }, };

而IPalette接口定义在 engine/src/Core/Interfaces/IPalette.ts，结构如下：

Thunderstorm 色板组成：完整色值与混合模式

原文档以表格形式给出了 thunderstorm 调色板的全部颜色，这里完整保留：

粒子填充色（7 色渐变，从深紫外到纯白）：

• #110022—— 近黑的深紫外
• #220044—— 深紫
• #440066—— 紫罗兰
• #8822AA—— 亮紫
• #AAAAFF—— 淡紫蓝
• #DDDDFF—— 近白淡蓝
• #FFFFFF—— 纯白

背景色：#05030d（极暗的蓝黑）

渲染参数：

screen混合模式意味着粒子颜色与背景采用屏幕叠加，浅色粒子会"发光"，深色区域被提亮，这正是雷暴云层中电光闪烁氛围的视觉来源。而fill: true表示所有粒子统一使用填充色着色，无需额外配置 stroke（描边色）。

源码级解析：调色板如何注册并生效

1. 注册入口：loadThunderstormPalette

thunderstorm 的加载函数定义在 palettes/atmospheric/thunderstorm/src/index.ts：

import { type Engine } from "@tsparticles/engine"; import { options } from "./options.js"; const paletteName = "thunderstorm"; export async function loadThunderstormPalette(engine: Engine): Promise<void> { await engine.pluginManager.register(e => { e.pluginManager.addPalette(paletteName, options); }); }

关键点：

• 调色板以"thunderstorm"为键名注册，因此配置中写palette: "thunderstorm"即可引用；
• 注册发生在插件管理器（pluginManager）上，addPalette的实现位于 engine/src/Core/Utils/PluginManager.ts，本质是把名字与IPalette对象存入palettesMap：this.palettes.set(name, palette)，后续通过getPalette(name)按名取值。

2. 懒加载变体：index.lazy.ts

仓库同时提供了懒加载入口 palettes/atmospheric/thunderstorm/src/index.lazy.ts。它从@tsparticles/engine/lazy导入引擎类型，并在注册回调内部通过动态import("./options.js")按需加载颜色配置，适合希望把调色板拆分为独立 chunk、优化首屏体积的打包场景：

import { type Engine } from "@tsparticles/engine/lazy"; const paletteName = "thunderstorm"; export async function loadThunderstormPalette(engine: Engine): Promise<void> { await engine.pluginManager.register(async e => { const { options } = await import("./options.js"); e.pluginManager.addPalette(paletteName, options); }); }

浏览器环境（browser.ts）则会把loadThunderstormPalette挂到globalThis上，供<script>直接调用。

3. 应用阶段：引擎如何消费调色板

当配置中出现palette字段时，引擎在初始化选项阶段会查找并展开调色板：

• engine/src/Options/Classes/Options.ts 中的#importPalette会读取paletteData.background写入背景色、读取blendMode写入混合模式；
• engine/src/Options/Classes/Particles/ParticlesOptions.ts 中的#importPalette则负责把colors.fill.value/colors.stroke展开为粒子的paint（着色）配置，enable字段决定填充是否生效，opacity作为可选的透明度范围参与最终渲染。

也就是说，只要注册了调色板并在 options 里声明palette: "thunderstorm"，背景色、混合模式与粒子配色会自动生效，无需手动填写这些颜色。

快速上手清单

原文档给出了 3 步快速清单，这里结合仓库展开：

1. 安装引擎：通过 npm 安装@tsparticles/engine（^4.x，与仓库 palettes/atmospheric/thunderstorm/package.json 中声明的版本体系一致），或直接引入 CDN 打包产物；
2. 加载基础包并注册调色板：先加载一个运行时包（如@tsparticles/basic，对应 bundles/basic），再调用loadThunderstormPalette(engine)，且必须在tsParticles.load(...)之前完成注册；
3. 在配置中引用：在 options 里写入palette: "thunderstorm"，并补充最少量的粒子行为配置（数量、形状、尺寸、运动）。

CDN / Vanilla JS / jQuery 用法

如果你不使用打包器，直接在 HTML 中通过 CDN 引入即可。原文档的脚本引用方式如下：

<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-thunderstorm@4/tsparticles.palette-coloredSmokeAmber.min.js"></script>

说明：第二个脚本的文件名沿用了包的历史命名（coloredSmokeAmber），实际引入的是 thunderstorm 调色板的浏览器 bundle；使用 npm 方式时包名统一为@tsparticles/palette-thunderstorm。

初始化代码

脚本加载完成后，用下面这段代码初始化：

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

各参数的作用与取值范围：

id字段对应容器元素的id，确保页面中存在<div id="tsparticles"></div>之类的目标容器即可。

自定义与覆盖规则

原文档特别标注了Important ⚠️：调色板只预置颜色，你可以像普通 tsParticles 安装一样，覆盖任意选项。例如：

• 想要更稀疏的粒子，把particles.number.value调小；
• 想要更慢的漂移感，把move.speed调低；
• 想要不同形状，加载对应 shape 包后改shape.type；
• 直接覆盖background、particles.color等字段会以你的显式配置为准。

因为调色板展开发生在选项初始化阶段，你在 options 中显式书写的值拥有更高优先级。

在框架组件库中使用

如果你使用 React、Vue 2/3、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot 或 Web Components 等框架，可以使用对应的 tsParticles 组件库，并在组件初始化前调用loadThunderstormPalette。仓库 wrappers 目录下提供了各框架的封装实现（如 wrappers/react、wrappers/vue3、wrappers/angular），它们的组件内部同样接受 options 对象，只需把palette: "thunderstorm"与particles配置传入即可复用本调色板。框架组件的具体安装与用法以各组件库文档为准。

小结

@tsparticles/palette-thunderstorm用 7 个紫蓝系填充色、#05030d深色背景与screen混合模式，为雷暴主题粒子效果提供了开箱即用的配色方案。它严格遵循 tsParticles 的"调色板只管颜色"设计哲学：注册调用loadThunderstormPalette(engine)，引用声明palette: "thunderstorm"，其余粒子行为完全交给你自由定制。需要深入源码时，可从 palettes/atmospheric/thunderstorm/src 的options.ts与index.ts入手，再结合引擎侧的IPalette接口与PluginManager.addPalette理解其完整生命周期。

【免费下载链接】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