tsParticles Pastel Mint 调色板用 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 仓库中 Pastel Mint 调色板文档 为主体完整讲解该调色板包tsparticles/palette-pastel-mint的颜色数据构成、向引擎注册插件的加载机制、CDN 与 npm 两种集成方式并结合 源码实现 指出文档示例与实际包名、调色板名称之间的差异。读完后你可以把这套粉绿Mint色系应用到任意 tsParticles 粒子场景中并理解 Palette 在引擎内部的IPalette数据结构与pluginManager注册链路。1. 调色板包在仓库中的定位每个调色板在仓库中都是一个可独立发布的 npm 包。Mint 调色板位于 palettes/pastel/mint 目录与同属 pastel 系列的 cool、dream、sunset、warm 并列。从 package.json 可以确认以下事实包名为tsparticles/palette-pastel-mint版本4.3.3描述为 “tsParticles pastel mint palette”MIT 协议唯一的运行时依赖是tsparticles/enginemonorepo 内以workspace:*引用即调色板本身不依赖任何粒子行为包构建脚本走仓库统一的tsparticles-buildcli-build/cli-command-build工具链sideEffects: false支持 tree-shakingexports同时暴露主入口与./lazy子路径并按browser/import/require/umd条件分流方便 npm 用户按需选择立即加载或懒加载版本。这解释了文档 Quick checklist 中的关键结论调色板只定义颜色不定义完整行为必须搭配tsparticles/engine或 CDN 引擎 bundle与一个运行时基础包如tsparticles/basic以及粒子选项一起使用。2. 颜色数据构成README 色板与源码实际生效色2.1 README 列出的完整色板README 以色块表格形式列出 25 个色值并标注了背景色与混合模式色值色值色值色值色值#1A1000#3A2200#6B3D00#A65A00#D98A1A#FFC266#090500#F0FFF8#BAFFC9#B3F5E8#BAFFFF#D4FFEF#C0F0DE#CAFFCC#FFA500#FFEFD7#000000#FFFFFF#F5F5F5#1E1E1E#252525#E0E0E0#A0A0A0#404040#1D3557README 中额外标注Background #1A1000Blend mode: source-overFill: true。2.2 源码中实际注册的 IPalette 定义从源码结构看真正注入引擎的颜色定义在 src/options.tsimport { type IPalette } from tsparticles/engine; export const options: IPalette { name: Pastel Mint, background: #F0FFF8, blendMode: source-over, colors: { fill: { enable: true, value: [ #BAFFC9, #B3F5E8, #BAFFFF, #D4FFEF, #C0F0DE, #CAFFCC, ], }, }, };对照引擎侧的接口定义 IPalette.ts一个调色板由四部分组成name调色板展示名Pastel Mint同时作为options.palette引用的标识background背景色源码实际值为#F0FFF8极浅薄荷白而 README 表格中标注的#1A1000与源码不一致可以推断是模板沿用遗留blendModeCanvas 混合模式此处为source-over默认正常混合colors支持fill填充与stroke描边两组颜色每组包含enable/opacity/value字段。Mint 调色板只启用了fillvalue为 6 个薄荷色系十六进制色。需要注意README 色板表中的琥珀色系#1A1000~#FFC266、#FFA500、#FFEFD7等并不在options.ts的fill.value列表中结合该调色板 README 中残留的 “colored smoke amber” 描述可以推断这张大表是调色板模板目录统一生成的色板参考数据实际渲染时生效的颜色以options.ts中的 6 个 fill 色加#F0FFF8背景为准。3. 加载机制调色板如何注册进引擎Mint 调色板提供三种入口文件分别对应 CDN、npm 常规加载与懒加载场景。3.1 常规入口插件管理器注册src/index.ts 是核心逻辑import { type Engine } from tsparticles/engine; import { options } from ./options.js; const paletteName pastel-mint; export async function loadPastelMintPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }调用链是loadPastelMintPalette(engine)→engine.pluginManager.register(...)→pluginManager.addPalette(pastel-mint, options)。注册完成后粒子配置中只需写palette: pastel-mint引擎在解析粒子颜色时就会从该调色板取值。3.2 懒加载入口src/index.lazy.ts 与常规入口的区别在于注册回调内部对options做了动态import(./options.js)只有在调色板真正被引擎使用时颜色模块才会加载适合对首屏体积敏感的场景。npm 用户通过tsparticles/palette-pastel-mint/lazy子路径引用该入口。3.3 浏览器全局入口src/browser.ts 将加载函数挂到globalThisglobalObject.__tsParticlesInternals globalObject.__tsParticlesInternals ?? {}; globalObject.loadPastelMintPalette loadPastelMintPalette;这就是 CDN 场景下script标签加载后能直接在全局拿到loadPastelMintPalette的原因package.json的browser字段指向该产物。4. 实战集成4.1 三步接入清单继承原文档安装tsparticles/engine或使用 CDN 引擎 bundle加载一个基础运行时包如tsparticles/basic并在tsParticles.load(...)之前调用调色板加载函数在 options 中声明调色板并配合最小粒子配置。4.2 CDN / Vanilla JS / jQuery文档给出的 CDN 方式script srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-mint4/tsparticles.palette-coloredSmokeAmber.min.js/script脚本加载后即可按文档示例初始化(async engine { await loadBasic(engine); await loadMintPalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: mint, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);关键勘误以源码为准结合 src/index.ts 与 package.json该调色板在引擎中注册的名称是pastel-mint导出的函数是loadPastelMintPalettenpm 包名是tsparticles/palette-pastel-mint当前版本 4.3.3。README 示例中的loadMintPalette/palette: mint/palette-mint命名与源码不一致实际项目请以源码为准(async engine { await loadBasic(engine); await loadPastelMintPalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2 }, }, palette: pastel-mint, }; await engine.load({ id: tsparticles, options }); })(tsParticles);4.3 npm / ESM 模块方式npm install tsparticles/engine tsparticles/basic tsparticles/palette-pastel-mintimport { engine } from tsparticles/engine; import { loadBasic } from tsparticles/basic; import { loadPastelMintPalette } from tsparticles/palette-pastel-mint; await loadBasic(engine); await loadPastelMintPalette(engine); await engine.load({ id: tsparticles, options: { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2 }, }, palette: pastel-mint, }, });若使用懒加载子路径导入自tsparticles/palette-pastel-mint/lazy效果相同但颜色模块延迟到真正使用时才加载。4.4 自定义与覆盖继承原文档的 Customization 说明调色板加载后所有选项都可以按标准 tsParticles 方式覆盖。例如只想改粒子尺寸、速度而保留调色板颜色直接修改particles相关字段即可若想调整背景色可在 options 中显式声明background覆盖#F0FFF8由于IPalette.colors支持opacity与stroke字段见 IPalette.ts在引擎层面也允许对调色板颜色施加不透明度范围或描边配置。4.5 框架组件库继承原文档的 Frameworks 说明React、Vue、Angular、Svelte 等框架下使用官方组件库时同样调用loadPastelMintPalette完成注册再在组件属性中传入palette与粒子选项即可。本仓库wrappers/目录下维护了各框架封装react、vue3、angular、svelte、jquery、preact 等demo/目录下还有对应框架的可运行示例工程可供参考。5. 命名与版本注意事项小结项目README 示例写法源码/包元数据实际值依据加载函数loadMintPaletteloadPastelMintPalettesrc/index.ts调色板引用名palette: mintpalette: pastel-mintpaletteName常量npm 包名tsparticles/palette-minttsparticles/palette-pastel-mintpackage.json背景色#1A1000#F0FFF8src/options.ts版本未标注4.3.3依赖同版本 enginepackage.json、package.dist.json上述差异表明调色板目录存在模板化复用README 中 “colored smoke amber” 描述、琥珀色系色块、CDN 文件名均为模板遗留实际接入时建议以src/源码与package.json元数据为唯一事实来源。6. 相关文件索引调色板文档与色板palettes/pastel/mint/README.md、示例图 images/sample.png颜色定义palettes/pastel/mint/src/options.ts加载入口palettes/pastel/mint/src/index.ts、palettes/pastel/mint/src/index.lazy.ts、palettes/pastel/mint/src/browser.ts包元数据palettes/pastel/mint/package.json、palettes/pastel/mint/package.dist.json引擎调色板接口engine/src/Core/Interfaces/IPalette.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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
tsParticles Pastel Mint 调色板：用 Palette 插件机制实现粉绿薄荷粒子背景
tsParticles Pastel Mint 调色板用 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 仓库中 Pastel Mint 调色板文档 为主体完整讲解该调色板包tsparticles/palette-pastel-mint的颜色数据构成、向引擎注册插件的加载机制、CDN 与 npm 两种集成方式并结合 源码实现 指出文档示例与实际包名、调色板名称之间的差异。读完后你可以把这套粉绿Mint色系应用到任意 tsParticles 粒子场景中并理解 Palette 在引擎内部的IPalette数据结构与pluginManager注册链路。1. 调色板包在仓库中的定位每个调色板在仓库中都是一个可独立发布的 npm 包。Mint 调色板位于 palettes/pastel/mint 目录与同属 pastel 系列的 cool、dream、sunset、warm 并列。从 package.json 可以确认以下事实包名为tsparticles/palette-pastel-mint版本4.3.3描述为 “tsParticles pastel mint palette”MIT 协议唯一的运行时依赖是tsparticles/enginemonorepo 内以workspace:*引用即调色板本身不依赖任何粒子行为包构建脚本走仓库统一的tsparticles-buildcli-build/cli-command-build工具链sideEffects: false支持 tree-shakingexports同时暴露主入口与./lazy子路径并按browser/import/require/umd条件分流方便 npm 用户按需选择立即加载或懒加载版本。这解释了文档 Quick checklist 中的关键结论调色板只定义颜色不定义完整行为必须搭配tsparticles/engine或 CDN 引擎 bundle与一个运行时基础包如tsparticles/basic以及粒子选项一起使用。2. 颜色数据构成README 色板与源码实际生效色2.1 README 列出的完整色板README 以色块表格形式列出 25 个色值并标注了背景色与混合模式色值色值色值色值色值#1A1000#3A2200#6B3D00#A65A00#D98A1A#FFC266#090500#F0FFF8#BAFFC9#B3F5E8#BAFFFF#D4FFEF#C0F0DE#CAFFCC#FFA500#FFEFD7#000000#FFFFFF#F5F5F5#1E1E1E#252525#E0E0E0#A0A0A0#404040#1D3557README 中额外标注Background #1A1000Blend mode: source-overFill: true。2.2 源码中实际注册的 IPalette 定义从源码结构看真正注入引擎的颜色定义在 src/options.tsimport { type IPalette } from tsparticles/engine; export const options: IPalette { name: Pastel Mint, background: #F0FFF8, blendMode: source-over, colors: { fill: { enable: true, value: [ #BAFFC9, #B3F5E8, #BAFFFF, #D4FFEF, #C0F0DE, #CAFFCC, ], }, }, };对照引擎侧的接口定义 IPalette.ts一个调色板由四部分组成name调色板展示名Pastel Mint同时作为options.palette引用的标识background背景色源码实际值为#F0FFF8极浅薄荷白而 README 表格中标注的#1A1000与源码不一致可以推断是模板沿用遗留blendModeCanvas 混合模式此处为source-over默认正常混合colors支持fill填充与stroke描边两组颜色每组包含enable/opacity/value字段。Mint 调色板只启用了fillvalue为 6 个薄荷色系十六进制色。需要注意README 色板表中的琥珀色系#1A1000~#FFC266、#FFA500、#FFEFD7等并不在options.ts的fill.value列表中结合该调色板 README 中残留的 “colored smoke amber” 描述可以推断这张大表是调色板模板目录统一生成的色板参考数据实际渲染时生效的颜色以options.ts中的 6 个 fill 色加#F0FFF8背景为准。3. 加载机制调色板如何注册进引擎Mint 调色板提供三种入口文件分别对应 CDN、npm 常规加载与懒加载场景。3.1 常规入口插件管理器注册src/index.ts 是核心逻辑import { type Engine } from tsparticles/engine; import { options } from ./options.js; const paletteName pastel-mint; export async function loadPastelMintPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }调用链是loadPastelMintPalette(engine)→engine.pluginManager.register(...)→pluginManager.addPalette(pastel-mint, options)。注册完成后粒子配置中只需写palette: pastel-mint引擎在解析粒子颜色时就会从该调色板取值。3.2 懒加载入口src/index.lazy.ts 与常规入口的区别在于注册回调内部对options做了动态import(./options.js)只有在调色板真正被引擎使用时颜色模块才会加载适合对首屏体积敏感的场景。npm 用户通过tsparticles/palette-pastel-mint/lazy子路径引用该入口。3.3 浏览器全局入口src/browser.ts 将加载函数挂到globalThisglobalObject.__tsParticlesInternals globalObject.__tsParticlesInternals ?? {}; globalObject.loadPastelMintPalette loadPastelMintPalette;这就是 CDN 场景下script标签加载后能直接在全局拿到loadPastelMintPalette的原因package.json的browser字段指向该产物。4. 实战集成4.1 三步接入清单继承原文档安装tsparticles/engine或使用 CDN 引擎 bundle加载一个基础运行时包如tsparticles/basic并在tsParticles.load(...)之前调用调色板加载函数在 options 中声明调色板并配合最小粒子配置。4.2 CDN / Vanilla JS / jQuery文档给出的 CDN 方式script srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-mint4/tsparticles.palette-coloredSmokeAmber.min.js/script脚本加载后即可按文档示例初始化(async engine { await loadBasic(engine); await loadMintPalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: mint, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);关键勘误以源码为准结合 src/index.ts 与 package.json该调色板在引擎中注册的名称是pastel-mint导出的函数是loadPastelMintPalettenpm 包名是tsparticles/palette-pastel-mint当前版本 4.3.3。README 示例中的loadMintPalette/palette: mint/palette-mint命名与源码不一致实际项目请以源码为准(async engine { await loadBasic(engine); await loadPastelMintPalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2 }, }, palette: pastel-mint, }; await engine.load({ id: tsparticles, options }); })(tsParticles);4.3 npm / ESM 模块方式npm install tsparticles/engine tsparticles/basic tsparticles/palette-pastel-mintimport { engine } from tsparticles/engine; import { loadBasic } from tsparticles/basic; import { loadPastelMintPalette } from tsparticles/palette-pastel-mint; await loadBasic(engine); await loadPastelMintPalette(engine); await engine.load({ id: tsparticles, options: { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2 }, }, palette: pastel-mint, }, });若使用懒加载子路径导入自tsparticles/palette-pastel-mint/lazy效果相同但颜色模块延迟到真正使用时才加载。4.4 自定义与覆盖继承原文档的 Customization 说明调色板加载后所有选项都可以按标准 tsParticles 方式覆盖。例如只想改粒子尺寸、速度而保留调色板颜色直接修改particles相关字段即可若想调整背景色可在 options 中显式声明background覆盖#F0FFF8由于IPalette.colors支持opacity与stroke字段见 IPalette.ts在引擎层面也允许对调色板颜色施加不透明度范围或描边配置。4.5 框架组件库继承原文档的 Frameworks 说明React、Vue、Angular、Svelte 等框架下使用官方组件库时同样调用loadPastelMintPalette完成注册再在组件属性中传入palette与粒子选项即可。本仓库wrappers/目录下维护了各框架封装react、vue3、angular、svelte、jquery、preact 等demo/目录下还有对应框架的可运行示例工程可供参考。5. 命名与版本注意事项小结项目README 示例写法源码/包元数据实际值依据加载函数loadMintPaletteloadPastelMintPalettesrc/index.ts调色板引用名palette: mintpalette: pastel-mintpaletteName常量npm 包名tsparticles/palette-minttsparticles/palette-pastel-mintpackage.json背景色#1A1000#F0FFF8src/options.ts版本未标注4.3.3依赖同版本 enginepackage.json、package.dist.json上述差异表明调色板目录存在模板化复用README 中 “colored smoke amber” 描述、琥珀色系色块、CDN 文件名均为模板遗留实际接入时建议以src/源码与package.json元数据为唯一事实来源。6. 相关文件索引调色板文档与色板palettes/pastel/mint/README.md、示例图 images/sample.png颜色定义palettes/pastel/mint/src/options.ts加载入口palettes/pastel/mint/src/index.ts、palettes/pastel/mint/src/index.lazy.ts、palettes/pastel/mint/src/browser.ts包元数据palettes/pastel/mint/package.json、palettes/pastel/mint/package.dist.json引擎调色板接口engine/src/Core/Interfaces/IPalette.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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
