Confetti Effect Generator - Confetti Animation for Websites
Confetti Effect Generatorcreates customizable confetti animation for websites - configure colors, shapes, number of particles and physics. Generate ready-made HTML/JavaScript code to paste or download the confetti library.
Applications of confetti animation
The confetti effect is a celebration of success - used in: thank you pages after registration or purchase (thank you page), after completing a course or quiz, when achieving a set goal (gamification of the application), in notifications about winning a prize, during live broadcasts (streams, webinars), on birthday or holiday event pages. Psychologically - confetti releases endorphins and is associated with success, which enhances the user's positive experience with the product (UX delight).
JavaScript libraries for confetti
canvas-confetti(most popular) - npm:npm install canvas-confettior CDN. Uses Canvas API, lightweight (30 KB), actively developed. API:confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } });. party.js- celebration, confetti, sparkles effects. TypeScript support.JSConfetti- Minimalist, supports emoji as confetti.Fireworks-js- If you need fireworks instead of confetti. The generator allows you to configure parameters and generate code for canvas-confetti - the most popular and compatible solution.
Confetti configuration parameters
Key canvas-confetti parameters:particleCount- number of particles (default 50, effective 200+),spread- scattering angle in degrees (default 70°),startVelocity- starting velocity,decay- velocity decay (0-1, default 0.9),gravity- gravity (1 = normal, 0 = none),ticks- animation time in frames,colors- hex color array,shapes- shapes: "square", "circle", "star".origin- starting point {x: 0–1, y: 0–1}. The generator creates code with your configuration.
Advanced Setup - Special Effects
Several Special Effects:Confetti Canons- Left and Right Sequential Fires:confetti({...origin: {x: 0}}); and confetti({...origin: {x: 1}});with timout.Confetti rain- continuous rain from the top of the page for 3 seconds (requestAnimationFrame loop).Confetti emoji- JSConfetti:jsConfetti.addConfetti({ emojis: ['🎉', '🥳', '🎊', '⭐'] });. Central Explosion- A single burst from the center with a large number of particles.
FAQ
How do I trigger confetti when I click a button?
and JS:function startConfetti() { confetti({ particleCount: 200, spread: 80, origin: { y: 0.6 } }); }. Remember to load the library:. The generator creates a complete working HTML+JS snippet.
How to adapt confetti colors to the brand palette?
confetti({ colors: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8'] });. You provide the colors as a hex array. For a brand gradient, use several shades of the main color. You can also use emoji as confetti in JSConfetti which gives you any "colors" by selecting the emoji. The generator has a color picker for visual palette selection.
Does the confetti effect negatively impact page performance?
Canvas-confetti is optimized and should not significantly impact performance. Tips: limit the particleCount (200 is the maximum for smooth animation on weaker devices), use tic
Install Webp.pl
Have the tools in your own pocket!
