tsParticles
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.
FreeUI Library19,540 impressions#46 of its week1 comment
Comments
>log in to comment- Devluc· 3y ago
Fun resource. Can definitely make web pages more entertaining. Supported. Great work and good luck with the launch
tsParticles is a JavaScript engine for creating customizable particle effects, confetti, and fireworks as animated backgrounds.
- for
- Web developers who need interactive visual effects across any front-end framework.
- pricing
- open source
- license
- MIT
Key features
- Fast onboarding — Start with a minimal setup and expand to presets, plugins, and custom shapes.
- Framework ready — Official wrappers for React, Vue, Angular, Svelte, Solid, Web Components, and vanilla JS.
- Bundle size control — Choose between @tsparticles/basic, @tsparticles/slim, tsparticles, or @tsparticles/all.
- Focused APIs — One-call modules like @tsparticles/particles, @tsparticles/confetti, @tsparticles/fireworks, and @tsparticles/ribbons.
- Playground & demos — Live playground to edit JSON and copy ready-to-use recipes for production.
- Migration tools — Guides to migrate from older tsParticles versions and from particles.js.
Use cases
- Add interactive particle backgrounds to landing pages.
- Trigger confetti explosions on user actions such as form submissions.
- Display fireworks animations for celebrations or events.
- Create custom shape particles for branding or visual storytelling.
- Integrate lightweight particle effects into single-page applications.
tsParticles vs alternatives
 tsParticles |  tsParticles Confetti |  BuouUI |  SVG Backgrounds | .png?width=64) Bootstrap | |
|---|---|---|---|---|---|
| Best for | Customizable particle animations | Confetti explosions | Simple copy-paste animations | Static SVG graphics | UI components and layout |
| Pricing | Open source | Free | Subscription | Free | Free |
| DevHunt upvotes | 16 | 13 | 10 | 9 | 20 |
| Launched | Jan 2023 | Jan 2023 | Dec 2024 | Jun 2025 | May 2024 |
- tsParticles vs tsParticles Confetti: Focused solely on confetti effects, while tsParticles covers a broader range of particle types.
- tsParticles vs BuouUI: Provides ready-to-copy animation snippets, not a full engine with framework wrappers.
- tsParticles vs SVG Backgrounds: Offers static SVG backgrounds, whereas tsParticles generates interactive, animated effects.
- tsParticles vs Bootstrap: Bootstrap is a UI component library, not a particle animation engine.
tsParticles FAQ
How do I start using tsParticles?+
Install via npm or CDN, import the desired package, and follow the Getting Started guide to render a minimal particle effect in under 5 minutes.
Which package should I choose for production?+
Select @tsparticles/basic, @tsparticles/slim, or @tsparticles/all depending on the features you need and the bundle size you want.
Can I control when heavy effects run?+
Yes, tsParticles provides explicit Start/Pause controls so you can run heavy effects only when required.
Is there support for custom shapes and presets?+
The plugins-customization guide explains how to add custom shapes, create presets, and extend the engine with plugins.
How do I migrate from particles.js?+
A dedicated migration guide outlines compatibility notes and steps to move from particles.js to tsParticles.
Summarized by DevHunt from particles.js.org · Sep 27, 2026. Details may change; check the official site.
