ComponentsScroll
Scroll stretch
Letters stretch tall as you scroll fast.
Flick the scroll inside the preview ↓
Installation
$ npx shadcn@latest add @textlab/scroll-stretchNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { ScrollStretch } from "@/components/textlab/scroll-stretch/scroll-stretch";
<ScrollStretch as="h2" text="Elastic" />Variants
verticalhorizontalProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "vertical" | "horizontal" | "vertical" | Pull letters tall, or smear them sideways. |
| max | number | 0.6 | Largest stretch above 1. |
| container | RefObject<HTMLElement> | – | Scrollable ancestor. Defaults to the window. |
| as | ElementType | "span" | Rendered element. |
| reducedMotion | "user" | "always" | "never" | "user" | user follows the OS setting; always shows the still version. |
| className | string | – | Merged onto the root. |
When to use it
Reach for it
- Short, heavy display words on playful pages.
- Section dividers that react to momentum.
Skip it
- Long titles; per-letter springs add up.
- Serious, text-first pages.
Accessibility and motion
Accessibility
- Letters are aria-hidden; the word is read once.
- Moves only during fast scrolling.
Motion
- Each letter has its own spring, slightly softer along the word, so the stretch ripples.
- Volume is preserved: taller letters get narrower.
Reduced motion. Still, normal letters.
Performance
- One spring per letter. Keep it to short words.