Compositions
Core Primitives
Transitions
Typography
Customize
60
0.4
1
12
Installation
$ pnpm dlx shadcn@latest add @framecn/success-confetti
Usage
import { SuccessConfetti } from "@/components/framecn/success-confetti";<SuccessConfetti />API Reference
SuccessConfetti
| Prop | Type | Default |
|---|---|---|
count | number | 60 |
colors | string[] | ["#ff5e3a", "#22c55e", "#0ea5e9", "#facc15", "#a855f7"] |
originX | number | 0.5 |
originY | number | 0.5 |
gravity | number | 0.4 |
velocity | number | 12 |
text | string | "Merged!" |
textColor | string | "#171717" |
background | string | "#fafafa" |
seed | string | "framecn" |
speed | number | 1 |
fps | number | 30 |
durationInFrames | number | 90 |
className | string | - |
Notes
Deterministic particle physics
The confetti uses deterministic physics with seeded random values. Same inputs always produce the same particle patterns.
Performance scales with particle count
Higher particle counts may impact performance. Keep particleCount under 100 for smooth animations.