A repeating text strip that drifts on its own and speeds up, slows down or reverses with the page scroll velocity.
npx shadcn@latest add https://hyperblur.dev/r/scroll-velocity-text.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/scroll-velocity-text.tsx.
import { ScrollVelocityText } from "@/components/hyperblur/scroll-velocity-text"
<ScrollVelocityText text="KEEP SCROLLING" baseSpeed={40} velocityFactor={1.5} />| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | required | Text to repeat. It is duplicated enough times to cover the container. |
| baseSpeed | number | 40 | Idle drift speed in pixels per second. |
| velocityFactor | number | 1.5 | How strongly page scroll speed adds to the drift. Scrolling up reverses the strip. |
| direction | 1 | -1 | 1 | 1 drifts left, -1 drifts right. |
| gap | number | 48 | Space between repeats in pixels. |