Finds where the paragraph actually wraps and lifts each visual line out of its own mask with a skew that straightens on arrival. A hairline draws above each line just before it rises.
npx shadcn@latest add https://hyperblur.dev/r/text-line-rise.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/text-line-rise.tsx.
import { TextLineRise } from "@/components/hyperblur/text-line-rise"
<TextLineRise text="We design tools for teams who ship every day and care about the details." className="text-3xl" />| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | required | Paragraph to reveal. Lines are measured from the real wrap and re-measured on resize. |
| stagger | number | 0.1 | Delay between lines in seconds. |
| duration | number | 1 | Seconds for each line to rise. |
| delay | number | 0 | Delay before the first line, in seconds. |
| rule | boolean | true | Draw a hairline above each line as it enters. |
| ruleColor | string | "rgba(255, 255, 255, 0.22)" | Color of the hairlines. |
| 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. |