A paragraph that wakes up word by word, from dim and blurred to bright and sharp, as it scrolls through the viewport.
Every great product starts as a quiet idea, then the small details catch the light one word at a time.
npx shadcn@latest add https://hyperblur.dev/r/text-scroll-words.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/text-scroll-words.tsx.
import { TextScrollWords } from "@/components/hyperblur/text-scroll-words"
<TextScrollWords text="Every great product starts as a quiet idea." className="text-3xl" />| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | required | Paragraph to render. Screen readers get the plain string. |
| minOpacity | number | 0.16 | Opacity of a word before it lights up. |
| maxBlur | number | 5 | Blur radius in pixels of a word before it lights up. 0 disables blur. |
| start | number | 0.9 | Viewport fraction, measured from the top, where the element's top edge sits when progress is 0. |
| end | number | 0.5 | Viewport fraction, measured from the top, where the element's bottom edge sits when progress reaches 1. |
| loop | boolean | false | Drive the animation with a built-in loop instead of the scroll. Moving the pointer across the paragraph scrubs it. |
| loopDuration | number | 7 | Seconds one loop cycle takes when `loop` is on. |