前端【免费下载链接】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/template-particles是 tsParticles 官方仓库中内置的基础粒子动画项目模板配合create-tsparticles-app脚手架命令使用可以在数秒内生成一个带有全屏粒子动画的完整前端项目并支持 React、Vue、Angular、Svelte 等 20 余种框架。本文以 templates/particles/README.md 为骨架结合模板源码配置生成脚本、各框架入口文件、模板依赖清单展开读完你将掌握模板的目录结构与工作原理、默认粒子效果的每一个配置项、多框架集成的写法差异以及如何基于该模板快速定制自己的粒子动画项目。模板定位一个可脚手架化的基础粒子动画起点tsparticles/template-particles在仓库中位于 templates/particles其 README 的定义非常明确tsParticles base particles template. Use withcreate-tsparticles-appto scaffold a new project with a full-screen particle animation.也就是说这个模板解决的核心问题是免去从零配置 tsParticles 的繁琐步骤。它预置了引擎依赖、粒子预设配置、示例页面骨架以及各主流框架的组件封装让开发者拿到手即可npm install npm run dev运行一个带粒子背景的页面再在此基础上修改颜色、数量、运动方式等参数。从仓库结构看同级的 templates/confetti、templates/ribbons、templates/landing 等模板各自对应一类视觉效果彩带、丝带、落地页等而particles模板承担的是最通用的基础粒子场景——圆形粒子连线网络这也是 tsParticles 官方演示中最经典的形态。模板目录结构模板本体 框架变体templates/particles目录内部分为两层模板元信息层README.md、package.json、template.json、CHANGELOG.md、scripts/prebuild.js实际模板内容层template/目录下按框架拆分的 21 个变体template/下的框架变体包括angular、angular-confetti、angular-fireworks、astro、ember、inferno、jquery、lit、nextjs、nuxt2、nuxt3、nuxt4、preact、qwik、react、riot、solid、stencil、svelte、vanilla、vue2、vue3、webcomponents。其中vanilla变体是无框架的基准实现HTML TypeScript Vite其余变体则是对应框架的组件化封装所有变体共享同一份粒子效果配置只是载体不同。这种一份效果、多框架载体的设计使得无论团队使用何种技术栈都能从模板中获得一致的粒子动画体验。模板依赖清单template.json 与版本解析机制模板的依赖并非写在某个package.json中而是集中声明在 templates/particles/template.json脚手架生成项目时会读取它来组装目标项目的package.json{ package: { dependencies: { tsparticles/engine: ^4.1.3, tsparticles/particles: ^4.1.3 }, devDependencies: { typescript: ^6.0.3, vite: ^8.1.0 } } }三个关键依赖各司其职tsparticles/engine粒子引擎核心负责容器、粒子生命周期、动画循环与渲染tsparticles/particles粒子 bundle预置插件组合通过其loadParticles方法把基础粒子能力注入引擎vitetypescript开发与构建工具链vanilla 变体 package.json 的脚本为dev: vite、build: tsc vite build、preview: vite preview。值得注意的是模板的版本解析机制。模板本体处于 monorepopnpm workspace中依赖在template.json里可能写为workspace:*这类占位符而 scripts/prebuild.js 会在发布前自动把 workspace 依赖替换为真实版本号它读取engine/package.json与bundles/particles/package.json的实际版本将^、~、*等范围解析为形如^4.3.3的精确 semver 范围保证发布到 npm 后模板可独立安装使用。从源码结构看prebuild在pnpm run build时自动执行见 templates/particles/package.json这一机制确保了仓库内模板始终与引擎版本保持同步。快速上手用 create-tsparticles-app 生成项目模板本身是脚手架的数据源实际使用方式是配合create-tsparticles-app命令。脚手架侧的逻辑可参考 cli/commands/create-app/src/scaffold.ts它会定位到目标模板目录、读取template.json组装依赖、将template/下对应框架的文件复制到目标目录并执行占位符替换如把gitignore重命名为.gitignore、把{{projectName}}替换为实际项目名。生成后的项目使用方式非常直接这也是 vanilla 变体自带 README.md 的说明npm install npm run dev随后打开本地开发服务器地址即可看到全屏粒子动画页面生产构建使用npm run build预览构建产物使用npm run preview。默认粒子效果逐项解析所有框架变体共享同一份默认粒子配置其源配置完整保留在 vanilla 变体的 src/main.ts 中。这段配置是理解模板行为的关键逐项说明如下import ./style.css; import { tsParticles } from tsparticles/engine; import { loadParticles } from tsparticles/particles; (async () { await loadParticles(tsParticles); await tsParticles.load({ id: tsparticles, options: { background: { color: { value: #0d0d2b } }, fpsLimit: 120, particles: { number: { value: 80, density: { enable: true } }, color: { value: #ffffff }, shape: { type: circle }, opacity: { value: 0.5 }, size: { value: { min: 1, max: 5 } }, links: { enable: true, distance: 150, color: #ffffff, opacity: 0.3, width: 1, }, move: { enable: true, speed: 2, direction: none, random: false, straight: false, outModes: { default: bounce }, }, }, interactivity: { events: { onHover: { enable: true, mode: repulse }, onClick: { enable: true, mode: push }, }, modes: { repulse: { distance: 100, duration: 0.4 }, push: { quantity: 4 }, }, }, detectRetina: true, }, }); })();初始化流程先await loadParticles(tsParticles)将粒子 bundle 注册进引擎这一调用来自tsparticles/particles再await tsParticles.load({ id, options })创建容器。id: tsparticles是容器标识也是动画挂载的 DOM 占位标识顶层配置项detectRetina: true启用视网膜屏幕适配fpsLimit: 120限制动画帧率上限避免高刷屏下过度消耗性能。particles 块粒子本体number.value: 80粒子总数density.enable: true开启密度自适应粒子数会随画布面积按比例调整color.value: #ffffff白色粒子shape.type: circle圆形形状这也是最省渲染开销的形状之一opacity.value: 0.5半透明粒子size.value: { min: 1, max: 5 }粒子尺寸在 15 像素间随机分布links块开启粒子连线网络distance: 150表示距离小于 150px 的粒子之间绘制连线width: 1为线宽连线颜色与透明度分别为#ffffff与0.3——这就是经典粒子星云网络视觉效果的来源move块speed: 2像素/帧的匀速运动direction: none无固定方向random: false非随机起始方向straight: false允许曲线运动outModes.default: bounce粒子触达画布边缘时反弹回场内。interactivity 块鼠标交互悬停onHover.enable: true且mode: repulse鼠标靠近时粒子被排斥开形成气浪效果repulse.distance: 100是排斥半径duration: 0.4为排斥力持续秒数点击onClick.enable: true且mode: push每点击一次在鼠标位置新增粒子push.quantity: 4为每次点击新增的粒子数量。页面骨架与样式vanilla 变体的 index.html 提供了一个居中显示的标题占位div idapph1tsParticles/h1/div粒子画布作为全屏背景铺在其后style.css 通过body { margin: 0; overflow: hidden; }消除页面边距与滚动条并用绝对定位 transform将标题居中pointer-events: none保证文字层不阻挡鼠标事件穿透到粒子画布。多框架集成写法对比模板的价值在于同一配置、随处复用。以 React 与 Vue3 变体为例可以看出封装差异ReactApp.tsx使用官方 React 组件库tsparticles/react通过ParticlesProvider包裹应用并传入init回调完成loadParticles(engine)注册再用Particles idtsparticles options{options} /声明粒子容器options的类型为ISourceOptionsasync function init(engine: Engine): Promisevoid { await loadParticles(engine); } const options: ISourceOptions { /* 与上文完全一致的配置 */ }; export default function App() { return ( ParticlesProvider init{init} div idapph1tsParticles/h1/div Particles idtsparticles options{options} / /ParticlesProvider ); }Vue3App.vue使用script setupvue-particles组件options通过:options绑定传入script setup langts import type { ISourceOptions } from tsparticles/engine; const options: ISourceOptions { /* 同一份配置 */ }; /script template div idapph1tsParticles/h1/div vue-particles idtsparticles :optionsoptions / /templatevanilla则直接调用引擎 APItsParticles.load()。三种写法的配置对象完全一致变化的只是如何把配置交给引擎这一层——这正是模板设计上刻意保持的一致性方便开发者跨框架迁移经验。其余变体Angular、Svelte、Solid、Qwik、Web Components 等遵循各自框架的组件化方式可在template/目录下按需查看。自定义与进阶使用拿到模板后最常见的定制路径有三种改视觉效果编辑options中的particles块——更换background.color.value、粒子color、shape.type如改为square、star或图片/文字形状、调整links.distance与opacity控制连线密度改交互行为在interactivity.modes中增加更多模式或将onHover.mode改为grab、bubble等扩展能力tsparticles/particles只是基础 bundle如需更多形状、路径、插件可在项目中额外安装对应包如tsparticles/shape-emoji、tsparticles/updater-twinkle等仓库的 shapes、updaters、plugins 目录均有对应源码与文档并在loadParticles之后追加对应的loadXxx注册调用。修改后可通过npm run build用 TypeScript 编译器做类型校验tsc环节确保配置对象符合ISourceOptions类型定义再以npm run preview预览产物。小结templates/particles模板通过模板元信息 框架变体的结构把 tsParticles 最经典的基础粒子效果做成了可一键脚手架化的起点template.json统一管理依赖prebuild.js自动同步 monorepo 版本vanilla 变体沉淀出完整可复制的默认配置各框架变体则提供了组件化封装范例。无论是想要快速搭建粒子背景页还是希望学习 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点击查看免费下载相关推荐tsParticles Portfolio 模板用 create-tsparticles-app 快速搭建粒子动画简历站tsParticles Portfolio 模板用 create tsparticles app 快速搭建粒子动画简历站 本指南围绕仓库中的 template前端tsParticles React TypeScript 模板cra-template-particles-typescript使用指南一行命令创建粒子动画 React 应用tsParticles React TypeScript 模板cra template particles typescript使用指南一行命令创建粒子动前端使用 tsParticles 官方 React 模板搭建粒子效果应用cra-template-particles 从创建到定制使用 tsParticles 官方 React 模板搭建粒子效果应用cra template particles 从创建到定制 cra template pa前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考