tsParticles MonochromeRed 调色板单色红系 confetti 粒子配色方案完全指南【免费下载链接】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/tsparticlestsParticles 的tsparticles/palette-confetti-monochrome-red是一套专门面向 confetti彩带纸屑场景的单色红系配色方案它通过 7 种从浅粉到深红的填充色与#fff1f1背景色在source-over混合模式下为粒子效果提供统一的视觉基调。本文以该调色板的 README.md 为主体结合 engine 源码 与调色板实现代码讲解它的色值清单、加载方式、完整用法与定制方法帮助你在 CDN / Vanilla JS / 主流框架中快速落地一套无需手动配色的红色系粒子背景。MonochromeRed 调色板是什么MonochromeRed 是 tsParticles palettes 体系中 confetti 分类下的一个成员同分类还包括 default、gold、monochromeBlue、monochromeGreen、monochromePink、monochromePurple、neon、pastel、patriotic、rainbow、winter 等见 palettes/confetti 目录。它的定位是只定义颜色不定义完整行为。也就是说它提供一组经过精心挑选、在视觉上协调的色值而粒子数量、形状、尺寸、运动等行为仍由你自己的options配置决定这一点在 README 的 Quick checklist 中也被明确强调“A palette defines colors, not complete behavior, so pair it with a runtime package and particle options.”在源码层面调色板的注册由 src/index.ts 完成export async function loadConfettiMonochromeRedPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }其中addPalette是 PluginManager 提供的能力它把调色板按名字存入内部 Map当你的配置里出现palette: monochromeRed时引擎会通过getPalette取出对应定义并合并进粒子选项参见 Options.ts 中的 #importPalette。注意源码中实际导出的加载函数名为loadConfettiMonochromeRedPalette全局挂载也在 browser.ts 中以同名属性暴露使用时应以此为准部分旧文档示例中写作loadMonochromeRedPalette是历史遗留的简写。包名则以 package.json 声明的tsparticles/palette-confetti-monochrome-red为准。色板颜色清单调色板的全部颜色定义在 src/options.ts 中对应的IPalette接口定义见 engine/src/Core/Interfaces/IPalette.ts。下表完整列出 README 中的 7 种粒子填充色色值视觉倾向在 options.ts 中的位置#FFB3B3极浅粉红高光colors.fill.value[0]#FF8080浅珊瑚红colors.fill.value[1]#FF4D4D明亮红colors.fill.value[2]#E61A1A正红colors.fill.value[3]#B30000深红colors.fill.value[4]#800000暗红阴影colors.fill.value[5]#FFD6D6极淡粉最浅层次colors.fill.value[6]配套的全局设置项目值背景色Background#fff1f1混合模式Blend modesource-over填充Filltrue从 options.ts 可以看出这套调色板的真实数据结构export const options: IPalette { name: Confetti - Monochrome Red, background: #fff1f1, blendMode: source-over, colors: { fill: { enable: true, value: [ #FFB3B3, #FF8080, #FF4D4D, #E61A1A, #B30000, #800000, #FFD6D6, ], }, }, };对照 IPalette 接口 可以看到该结构的语义fill支持enable是否启用填充色、value单个或多个色值字符串、以及可选的opacity范围此外还预留了stroke描边色含width与opacity字段说明调色板体系可以同时承载填充与描边两种颜色需求只是本调色板只使用了fill。快速上手指南README 的 Quick checklist 给出三步走流程它同样适用于任何 tsParticles 调色板安装tsparticles/engine或直接使用下方 CDN bundle加载一个基础运行包例如tsparticles/basic并在tsParticles.load(...)之前调用loadConfettiMonochromeRedPalette在options中填入palette: monochromeRed并配上最简粒子配置。请记住调色板只负责颜色。缺少运行包或粒子行为配置时即使注册了调色板也不会产生任何可见效果。通过 npm 安装在 npm 生态中engine 与调色板作为独立包分发本调色板包名与入口配置见 package.jsonnpm install tsparticles/engine tsparticles/basic tsparticles/palette-confetti-monochrome-red包同时提供mainCommonJS、moduleESM、browser与types等多入口并额外暴露./lazy子路径用于按需懒加载详见下文“懒加载模式”。CDN / Vanilla JS / jQuery 方式不经过打包器时可以直接用 jsDelivr 加载基础包与调色板 bundle然后在页面里初始化script srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-confetti-monochrome-red4/tsparticles.palette-confetti-monochrome-red.min.js/script提示原文档示例中第二个script的 bundle 文件名残留了其他调色板的命名tsparticles.palette-coloredSmokeAmber.min.js属复制粘贴遗留。请以本包真实的发布文件名为准可参考 rollup.config.js 的产物命名规则保证 CDN 地址可访问。脚本加载完成后loadConfettiMonochromeRedPalette会挂到globalThis上见 browser.ts可以直接在全局作用域调用。完整使用示例以下示例是 README 给出的标准用法配合基础包tsparticles/basic使用先加载基础功能再注册调色板最后传入含palette字段的选项并load(async engine { await loadBasic(engine); await loadConfettiMonochromeRedPalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: monochromeRed, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);要点解读loadBasic(engine)来自tsparticles/basic提供圆形 shape、基础移动与 size 等最小功能集如果使用tsparticles/full或all等更完整的 bundle同样兼容palette: monochromeRed是触发调色板合并的关键字段其值对应addPalette注册时使用的内部名confetti-monochrome-red见 index.tsnumber、shape、size、move等粒子行为全部由你自行定义调色板只负责把上面 7 种红色注入particles.color的取值集合。如果你在 ESM 工程中直接import则等价写法为import { tsParticles } from tsparticles/engine; import { loadBasic } from tsparticles/basic; import { loadConfettiMonochromeRedPalette } from tsparticles/palette-confetti-monochrome-red; await loadBasic(tsParticles); await loadConfettiMonochromeRedPalette(tsParticles); await tsParticles.load({ id: tsparticles, options: { palette: monochromeRed, particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2 }, }, }, });懒加载模式为了减小首屏体积本包额外导出了./lazy入口index.lazy.ts它把options的导入推迟到注册回调内部实现按需加载import { loadConfettiMonochromeRedPalette } from tsparticles/palette-confetti-monochrome-red/lazy;该入口与常规入口导出的函数签名一致仅在使用dynamic import的打包场景下延迟拉取颜色数据。定制化在调色板之上覆盖一切README 特别标注了“Important ⚠️”说明你可以像在标准 tsParticles 安装中一样覆盖调色板定义以外的所有选项。调色板通过引擎内部的导入机制把颜色与背景等默认值合并进配置而你在options中显式书写的字段优先级更高。例如想保留红色色板但改用方形粒子、加快移动速度并自行指定背景const options { background: { color: #2b0a0a }, // 覆盖调色板默认背景 #fff1f1 particles: { number: { value: 300 }, shape: { type: square }, size: { value: { min: 6, max: 12 } }, move: { enable: true, speed: 4, direction: top, outModes: { default: out }, }, }, palette: monochromeRed, };同时你也不必被 7 个固定色值束缚——IPaletteColorsFill.value支持“单个或多个字符串”在options.particles.color.value中追加或替换颜色即可与调色板颜色并存灵活混搭。在主流框架中使用对于 React、Vue 2/3、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot、Web Components 等拥有官方 tsParticles 组件库的框架流程变为先安装对应组件库与本调色板包然后在组件初始化前调用loadConfettiMonochromeRedPalette并把palette: monochromeRed写入传给组件的options。具体安装命令与组件 API 请以对应组件库仓库的文档为准本项目 wrappers 目录 下存放了 react、vue3、angular、svelte 等各框架的封装源码可作参考。组件方式下同样遵守“先加载运行包 → 再注册调色板 → 后传入 options”的顺序只是loadBasic与loadConfettiMonochromeRedPalette的调用位置由组件库的生命周期管理。与其他 confetti 调色板的选择建议在 palettes/confetti 目录 下tsParticles 还提供了多套风格各异的配色default / gold / rainbow适合通用喜庆场景monochromeBlue / monochromeGreen / monochromePink / monochromePurple与 MonochromeRed 同一“单色系”家族适合需要严格品牌色统一的项目neon / pastel / winter / patriotic分别面向霓虹、柔和、冬日与节日主题。如果场景偏“严肃红”或需要与大红色品牌主视觉匹配MonochromeRed 的从#FFD6D6到#800000的渐变层次能提供既有高光又有阴影的立体感且背景#fff1f1的低饱和粉白让粒子在浅色页面上保持干净对比。相关文档调色板与预设总目录presets与palettes分类均在本仓库中可浏览 palettes 目录 与 presets 目录 了解全量配色与预置效果调色板数据结构的类型定义engine/src/Core/Interfaces/IPalette.ts调色板注册与查询机制engine/src/Core/Utils/PluginManager.ts调色板在选项合并中的导入逻辑engine/src/Options/Classes/Options.ts。通过本调色板你可以在不手写任何颜色代码的情况下获得一组视觉协调的红色系 confetti 粒子而结合palette字段与自定义options的覆盖机制又能把配色、行为与品牌调性完全掌控在自己手中——这正是 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考