Thin lines draw across one after another, and the title and placeholder bars beneath each line wipe in behind it as loading completes.
Report / Retention
npx shadcn@latest add https://hyperblur.dev/r/loader-line-reveal.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/loader-line-reveal.tsx.
import { LoaderLineReveal } from "@/components/hyperblur/loader-line-reveal"
<LoaderLineReveal title="Q3 Retention Review" rows={3} value={55} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Untitled" | Headline revealed by the first line. |
| rows | number | 3 | Number of placeholder bars under the title. |
| value | number | Progress from 0 to 100. Leave it out to run a looping demo animation. | |
| duration | number | 4.2 | Seconds for one cycle in the looping mode. |
| color | string | "#2f7bff" | Color of the drawing lines. |