Lines of text whose letters float up into place in a wave as the element scrolls into view. Progress follows the scroll position.
npx shadcn@latest add https://hyperblur.dev/r/text-scroll-float.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/text-scroll-float.tsx.
import { TextScrollFloat } from "@/components/hyperblur/text-scroll-float"
<TextScrollFloat lines={["Rise with", "the scroll."]} className="text-5xl font-bold" />| Prop | Type | Default | Description |
|---|---|---|---|
| lines | string[] | ["Rise with", "the scroll."] | One entry per line. Each line stays on its own line. |
| distance | number | 0.9 | How far below its final spot each letter starts, in em. |
| spread | number | 0.7 | Wave offset between the first and last letter, from 0 (all together) to 1 (one after another). |
| start | number | 0.9 | Viewport fraction, measured from the top, where the element's top edge sits when progress is 0. |
| end | number | 0.6 | 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 element scrubs it. |
| loopDuration | number | 6 | Seconds one loop cycle takes when `loop` is on. |