184 Components
Mask Reveal Slide Text
TextEditorial masked typography where lines of text slide upwards out of an invisible horizontal boundary with high-precision cubic-bezier easing.
Design with intention.
Engineered with kinetic physics.
Shipped for modern developers.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/mask-reveal-slide-text.json"
Props
TypeScript props supported by <MaskRevealSlideText />.
| Prop | Type | Default | Description |
|---|---|---|---|
| lines | string[] | — | Array of lines or sentences to reveal in cascade. |
| stagger | number | 0.12 | Interval between lines in seconds. |
| delay | number | 0 | Initial delay before sequence begins (seconds). |
Key Features
- Horizontal boundary clipping using overflow-hidden container masks.
- Bespoke cubic-bezier deceleration curve [0.16, 1, 0.3, 1].
- Staggered cascade across multi-line headline statements.
- Viewport scroll intersection triggering.
Keyboard & Accessibility
- Accessible HTML layout preserve line semantics.
- Bypasses sliding translations when reduced motion is preferred.