A paragraph that fills with color word by word, left to right, as it scrolls through the viewport.
Interfaces should feel like paper: quiet, tactile and a little bit alive.
npx shadcn@latest add https://hyperblur.dev/r/text-fill-scroll.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/text-fill-scroll.tsx.
import { TextFillScroll } from "@/components/hyperblur/text-fill-scroll"
<TextFillScroll text="Interfaces should feel like paper." className="font-serif text-3xl" />| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | required | Paragraph to fill. |
| fillColor | string | "#ededed" | Color of the filled part. |
| baseColor | string | "#3b3b3b" | Color of the part that is not filled yet. |
| startAt | number | 0.85 | Viewport height fraction, measured from the top, where the top of the block starts filling. |
| endAt | number | 0.4 | Viewport height fraction where the bottom of the block is fully filled. |
| idleLoop | boolean | false | Fill on a timer while the page is not scrolling, and hand control back to scroll as soon as it moves. |
| idleDuration | number | 5 | Seconds one idle fill takes. |
| resumeDelay | number | 1.6 | Seconds after the last scroll before the idle loop takes over again. |