Confetti
Celebratory confetti particle animation with configurable colors, density, duration, and trigger modes for success moments
Confetti Component
Celebration overlays for success moments such as submissions, purchases, and onboarding completion.
Basic Usage
Run a default celebratory burst with minimal configuration.
Lightweight success burst
Implementation Notes
Keep setup minimal so teams can adopt the component quickly.
- - Start with default timing and particle count.
- - Keep celebratory motion brief and intentional.
- - Use this for meaningful success transitions only.
Normal Usage
Customize palette and duration for brand-aligned motion language.
Implementation Notes
This pattern maps to everyday product screens and positive completion states.
- - Match colors with your semantic success palette.
- - Keep duration proportional to user task complexity.
- - Avoid overusing confetti for low-impact interactions.
Advanced Usage
Trigger confetti on demand for workflow events and replay testing.
Milestone unlocked
Branded campaign preset
Implementation Notes
Advanced mode should compose cleanly with app state and callbacks.
- - Use controlled retriggers for QA and demo workflows.
- - Keep burst area scoped so text remains readable.
- - Integrate triggers with real completion events.
Real-Life Use Cases
Ideal for milestone moments in checkout, onboarding, and publishing.
Project created successfully
Team workspace is ready for collaboration.
Checkout completed
Implementation Notes
Show how the component fits real workflows, not isolated UI demos.
- - Connect celebrations to business-critical milestones.
- - Pair with contextual text that explains what completed.
- - Keep contrast and accessibility intact during animation.
Related Components
View allContextual messaging with severity variants, dismissal, icons, and action button integration
Backdrop overlay for modals with blur effects and click-to-close functionality
Progress indicator with determinate/indeterminate modes, labels, and variant system including gradients
Full-page status displays for success, error, and HTTP status codes (404, 403, 500) with action buttons