Confetti Burst
NewPro
A wrapper that fires canvas confetti from the clicked element, with gravity, drag, spin and fade, or from code through a ref.
Customize
110
100°
1700
650
Shape
When to use it
- Order confirmed, payment received or plan upgraded screens
- A finished level, a streak or a new high score in a game or course
- Firing from code when a slow job succeeds, such as a published build
Good to know
- Plan
- Pro
- Dependencies
- None beyond React
- Rendering
- 2D canvas
- Reduced motion
- Respected
- Lines of code
- 303
Installation
Confetti Burst is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy confetti-burst.tsx into components/ui.
Usage
import { ConfettiBurst, type ConfettiBurstHandle } from "@/components/ui/confetti-burst";
const confetti = useRef<ConfettiBurstHandle>(null);
<ConfettiBurst ref={confetti} className="inline-block">
<button type="button">Place order</button>
</ConfettiBurst>
// It fires on click. To fire from code, for instance once a request succeeds:
confetti.current?.fire();Props
12 properties| Property | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Content that fires when clicked. |
| count | number | 110 | Pieces in each burst. |
| spread | number | 100 | Width of the cone the pieces leave in, in degrees. |
| power | number | 1700 | Launch speed, in pixels per second. |
| gravity | number | 650 | Downward pull, in pixels per second squared. |
| drag | number | 3.2 | Air resistance. Higher values stop the pieces sooner and make them fall slower. |
| duration | number | 3 | Seconds a piece lives, including its fade. |
| shape | "mixed" | "rect" | "circle" | "ribbon" | "mixed" | Shape of the pieces. |
| colors | string[] | ember, gold, bone | Colors the pieces pick from. |
| fireOnClick | boolean | true | Fire on every click inside the wrapper. Turn off to fire only from code. |
| ref | Ref<ConfettiBurstHandle> | — | fire({ x, y, element, count }) fires a burst from code. |
| className | string | — | Extra classes for the wrapper. |