Confetti
@tsparticles/confetti
tsParticles confetti bundle — easily create confetti, confetti cannon, confetti explosions, confetti falling, and confetti parade animations with presets. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact,
Animation
front-end
frontend
tsparticles
particles.js
particlesjs
particles
particle
canvas
jsparticles
xparticles
Stars
9.0k
Weekly
452k
Open issues
23
Bundle
~40 kB
Installation
npm install @tsparticles/confettiCode example
import { motion } from "@tsparticles/confetti";
export function Example() {
return (
<motion.div
initial={{ opacity: 0, y: 12 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.35 }}
>
<h2>Animated with Confetti</h2>
</motion.div>
);
}Pros & cons
Pros
- Actively maintained by Matteo Bruni
- 452k weekly downloads. Battle tested
- First-class TypeScript definitions
- MIT licensed
Considerations
- Adds roughly ~40 kB to your bundle
- Needs client-only rendering in SSR frameworks
- Not supported in React Native
- 23 open issues on GitHub