Two stacked color bars sweep across each line, cover it and pull away to uncover the text, like an editorial title card. Lines run in sequence and the text settles with a short slide.
npx shadcn@latest add https://hyperblur.dev/r/text-block-wipe.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/text-block-wipe.tsx.
import { TextBlockWipe } from "@/components/hyperblur/text-block-wipe"
<TextBlockWipe text={"Quarterly report\nFiscal year 2026"} className="text-5xl font-semibold" />| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | required | Text to reveal. Every newline starts a new line with its own bar. Screen readers get the plain string. |
| color | string | "#2f7bff" | Color of the main bar. |
| trail | string | "#7fb3ff" | Color of the thinner bar that runs just ahead of the main one. |
| direction | "left" | "right" | "left" | Side the bars enter from. |
| duration | number | 1.1 | Seconds for one bar to cover and uncover a line. |
| stagger | number | 0.14 | Delay between lines in seconds. |
| delay | number | 0 | Delay before the first line, in seconds. |
| trigger | "view" | "mount" | "view" | Start when the block scrolls into view or right after mount. |
| loop | number | 0 | When above 0, replays the reveal this many seconds after it finishes. |