tsParticles
~42kb gzipped (slim)Animated particle backgrounds and effects for the web.
See It in Action
Each demo loads the slim bundle and configures a different scene -- constellation, snowfall, and a live preset switcher.
The classic tsParticles effect: floating dots connected by lines, reacting to the mouse. A hero-section background you cannot build in pure CSS.
What is tsParticles?
tsParticles is a JavaScript library for rendering animated particle backgrounds and effects on the web. Drop it behind a hero section and you get constellations, snow, fireflies, or confetti out of the box -- configured through a single JSON-like options object, with full keyboard, mouse, and touch interactivity.
It is the actively-maintained successor to the original particles.js (abandoned in 2017). The slim bundle is ~42kb gzipped and covers the common cases; a modular architecture lets you shrink further by loading only the shapes and interactions you actually use. Works as a plain script tag or via npm, with ready-made wrappers for React, Vue, Svelte, Angular, and Solid.
When to Use tsParticles
How tsParticles Compares
tsParticles is the actively-maintained successor. particles.js stopped getting commits in 2017 and has known bugs on modern browsers. If you still use particles.js, migrate -- tsParticles keeps a similar config shape.
Three.js renders 3D scenes with WebGL -- particles are one tiny part of what it does, and writing a particle system from scratch means configuring geometries, materials, and shaders. tsParticles is 2D canvas and designed specifically for background particles.
For a static gradient background, pure CSS is smaller, faster, and accessible by default. Reach for tsParticles when you need motion and interactivity -- individual moving elements that respond to the cursor.
Get Started with tsParticles
npm install @tsparticles/slimyarn add @tsparticles/slim<script src="https://cdn.jsdelivr.net/npm/@tsparticles/[email protected]/tsparticles.slim.bundle.min.js"></script><!-- HTML: a container for the particles -->
<div id="particles" style="width:100%; height:100vh; background:#0a0a1a;"></div>
<script src="https://cdn.jsdelivr.net/npm/@tsparticles/[email protected]/tsparticles.slim.bundle.min.js"></script>
<script>
// loadSlim registers shapes + particle updaters. The slim bundle does
// not auto-init, so calling it before load() is required.
(async () => {
await loadSlim(tsParticles);
// Classic constellation background
await tsParticles.load({
id: "particles",
options: {
fullScreen: { enable: false },
particles: {
number: { value: 80 },
color: { value: "#ffffff" },
links: { enable: true, color: "#ffffff", distance: 150, opacity: 0.4 },
move: { enable: true, speed: 1.5 },
opacity:{ value: 0.5 },
size: { value: 3 }
},
interactivity: {
events: { onHover: { enable: true, mode: "repulse" } },
modes: { repulse: { distance: 100 } }
}
}
});
})();
</script>