Confetti

Docs

Confetti

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

Confetti

npx nyxb@latest add confetti

Examples

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

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

Contribute