tsParticles Confetti
Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website
FreeUI LibraryOpen Source15,709 impressions#51 of its week2 comments
tsParticles Confetti lets you add highly customizable JavaScript particle, confetti, fireworks and animated background effects to websites.
- for
- Front-end developers who need animated visual effects for web pages
- license
- MIT
Key features
- Script-only usage — Include a single CDN script to add confetti effects to plain HTML/JS pages.
- Framework components — Ready-to-use components are provided for React, Vue, Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.
- Preset effect modes — Built-in examples like Basic Cannon, Random Direction, Realistic Look, Valentine hearts, Stars, Emoji/Unicorns and Image shapes.
- Full visual customization — Control particle count, spread, velocity, decay, colors, shapes and custom images via options.
- Multiple shape support — Supports circles, squares, stars, hearts, emojis and custom image shapes.
- Live demo playground — Interactive code snippets let you experiment with different configurations instantly.
Use cases
- Add a celebratory confetti burst after a form submission
- Create a fireworks animation for holiday promotions
- Display themed heart or star confetti for Valentine’s Day or events
- Use custom image confetti to showcase product logos
- Integrate animated background effects into single-page applications
tsParticles Confetti FAQ
How do I add confetti to a plain HTML page?+
Add the CDN script tag `<script src="https://cdn.jsdelivr.net/npm/@tsparticles/confetti@4.4.0/tsparticles.confetti.bundle.min.js"></script>` and call the `confetti()` function with your options.
Is there a component for React?+
Yes, tsParticles provides ready-made React components that wrap the confetti functionality.
What shapes can I use for the particles?+
Supported shapes include circles, squares, stars, hearts, emojis and custom images.
Can I customize the number and spread of particles?+
All visual parameters—particleCount, spread, startVelocity, decay, colors, etc.—are configurable via the options object.
Are there preset configurations for special events?+
The library includes examples for basic cannon, random direction, realistic look, Valentine hearts, stars, emoji/unicorns and image-based confetti.
Summarized by DevHunt from confetti.js.org · Sep 27, 2026. Details may change; check the official site.
.png?width=64)
