企业官网建设流程全解析

tsParticles Neon Palette 实战指南：用 Vibrant Neon 调色板打造霓虹粒子背景

【免费下载链接】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-vibrant-neon（即 Neon Palette）展开，讲解它的 22 色霓虹配色方案、底层IPalette数据结构与addPalette注册机制，以及如何在 CDN / 原生 JavaScript / 框架组件三种场景中安装并把它接入粒子动画。读完本文，你将能独立完成"调色板 + 运行时包 + 粒子配置"的完整装配，并学会在引擎选项层覆盖默认值进行个性化定制。

Neon Palette 是什么

Neon Palette 是 tsParticles 调色板仓库（palettes/vibrant/neon）中的一款官方调色板，对应 npm 包名为@tsparticles/palette-vibrant-neon（版本 4.3.3，MIT 协议，见 package.json）。它的定位非常明确：一套定义好的颜色集合，而不是一套完整的粒子行为配置。调色板只负责"粒子用什么颜色、背景是什么颜色、按什么混合模式绘制"，至于粒子的数量、形状、运动轨迹等行为，仍然需要由运行时包（如@tsparticles/basic）和你的粒子选项来提供。

在 tsParticles 的架构中，调色板被设计为插件的一种特殊形态。Neon 调色板的注册入口在 index.ts：

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

它以"vibrant-neon"作为内部注册名，通过pluginManager.addPalette把调色板选项注册进引擎。同目录下还提供了 index.lazy.ts 的懒加载变体（@tsparticles/palette-vibrant-neon/lazy），它使用动态import("./options.js")，把调色板定义拆成独立的异步 chunk，只有在加载时才被拉取，适合对首屏体积敏感的场景；browser.ts 则把loadVibrantNeonPalette挂到全局对象上，供 CDN 脚本方式使用。

调色板的数据结构：IPalette

Neon 调色板的核心定义位于 options.ts：

