tsParticles Pastel Mint 调色板tsparticles/palette-pastel-mint 完整版本史与色板源码解析【免费下载链接】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本文以palettes/pastel/mint子包的变更记录CHANGELOG.md为主线完整梳理tsparticles/palette-pastel-mint调色板包从 4.0.0-beta.0 到 4.3.3 的 21 个版本演进并结合该包的源码src/options.ts、src/index.ts与引擎侧的调色板注册/消费链路engine/src/Core/Utils/PluginManager.ts、engine/src/Options/Classes/Particles/ParticlesOptions.ts说明这个 pastel马卡龙色系薄荷绿调色板的注册机制、颜色构成与真实接入方式帮助你在 tsParticles 项目中正确选用和自定义该调色板。变更记录的载体一个遵循 Conventional Commits 的子包 changelog仓库根目录是一个 pnpm workspace Lerna/Nx 管理的 monorepo见 lerna.json、nx.json、pnpm-workspace.yaml调色板被拆分为大量独立可发布的 npm 子包每个子包目录都有自己的CHANGELOG.md。本文对应的文件是 palettes/pastel/mint/CHANGELOG.md其开头声明All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.即该文件按 Conventional Commits 规范记录tsparticles/palette-pastel-mint包的全部值得注意的变更。与 package.json 对照可知包名tsparticles/palette-pastel-mint描述为 tsParticles pastel mint palette当前版本4.3.3与 changelog 顶部条目一致运行时唯一依赖tsparticles/engineworkspace 内部依赖说明调色板包本身不含渲染逻辑只是向引擎注册颜色数据构建与发布脚本build/build:ci/version均调用tsparticles-buildprepack在发布前自动执行构建。理解这份 changelog 的前提是理解 monorepo 的同步发布机制绝大多数条目都写着 Version bump only for package tsparticles/palette-pastel-mint意味着该版本发布时本包自身代码没有独立变更版本仅是跟随整个仓库的统一发版流程被同步抬升的。下面按时间倒序完整继承原文档的全部版本条目。完整版本历史4.0.0-beta.0 → 4.3.3以下表格完整收录 CHANGELOG.md 中的全部 21 个条目时间倒序版本发布日期变更类型变更内容4.3.32026-07-23版本同步仅版本抬升Version bump only4.3.22026-07-10版本同步仅版本抬升4.3.12026-07-01版本同步仅版本抬升4.3.02026-06-27版本同步仅版本抬升4.2.12026-06-18版本同步仅版本抬升4.2.02026-06-17功能/修复修复部分 eslint 配置与循环依赖提交 93d7b8b深度复查后的多项修复提交 0e284564.1.32026-06-03版本同步仅版本抬升4.1.22026-06-01版本同步仅版本抬升4.1.12026-05-31版本同步仅版本抬升4.1.02026-05-29版本同步仅版本抬升4.0.52026-05-19版本同步仅版本抬升4.0.42026-05-19版本同步仅版本抬升4.0.32026-05-18版本同步仅版本抬升4.0.22026-05-16版本同步仅版本抬升4.0.12026-05-15版本同步仅版本抬升4.0.02026-05-15正式发布GA仅版本抬升4.0.0-beta.172026-05-15预发布仅版本抬升4.0.0-beta.162026-05-09预发布仅版本抬升4.0.0-beta.152026-05-09预发布仅版本抬升4.0.0-beta.122026-04-15预发布仅版本抬升4.0.0-beta.02026-04-08预发布仅版本抬升原文档中各条目附带的v旧...v新比较链接指向仓库上游仓库的 compare 页此处以版本区间代替。从这份完整历史可以读出三点事实生命周期约 3.5 个月从 2026-04-08 的首个 beta 到 2026-07-23 的 4.3.3共 21 个版本节奏约为每周一个发版窗口与 monorepo 的整体发版节奏一致。beta 编号存在缺口beta 序列从4.0.0-beta.0→4.0.0-beta.12→4.0.0-beta.15中间缺少 beta.1–beta.11、beta.13、beta.14。从源码结构看这是 monorepo 分批次发版的正常现象——只有当某次全仓库发版实际触达了该子包时它的 changelog 才会新增条目未被触达的批次编号自然空缺。唯一一次实质性变更发生在 4.2.0这是该包从 4.0.0 GA 以来唯一带具体 Bug Fixes 列表的版本详见下一节。4.2.0唯一一次带实质修复的版本4.2.02026-06-17是整份 changelog 中唯一列出具体修复内容的条目fixed some eslint configs and circular deps提交93d7b8b修复部分 eslint 配置及模块间的循环依赖。结合该子包依赖tsparticles/engine提供Engine、IPalette等类型见 src/index.ts 第 1 行的import { type Engine } from tsparticles/engine循环依赖主要指类型/模块引用链路的收敛属于仓库级工程治理。various fixes after deeper review提交0e28456深度代码审查后的多项修复未逐条列出。这两条修复在 changelog 中没有进一步展开属于仓库级提交对该子包的连带修正。4.0.0从 beta 到 GA 的关键节点4.0.02026-05-15由4.0.0-beta.17直升正式发布同日完成中间没有再发 beta。对使用者而言4.0.0 是 tsParticles 4.x 主线的稳定基线从该版本起调色板包随主线进入 4.0.1 → 4.0.5 的小版本维护随后在 2026-05-29 跨入 4.1.02026-06-17 跨入 4.2.02026-06-27 跨入 4.3.0直至 4.3.3。这个包到底提供了什么一份 IPalette 颜色定义读完版本史需要回到包本身tsparticles/palette-pastel-mint的全部产品内容就是 src/options.ts 中的一个IPalette常量import { 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, ], }, }, };各字段的含义字段值说明namePastel Mint调色板显示名人类可读用于展示background#F0FFF8建议的画布背景色极浅的薄荷白blendModesource-over粒子与背景/彼此之间的 canvas 合成模式取标准 Canvas2D 值colors.fill.enabletrue启用填充色绘制colors.fill.value6 个色值粒子填充色候选集运行时随机取色6 个填充色覆盖了三组相近的粉彩区间薄荷绿#BAFFC9、#CAFFCC、#C0F0DE、青绿/水色#B3F5E8、#D4FFEF和淡青蓝#BAFFFF。该调色板只定义了fill而没有stroke即粒子只填充、不描边。仓库内附带的官方示例图 images/sample.png 与这组色值、浅色背景完全吻合可作为取色结果的直观验证。注册与消费链路loadPastelMintPalette 如何把颜色交给引擎调色板包的入口逻辑非常薄见 src/index.tsimport { type Engine } from tsparticles/engine; import { options } from ./options.js; const paletteName pastel-mint; /** * param engine - The engine to load the shape in */ export async function loadPastelMintPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }关键事实注册名是pastel-mint而不是mint。这个字符串就是后续在options.palette中引用的 key。注册通过engine.pluginManager.register(...)回调完成回调内调用addPalette。引擎侧的落点是 engine/src/Core/Utils/PluginManager.tsaddPalette(name: string, palette: IPalette): void { this.palettes.set(name, palette); }即调色板被存进插件管理器内部的palettesMapgetPalette(name)用于按名取回同文件 L247 起。消费端在选项解析阶段engine/src/Options/Classes/Options.ts 与 engine/src/Options/Classes/Particles/ParticlesOptions.ts 都会调用this.#pluginManager.getPalette(palette)查找用户指定的调色板ParticlesOptions的私有方法#importPaletteL124-L183负责把调色板翻译成粒子绘制参数将palette.colors单个对象或数组展开为 paint 变体fill.value映射为paint.fill.color.valuefill.enable/fill.opacity原样透传若调色板带stroke则生成描边 paintwidth缺省为 0。mint 调色板没有stroke因此只会得到纯填充 paint最后统一执行this.load({ paint: palettePaint, blend: { enable: true, mode: paletteData.blendMode } })即调色板不仅注入颜色还同时启用 blend 并将模式固定为调色板声明的source-over取色规则当 paint 变体数量大于 1 时保留全部变体对应 mint 的 6 色集合粒子逐个随机取色只有 1 个变体时直接取该变体。另外src/browser.ts 将loadPastelMintPalette挂到globalThis同时保留内部命名空间__tsParticlesInternals这就是 CDN 场景下脚本标签加载后可直接使用全局函数的原因package.json 的exports字段还额外提供./lazy子入口dist/*/index.lazy.js用于框架组件按需懒加载的接入模式。实际使用CDN / 原生 JS 接入基于上述源码事实原生 JS 下的标准接入方式是安装tsparticles/engine与tsparticles/basic等基础包或按仓库 README 使用 CDN bundle(async engine { await loadBasic(engine); await loadPastelMintPalette(engine); // 由 palette-pastel-mint 的 browser 入口挂到全局 const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: pastel-mint, // 必须与 src/index.ts 中注册的 paletteName 一致 }; await engine.load({ id: tsparticles, options, }); })(tsParticles);使用注意事项调色板名必须写pastel-mint。子包 README.md 中的示例写的是palette: mint且其 CDN 脚本文件名沿用了其他调色板的模板tsparticles.palette-coloredSmokeAmber.min.js与 package.json 中的真实包名tsparticles/palette-pastel-mint、src/index.ts 的注册名不一致可以推断是模板复制遗留。以源码中的pastel-mint为准否则getPalette(mint)取不到数据#importPalette会直接 return调色板静默失效见 ParticlesOptions.ts#L124-L129。调色板只定义颜色不定义行为粒子数量、形状、运动速度等仍需由你的 options 提供调色板负责填充paint与blend两部分。可以整体覆盖与标准 tsParticles 配置一样你在 options 中显式给出的particles.color/paint等属性按引擎选项解析优先级生效调色板适合做一套主题色的默认值。对于带组件封装的框架React、Vue、Svelte 等接入方式相同安装对应 wrapper 后调用loadPastelMintPalette(engine)再设置palette: pastel-mint具体用法见 wrappers/ 目录下的各框架子包文档。构建与发布版本抬升从哪来回到 changelog 里大量出现的 Version bump only其产生过程由 palettes/pastel/mint/package.json 的脚本定义tsparticles-build来自 workspace 内部的tsparticles/cli-build负责按 rollup.config.js 与各 tsconfig 变体tsconfig.module.json、tsconfig.browser.json、tsconfig.types.json等产出dist下的 browser/esm/cjs/types/umd 多格式产物version脚本tsparticles-build -d git add package.dist.json在发版时把构建期生成的 package.dist.json 一并入库publishConfig指定directory: dist且access: public即 npm 发布的是构建后的 dist 目录sideEffects: false允许打包器做 tree-shaking。因此当仓库主线因引擎或其他子包的变更触发统一发版时Lerna 会把本包版本号同步抬升、重写这份 changelog即使本包源码零改动——这正是 4.3.3、4.3.2 等仅版本抬升条目的来源。小结palettes/pastel/mint/CHANGELOG.md记录的是一条清晰的演进线2026-04-08 以 4.0.0-beta.0 起步经 5 轮 beta 于 2026-05-15 发布 4.0.0 GA此后 4.1/4.2/4.3 三个次版本按月推进至 4.3.3其中 4.2.0 是唯一含实质修复eslint 配置与循环依赖治理的版本其余条目均为 monorepo 同步发版的版本抬升。包本体则是一个极薄的颜色数据模块src/options.ts 声明 6 色薄荷绿粉彩填充集 #F0FFF8背景 source-over合成模式src/index.ts 将其以pastel-mint为名注册进引擎的PluginManager.palettes由 ParticlesOptions.ts 的#importPalette在选项解析时转换为粒子 paint 与 blend 配置。掌握这条注册-消费链路后你就可以在自己的 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），仅供参考