Confetti

Confetti animations are best used to delight your users when something special happens

Installation

CLIManual

Examples

Basic

Confetti 🎉

Random Direction

Random Confetti 🎉

Fireworks

Trigger Fireworks

Side Cannons

Trigger Side Cannons

Stars

Trigger Stars

Custom Shapes

Trigger Shapes

Emoji

Trigger Emoji

Props

Confetti

Prop Type Default Description
particleCount Integer 50 The number of confetti particles to launch
angle Number 90 The angle in degrees at which to launch confetti
spread Number 45 The spread in degrees of the confetti
startVelocity Number 45 The initial velocity of the confetti
decay Number 0.9 The rate at which confetti slows down
gravity Number 1 The gravity applied to confetti particles
drift Number 0 The horizontal drift applied to particles
flat Boolean false Whether confetti particles are flat
ticks Number 200 The number of frames confetti lasts
origin Object { x: 0.5, y: 0.5 } The origin point of the confetti
colors Array of Strings ['#26ccff', '#a25afd', '#ff5e7e', '#88ff5a', '#fcff42', '#ffa62d', '#ff36ff'] Array of color strings in HEX format
shapes Array of Strings ['square', 'circle', 'star'] Array of shapes for the confetti
zIndex Integer 100 The z-index of the confetti
disableForReducedMotion Boolean false Disables confetti for users who prefer no motion
useWorker Boolean true Use Web Worker for better performance
resize Boolean true Whether to resize the canvas
canvas HTMLCanvasElement or null null Custom canvas element to draw confetti
scalar Number 1 Scaling factor for confetti size

ConfettiButton

Prop Type Default Description
options Object {} Options for the confetti
children React.ReactNode null Children to render inside the button

Credits