ConfettiPro
Fire a confetti burst from any point, or use the button that bursts from itself.
Turned off automatically for people who prefer reduced motion.
When to use
- Celebrating real milestones: first project, payment, launch, streaks.
When not to use
- Routine actions: it loses meaning fast.
Installation
Usage
Import it from @/components/ui/confetti after installing.
example.tsx
import { confetti, ConfettiButton } from "@/components/ui/confetti";
<ConfettiButton onClick={publish}>Publish</ConfettiButton>
// Anywhere, e.g. after a successful payment
confetti({ x: window.innerWidth / 2, y: 200, count: 160 });API reference
confetti
Fires a burst on a temporary full-screen canvas that removes itself when done.
| Prop | Type | Default | Description |
|---|---|---|---|
| x / y | number | screen center | Origin in viewport pixels. |
| count | number | 120 | Pieces. |
| angle / spread | number | -90 / 70 | Direction and fan in degrees (-90 is up). |
| velocity | number | 14 | Starting speed. |
| colors | string[] | – | Piece colors. |
ConfettiButton
A button that bursts from its own center, then calls your onClick. Accepts button attributes plus options.
| Prop | Type | Default | Description |
|---|---|---|---|
| options | ConfettiOptions | – | Passed to confetti(). |
Keyboard interactions
| Keys | Action |
|---|---|
| EnterorSpace | Press the button |
Accessibility
- The canvas is aria-hidden and ignores the pointer.
- Does nothing when the person prefers reduced motion.
Motion
- Pieces tumble with gravity and drag, then fade as they fall.
Responsive behavior
- Covers the viewport at device pixel ratio up to 2.
Performance
- Plain canvas with one animation frame loop; no dependencies; cleaned up automatically.
Notes for AI
- Call confetti() only from user actions or real successes, not on page load.
This page as Markdown, for assistants and coding agents:
/components/confetti/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt