tsParticles Pulsar 调色板为太空主题粒子背景配置蓝白色系配色【免费下载链接】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/space/pulsar/README.md及其对应源码讲解 tsParticles 的 Pulsar脉冲星调色板它的色板构成、loadPulsarPalette的注册机制、引擎如何将palette: pulsar转化为背景色、混合模式与粒子填充色以及如何在 CDN、Node 包和框架组件中实际使用它。读完后你可以直接为该调色板编写可运行的粒子配置并理解其在tsparticles/engine内部的完整数据流。一、Pulsar 调色板是什么在 tsParticles 4.x 中调色板Palette是一个独立发布的主题包它只负责定义“颜色方案”不定义粒子的运动、交互等行为。仓库中该调色板位于 palettes/space/pulsar 目录对应的 npm 包为tsparticles/palette-pulsar见 package.json当前版本 4.3.3MIT 协议仅依赖tsparticles/engineworkspace 依赖。其核心定义在 options.ts 中完整内容如下import { type IPalette } from tsparticles/engine; export const options: IPalette { name: Pulsar, background: #000205, blendMode: screen, colors: { fill: { enable: true, value: [ #FFFFFF, #DDEEFF, #88BBFF, #4477FF, #1133AA, #000844, ], }, }, };色板的设计逻辑是模拟深空中脉冲星的辉光层次角色色值说明背景#000205近乎纯黑的深藏青作为太空底色高光#FFFFFF纯白最亮的星点次高光#DDEEFF冷白色带轻微蓝调中间调#88BBFF天蓝色主色#4477FF饱和蓝暗调#1133AA深蓝暗部#000844接近背景的极深蓝除了 6 个填充色调色板还声明了blendMode: screenscreen 混合模式让亮色粒子在深色背景上叠加发光和fill.enable: true启用填充色粒子从上述色值中随机取色。这两项与颜色一起构成IPalette接口的完整字段。IPalette 接口的字段约束IPalette定义在 IPalette.ts各字段含义为name调色板名称Pulsar也是包内注册的标识来源background加载调色板后写入画布背景的颜色blendModeCanvas 合成模式GlobalCompositeOperation类型colorsfill含enable、可选opacity、value单值或数组与可选的stroke含opacity、value、width两组颜色配置支持单套或多套SingleOrMultiple。Pulsar 调色板只使用了fill未声明描边因此粒子没有额外轮廓线。二、注册机制loadPulsarPalette 做了什么标准加载入口入口函数在 index.tsimport { type Engine } from tsparticles/engine; import { options } from ./options.js; const paletteName pulsar; export async function loadPulsarPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }关键点在于注册键是pulsar小写这与后续配置中palette: pulsar的取值对应。loadPulsarPalette通过engine.pluginManager.register延迟注册最终调用addPalette(name, palette)把配色对象存入引擎的调色板表addPalette的实现见 PluginManager.ts即一行this.palettes.set(name, palette)。Lazy 变体与浏览器全局变体包内还提供两个变体入口index.lazy.tsloadPulsarPalette中通过await import(./options.js)动态导入配色适合代码分割场景避免调色板数据进入首屏主包。package.json的exports字段将其暴露为tsparticles/palette-pulsar/lazy子路径browser.ts面向浏览器script场景把loadPulsarPalette挂到globalThis上globalObject.loadPulsarPalette并维护__tsParticlesInternals内部命名空间这正是 CDN 用法中函数无需 import 的原因。三、引擎侧消费流程palette 字符串如何变成画面在配置里写palette: pulsar之后引擎的选项类负责查找并应用该调色板。Options.ts 中的逻辑为data.palette ! undefined时执行this.palette data.palette并调用#importPalette(this.palette)#importPalette通过this.#pluginManager.getPalette(palette)取出注册时存入的IPalette若未注册则静默返回取出后以load的形式向当前选项合并三层设置background.color← 调色板的backgroundPulsar 即#000205blend.enable: true且blend.mode←blendModescreenparticles.palette← 调色板名供粒子取色。这也解释了 README 中“Quick checklist”第三条的含义调色板只负责颜色粒子数量、形状、运动等行为仍需要由运行时基础包如tsparticles/basic与particles配置提供。Options类中palette字段的定义同样位于 Options.tspalette?: string表明该字段属于容器级选项与preset并列。四、实际使用CDN / Vanilla JS / jQueryREADME 给出的加载方式是两个 script 标签第一个为tsparticles/basic的 UMD bundle。需要注意README 原文第二个脚本文件名写的是tsparticles.palette-coloredSmokeAmber.min.js且页面徽章链接也指向tsparticles/palette-coloredSmokeAmber这是从其他调色板模板复制残留的痕迹。实际使用时应以tsparticles/palette-pulsar包为准按 jsDelivr 的命名惯例加载对应产物如https://cdn.jsdelivr.net/npm/tsparticles/palette-pulsar4/tsparticles.palette-pulsar.min.js发布前建议在 CDN 上确认当前版本的产物文件名。加载完成后browser.ts暴露的全局函数即可直接使用(async engine { await loadBasic(engine); await loadPulsarPalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: pulsar, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);这段配置即 README 的示例200 个圆形粒子、半径 10~15 像素范围、移动速度 2颜色全部交给palette: pulsar决定。最终效果与 sample.png 一致深蓝黑底上散布白色与蓝色圆点screen 混合使相邻粒子叠加处更亮。npm / Node 包安装tsparticles/engine与一个运行时基础包如tsparticles/basic后再安装tsparticles/palette-pulsar然后import { engine } from tsparticles-engine; import { loadBasic } from tsparticles-basic; import { loadPulsarPalette } from tsparticles/palette-pulsar; await loadBasic(engine); await loadPulsarPalette(engine); // 随后 engine.load({ id, options })options 中写 palette: pulsar需要按需代码分割时可从tsparticles/palette-pulsar/lazy导入 lazy 版本。框架组件官方说明使用各框架组件库React、Vue、Angular、Svelte 等时按其组件库文档初始化并在初始化处调用loadPulsarPalette。本仓库的 wrappers 目录包含 react、vue2、vue3、angular、svelte、preact 等包装器实现可在此确认各框架的加载入口写法。五、自定义与覆盖README 明确提示Pulsar 调色板的全部选项都可以像标准 tsParticles 安装一样被覆盖。结合引擎的合并逻辑可以推断出覆盖顺序调色板在load时先写入background、blend、particles.palette之后你在 options 里显式给出的同名字段会按对象合并规则生效。常见调整方向修改背景options.background { color: #001030 }可替换默认的#000205关闭或更换混合模式options.blend { enable: true, mode: lighter }只保留部分填充色由于粒子从colors.fill.value数组随机取色直接在 options 中重写particles的颜色字段可以限制色调范围调整粒子尺寸、数量、速度等行为与调色板无关全部走particles标准选项。六、在 Space 系列中的位置与自查清单Pulsar 属于仓库palettes/space/下的太空主题系列同目录还有 auroraBorealis、nebula、galaxyDust、supernova 等调色板它们共享完全一致的包结构options.tsindex.tsindex.lazy.tsbrowser.ts因此本文介绍的注册与消费流程对其余空间调色板同样适用只需替换包名与palette键。使用前可对照 README 的 Quick checklist 自查已安装tsparticles/engine或使用 CDN bundle已加载运行时基础包如tsparticles/basic并在engine.load(...)之前调用loadPulsarPalette在 options 中同时给出了palette: pulsar与最小粒子配置。三个条件缺一不可缺基础包则无粒子可渲染缺loadPulsarPalette则#importPalette查不到pulsar会静默跳过缺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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 tsParticles Pulsar 调色板：为太空主题粒子背景配置蓝白色系配色
tsParticles Pulsar 调色板为太空主题粒子背景配置蓝白色系配色【免费下载链接】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/space/pulsar/README.md及其对应源码讲解 tsParticles 的 Pulsar脉冲星调色板它的色板构成、loadPulsarPalette的注册机制、引擎如何将palette: pulsar转化为背景色、混合模式与粒子填充色以及如何在 CDN、Node 包和框架组件中实际使用它。读完后你可以直接为该调色板编写可运行的粒子配置并理解其在tsparticles/engine内部的完整数据流。一、Pulsar 调色板是什么在 tsParticles 4.x 中调色板Palette是一个独立发布的主题包它只负责定义“颜色方案”不定义粒子的运动、交互等行为。仓库中该调色板位于 palettes/space/pulsar 目录对应的 npm 包为tsparticles/palette-pulsar见 package.json当前版本 4.3.3MIT 协议仅依赖tsparticles/engineworkspace 依赖。其核心定义在 options.ts 中完整内容如下import { type IPalette } from tsparticles/engine; export const options: IPalette { name: Pulsar, background: #000205, blendMode: screen, colors: { fill: { enable: true, value: [ #FFFFFF, #DDEEFF, #88BBFF, #4477FF, #1133AA, #000844, ], }, }, };色板的设计逻辑是模拟深空中脉冲星的辉光层次角色色值说明背景#000205近乎纯黑的深藏青作为太空底色高光#FFFFFF纯白最亮的星点次高光#DDEEFF冷白色带轻微蓝调中间调#88BBFF天蓝色主色#4477FF饱和蓝暗调#1133AA深蓝暗部#000844接近背景的极深蓝除了 6 个填充色调色板还声明了blendMode: screenscreen 混合模式让亮色粒子在深色背景上叠加发光和fill.enable: true启用填充色粒子从上述色值中随机取色。这两项与颜色一起构成IPalette接口的完整字段。IPalette 接口的字段约束IPalette定义在 IPalette.ts各字段含义为name调色板名称Pulsar也是包内注册的标识来源background加载调色板后写入画布背景的颜色blendModeCanvas 合成模式GlobalCompositeOperation类型colorsfill含enable、可选opacity、value单值或数组与可选的stroke含opacity、value、width两组颜色配置支持单套或多套SingleOrMultiple。Pulsar 调色板只使用了fill未声明描边因此粒子没有额外轮廓线。二、注册机制loadPulsarPalette 做了什么标准加载入口入口函数在 index.tsimport { type Engine } from tsparticles/engine; import { options } from ./options.js; const paletteName pulsar; export async function loadPulsarPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }关键点在于注册键是pulsar小写这与后续配置中palette: pulsar的取值对应。loadPulsarPalette通过engine.pluginManager.register延迟注册最终调用addPalette(name, palette)把配色对象存入引擎的调色板表addPalette的实现见 PluginManager.ts即一行this.palettes.set(name, palette)。Lazy 变体与浏览器全局变体包内还提供两个变体入口index.lazy.tsloadPulsarPalette中通过await import(./options.js)动态导入配色适合代码分割场景避免调色板数据进入首屏主包。package.json的exports字段将其暴露为tsparticles/palette-pulsar/lazy子路径browser.ts面向浏览器script场景把loadPulsarPalette挂到globalThis上globalObject.loadPulsarPalette并维护__tsParticlesInternals内部命名空间这正是 CDN 用法中函数无需 import 的原因。三、引擎侧消费流程palette 字符串如何变成画面在配置里写palette: pulsar之后引擎的选项类负责查找并应用该调色板。Options.ts 中的逻辑为data.palette ! undefined时执行this.palette data.palette并调用#importPalette(this.palette)#importPalette通过this.#pluginManager.getPalette(palette)取出注册时存入的IPalette若未注册则静默返回取出后以load的形式向当前选项合并三层设置background.color← 调色板的backgroundPulsar 即#000205blend.enable: true且blend.mode←blendModescreenparticles.palette← 调色板名供粒子取色。这也解释了 README 中“Quick checklist”第三条的含义调色板只负责颜色粒子数量、形状、运动等行为仍需要由运行时基础包如tsparticles/basic与particles配置提供。Options类中palette字段的定义同样位于 Options.tspalette?: string表明该字段属于容器级选项与preset并列。四、实际使用CDN / Vanilla JS / jQueryREADME 给出的加载方式是两个 script 标签第一个为tsparticles/basic的 UMD bundle。需要注意README 原文第二个脚本文件名写的是tsparticles.palette-coloredSmokeAmber.min.js且页面徽章链接也指向tsparticles/palette-coloredSmokeAmber这是从其他调色板模板复制残留的痕迹。实际使用时应以tsparticles/palette-pulsar包为准按 jsDelivr 的命名惯例加载对应产物如https://cdn.jsdelivr.net/npm/tsparticles/palette-pulsar4/tsparticles.palette-pulsar.min.js发布前建议在 CDN 上确认当前版本的产物文件名。加载完成后browser.ts暴露的全局函数即可直接使用(async engine { await loadBasic(engine); await loadPulsarPalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: pulsar, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);这段配置即 README 的示例200 个圆形粒子、半径 10~15 像素范围、移动速度 2颜色全部交给palette: pulsar决定。最终效果与 sample.png 一致深蓝黑底上散布白色与蓝色圆点screen 混合使相邻粒子叠加处更亮。npm / Node 包安装tsparticles/engine与一个运行时基础包如tsparticles/basic后再安装tsparticles/palette-pulsar然后import { engine } from tsparticles-engine; import { loadBasic } from tsparticles-basic; import { loadPulsarPalette } from tsparticles/palette-pulsar; await loadBasic(engine); await loadPulsarPalette(engine); // 随后 engine.load({ id, options })options 中写 palette: pulsar需要按需代码分割时可从tsparticles/palette-pulsar/lazy导入 lazy 版本。框架组件官方说明使用各框架组件库React、Vue、Angular、Svelte 等时按其组件库文档初始化并在初始化处调用loadPulsarPalette。本仓库的 wrappers 目录包含 react、vue2、vue3、angular、svelte、preact 等包装器实现可在此确认各框架的加载入口写法。五、自定义与覆盖README 明确提示Pulsar 调色板的全部选项都可以像标准 tsParticles 安装一样被覆盖。结合引擎的合并逻辑可以推断出覆盖顺序调色板在load时先写入background、blend、particles.palette之后你在 options 里显式给出的同名字段会按对象合并规则生效。常见调整方向修改背景options.background { color: #001030 }可替换默认的#000205关闭或更换混合模式options.blend { enable: true, mode: lighter }只保留部分填充色由于粒子从colors.fill.value数组随机取色直接在 options 中重写particles的颜色字段可以限制色调范围调整粒子尺寸、数量、速度等行为与调色板无关全部走particles标准选项。六、在 Space 系列中的位置与自查清单Pulsar 属于仓库palettes/space/下的太空主题系列同目录还有 auroraBorealis、nebula、galaxyDust、supernova 等调色板它们共享完全一致的包结构options.tsindex.tsindex.lazy.tsbrowser.ts因此本文介绍的注册与消费流程对其余空间调色板同样适用只需替换包名与palette键。使用前可对照 README 的 Quick checklist 自查已安装tsparticles/engine或使用 CDN bundle已加载运行时基础包如tsparticles/basic并在engine.load(...)之前调用loadPulsarPalette在 options 中同时给出了palette: pulsar与最小粒子配置。三个条件缺一不可缺基础包则无粒子可渲染缺loadPulsarPalette则#importPalette查不到pulsar会静默跳过缺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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考