Captions
Compositions
Core Primitives
Transitions
Typography
- Blur Reveal
- Staggered Fade Up
- Masked Slide Reveal
- Tracking In
- Inline Highlight
- Marker Highlight
- Shimmer Sweep
- Typewriter
- Text Fade Replace
- Slot Machine Roll
- Infinite Marquee
- Perspective Marquee
- Matrix Decode
- RGB Glitch Text
- Strikethrough Replace
- Blur Out Up
- Bottom Up Letters
- Top Down Letters
- Per Character Rise
- Soft Blur In
- Micro Scale Fade
- Scale Down Fade
- Focus Blur Resolve
- Spring Scale In
- Line by Line Slide
- Mask Reveal Up
- Short Slide Right
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.