import { type IPalette } from "@tsparticles/engine"; export const options: IPalette = { name: "Vibrant Neon", background: "#0A0E27", blendMode: "screen", colors: { fill: { enable: true, value: [ "#00FF00", // 霓虹绿 "#00FFFF", // 青色 "#FF00FF", // 品红 "#FFFF00", // 黄色 "#FF0080", // 玫红 "#00FF80", // 春绿 ], }, }, };

这段定义与引擎侧的 IPalette 接口 一一对应。该接口完整定义了调色板的四个字段：

其中IPaletteColorsFill包含enable（是否启用填充色）、value（颜色值，可为单个或多个）与可选的opacity（不透明度区间）；IPaletteColorsStroke则包含value、可选opacity与width（描边宽度区间）。也就是说，一个调色板理论上既能定义粒子的填充颜色，也能定义描边颜色，还可以通过SingleOrMultiple一次提供多组颜色组合。

Neon Palette 的 README 给出了比源码更丰富的完整色卡（见 README.md），共 22 个颜色值。除去 6 个活跃霓虹色外，还包含完整的暗色、灰色与中性色系，可作为夜间霓虹主题的整套设计 token 使用：

• 霓虹主色：#00FF00、#00FFFF、#FF00FF、#FFFF00、#FF0080、#00FF80
• 暖色过渡：#1A1000、#3A2200、#6B3D00、#A65A00、#D98A1A、#FFC266、#FFA500、#FFEFD7
• 深色背景系：#090500、#0A0E27、#000000、#1E1E1E、#252525、#404040、#1D3557
• 中性灰：#FFFFFF、#F5F5F5、#E0E0E0、#A0A0A0

README 同时标注了该调色板的推荐背景为#1A1000，混合模式为source-over、填充true——这是 README 描述的一种组合示例。需要特别说明的是，仓库源码 options.ts 中的实际默认值是：背景#0A0E27、混合模式screen、填充启用。两者并存于仓库中，使用时应以当前版本源码为准（即以深蓝背景#0A0E27+screen混合为准），并可通过下文的自定义机制按需覆盖。

命名说明：README 中出现了loadNeonPalette与tsparticles.palette-coloredSmokeAmber.min.js的字样，这是历史命名残留；当前仓库源码实际导出名为loadVibrantNeonPalette，UMD 构建模块名为palette-neon（见 rollup.config.js 中的moduleName: "palette-neon"），npm 包名为@tsparticles/palette-vibrant-neon。请以源码导出为准。

引擎侧的工作机制

调色板并不是魔法——它的颜色数据最终要落到粒子选项上。引擎在解析选项时，会通过插件管理器把"调色板名"翻译成具体的颜色配置。

调色板的注册与查询都集中在 PluginManager.ts：addPalette(name, palette)（第 163 行附近）把调色板存入内部的palettesMap；getPalette(name)（第 247 行附近）按名取出。而消费方是选项解析器——在 ParticlesOptions.ts 第 125 行和 Options.ts 第 143 行，都会调用this.#pluginManager.getPalette(palette)：

// engine/src/Options/Classes/Particles/ParticlesOptions.ts（节选） const paletteData = this.#pluginManager.getPalette(palette);

也就是说，当你在选项里写下palette: "neon"时，引擎会把它解析为注册名，并取出对应的IPalette数据，将其中的背景色、混合模式与 fill 颜色应用于粒子绘制。这也是为什么"调色板 + 运行时包 + 粒子配置"三者缺一不可：调色板提供颜色语义，运行时包提供绘制与运动能力，粒子配置决定表现形态。

安装与快速开始

按 README 的 Quick checklist，使用流程固定为三步：安装@tsparticles/engine（或直接用 CDN 包）→ 加载基础包并调用loadVibrantNeonPalette→ 在选项中引用调色板名并补充最小粒子配置。

CDN / 原生 JavaScript / jQuery

通过 jsDelivr 引入基础包与调色板包（以下 CDN 地址沿用 README 给出的写法）：

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

注意：README 原文中的第二个 script 地址含历史遗留文件名tsparticles.palette-coloredSmokeAmber.min.js；结合 rollup.config.js 中moduleName: "palette-neon"的配置，实际产物文件名应以tsparticles.palette-neon.min.js为准。若该地址 404，请以 jsDelivr 上该包的 dist 实际文件名为准。

脚本加载完成后即可初始化引擎：

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

这段示例说明了几件事：

• loadBasic(engine)装载基础运行时能力（粒子绘制、移动等），是任何调色板使用的前提；
• loadVibrantNeonPalette(engine)把 Neon 调色板注册进引擎插件管理器；
• 选项中的palette: "neon"对应源码中的注册名"vibrant-neon"的语义命名（README 示例使用"neon"；引擎按注册名匹配，实际使用时建议以注册名"vibrant-neon"或与所安装版本 README 一致的名称为准，若未命中可检查插件加载是否成功）；
• particles区块只定义了数量（200）、形状（圆形）、尺寸（10–15）和匀速移动（速度 2），其余外观全部交给调色板。

使用 npm 包的模块化方式

在基于构建工具（Vite / webpack / Rollup）的项目中，优先使用 ESM 入口：

npm install @tsparticles/engine @tsparticles/basic @tsparticles/palette-vibrant-neon

import { tsParticles } from "@tsparticles/engine"; import { loadBasic } from "@tsparticles/basic"; import { loadVibrantNeonPalette } from "@tsparticles/palette-vibrant-neon"; await loadBasic(tsParticles); await loadVibrantNeonPalette(tsParticles); await tsParticles.load({ id: "tsparticles", options: { background: { color: "#0A0E27" }, particles: { number: { value: 200 }, shape: { type: "circle" }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2 }, }, palette: "vibrant-neon", }, });

若只想在真正使用时才拉取调色板代码，可改用懒加载入口@tsparticles/palette-vibrant-neon/lazy，它与 index.lazy.ts 对应，会在运行时动态加载调色板定义。

框架组件库

在 React、Vue（2.x/3.x）、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot、Web Components 等 tsParticles 官方组件库中，使用方式一致：安装对应组件包与调色板包，在组件初始化前调用loadVibrantNeonPalette(engine)即可（README 原文的loadNeonPalette为该调色板的历史命名，请以当前源码导出loadVibrantNeonPalette为准）。以 React 为例的示意：

import Particles from "@tsparticles/react"; import { loadVibrantNeonPalette } from "@tsparticles/palette-vibrant-neon"; const options = { /* 同原生示例的 options */ }; export function NeonBackground() { return ( <Particles id="tsparticles" options={options} init={async engine => { await loadVibrantNeonPalette(engine); }} /> ); }

自定义与注意事项

README 特别强调：调色板定义的所有选项，都可以像标准 tsParticles 安装那样逐个覆盖。这意味着你不必局限于 Neon 的默认 6 个霓虹色——例如把填充色换成#FFA500强调色、把背景从#0A0E27换成#000000、把混合模式从screen调整为source-over，都可以在 options 中直接声明，调色板只是起点：

const options = { background: { color: "#000000" }, particles: { number: { value: 300 }, shape: { type: "circle" }, size: { value: { min: 5, max: 12 } }, move: { enable: true, speed: 1.5 }, color: { value: ["#00FF00", "#00FFFF", "#FF00FF"] }, opacity: { value: 0.9 }, }, palette: "vibrant-neon", };

几点实践注意：

1. 调色板 ≠ 完整配置：它只定义颜色与背景，粒子的数量、形状、运动、生命周期等行为必须由你的 options 补齐，否则动画不会出现；
2. 名称匹配：引擎通过注册名在PluginManager.getPalette中查找调色板（PluginManager.ts），palette字段务必与加载函数实际注册的名字一致，并确保加载函数在engine.load之前执行；
3. 懒加载入口：@tsparticles/palette-vibrant-neon/lazy适合对包体积敏感的场景，代价是调色板代码会被拆分为异步 chunk；
4. 版本一致性：README 中loadNeonPalette、coloredSmokeAmber等字样为历史遗留命名，npm 包名、UMD 模块名与源码导出名均以 package.json 与 index.ts 为准。

小结

Neon Palette 是 tsParticles 调色板体系的一个典型代表：用一份结构化的IPalette数据（背景色 + 混合模式 + 填充/描边颜色）在插件层注册，再由引擎选项解析器按名消费，最终与基础运行时包、粒子配置组合成完整的霓虹粒子效果。理解了它的注册机制（addPalette/getPalette）与数据结构（IPalette.ts），你就能举一反三地使用仓库中其他调色板，并在任意 tsParticles 项目里快速落地一套统一的视觉色彩方案。

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