tsParticles is a lightweight TypeScript library for creating particles. Dependency free (*), browser ready and compatible with React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.js, Solid.js, and Web Components.
This is the core engine package that all other features depend on.
- Install
@tsparticles/engine - Initialize the engine instance in your code
- Load additional plugins/shapes/updaters as needed
- Use
tsParticles.load()to apply particle configurations
npm install @tsparticles/engineor
yarn add @tsparticles/engineor
pnpm install @tsparticles/engineimport { tsParticles } from "@tsparticles/engine";
await tsParticles.load({
id: "tsparticles",
options: {
particles: {
number: {
value: 80,
},
move: {
enable: true,
speed: 2,
},
},
},
});- Lightweight: Core engine without unnecessary dependencies
- Modular: Load only the features you need (plugins, shapes, updaters)
- Framework agnostic: Works with vanilla JS, React, Vue, Angular, Svelte, and more
- Browser ready: CDN bundles available for immediate use
- Highly customizable: Rich configuration options for particle behavior
To extend the engine with more capabilities, load additional packages:
import { tsParticles } from "@tsparticles/engine";
import { loadSlim } from "@tsparticles/slim"; // or other bundles
await loadSlim(tsParticles); // Load preset features
await tsParticles.load({
id: "tsparticles",
options: {
// Your configuration here
},
});- Loading plugins after calling
tsParticles.load(...)may not work as expected - Ensure all required peer packages are loaded before using their features
- Some shapes or updaters need their specific packages to be loaded
- Main documentation: https://particles.js.org/docs/
- Main repository: https://github.com/tsparticles/tsparticles
- Available bundles: https://github.com/tsparticles/tsparticles#bundles
- All options: https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html
