Confetti
Celebration confetti animation effect with customizable particle count, color palette, and physics settings.
Pro features
What the Pro version adds to this component.
Confetti Animation
Colorful particle effect for celebrations
Physics Engine
Realistic gravity and physics simulation
Trigger Control
Button, form, or any event triggering
Customization
Color, speed, direction, and particle control
Duration Control
Adjust animation duration and decay rate
Origin Control
Set confetti spawn point location
Preset Library
6 ready-made effects: fireworks, snow, pride, stars, school-pride & default
Installation
Install via CLI
npx @moontra/moonui-cli add confettiUsage
Click the button to trigger confetti!
Examples
Basic Confetti
Simple button-triggered confetti animation
Colorful Confetti
Custom color palette confetti
Slow Motion
Long duration confetti with low gravity
Focused Burst
Narrow spread confetti burst
Success Celebration
Green confetti for success actions
Preset Animations
Ready-made presets: 'default', 'fireworks', 'snow', 'pride', 'stars', 'school-pride'. A preset overrides the matching props (particleCount, spread, colors, etc.).
ConfettiButton Component
Pre-built button with integrated confetti. Customize the burst via the nested confettiOptions prop.