better-react-confetti: Lightweight Confetti for React

Confetti is one of those details that can make a product moment feel finished: a successful import, a completed onboarding step, a streak milestone, a launch day button. The problem is that celebration effects often bring more surface area than the moment deserves.

better-react-confetti keeps the API intentionally small. It renders a canvas inside a normal React component, accepts practical props like total, colors, gravity, wind, speed, and recycle, and lets you pass built-in shape components when you want a more controlled visual system.

That makes it a good fit for apps that want a quick celebratory effect without adding a large animation stack or designing a canvas engine from scratch.

The demo below uses the package directly and shows profiling results from the same workload: 700 particles for 12 seconds in isolated Playwright sessions at a 1440x900 viewport.

The package exports a default Confetti component plus Rectangle, Circle, and Triangle shape helpers. You can let it randomize shapes from a colors array, or pass your own ordered shape list through the Component prop for a more branded result.

The performance comparison is against @tholman/confetti. In the profiler run, better-react-confetti reduced total DOM nodes from 2,123 to 24, lowered JS heap use from 5.44 MB to 2.27 MB, and dropped React render time from 23.5ms to 2ms. The key architectural difference is that better-react-confetti keeps particle state in typed arrays and paints to one canvas instead of asking React and the DOM to manage every particle.

The current npm release is 0.1.0, supports React and React DOM from 18.3 through 19, and has no runtime dependencies. Install it with pnpm add better-react-confetti, npm install better-react-confetti, or yarn add better-react-confetti.

I would use better-react-confetti for contained product moments: a completed setup checklist, a successful share, a paid invoice, a shipped deploy, or any state transition where the user deserves a little feedback without the interface becoming noisy.

Because the component is canvas-based and pointer-events are disabled by default, it can sit on top of existing UI without blocking controls. The main engineering habit is to keep the confetti container bounded and intentional. Full-page confetti is fun once; scoped confetti is easier to keep tasteful.

better-react-confetti is a practical React package for adding lightweight celebration effects without much integration cost.