Compositions
Core Primitives
Transitions
Typography
Customize
72
1
3
Installation
$ pnpm dlx shadcn@latest add @framecn/masked-slide-reveal
Usage
import { MaskedSlideReveal } from "@/components/framecn/masked-slide-reveal";<MaskedSlideReveal />API Reference
MaskedSlideReveal
| Prop | Type | Default |
|---|---|---|
text | string | "Ship to production." |
staggerDelay | number | 3 |
fontSize | number | 72 |
color | string | "#171717" |
fontWeight | number | 700 |
speed | number | 1 |
fps | number | 30 |
durationInFrames | number | 90 |
width | number | 1280 |
height | number | 720 |
className | string | - |
Notes
Uses clip-path for reveal
The masked reveal uses CSS clip-path. The mask expands horizontally to reveal the text underneath.