Lines or words slide up out of an invisible mask with a stagger when the block scrolls into view.
npx shadcn@latest add https://hyperblur.dev/r/text-mask-reveal.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/text-mask-reveal.tsx.
import { TextMaskReveal } from "@/components/hyperblur/text-mask-reveal"
<TextMaskReveal text={"Slow design,\nfor fast teams."} className="font-serif text-4xl" />| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | required | Text to render. In lines mode every newline starts a new masked line. |
| by | "lines" | "words" | "lines" | Reveal whole lines split on newlines, or single words that wrap naturally. |
| stagger | number | 0.12 | Delay between pieces in seconds. |
| duration | number | 0.95 | Duration of each slide in seconds. |
| delay | number | 0 | Delay before the first piece moves, in seconds. |
| tilt | number | 4 | Rotation in degrees each piece starts with. |
| once | boolean | true | Play only the first time the block enters the viewport. |
| loop | number | 0 | When above 0, replays the reveal this many seconds after it finishes. |