ComponentsScroll
Scroll skew
Type leans with the speed of your scroll.
Scroll fast inside the preview ↓
Keep scrolling
Feel the lean
Then let go
Installation
$ npx shadcn@latest add @textlab/scroll-skewNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { ScrollSkew } from "@/components/textlab/scroll-skew/scroll-skew";
<ScrollSkew as="h2" text="Keep scrolling" />Variants
skewstretchProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "skew" | "stretch" | "skew" | Lean with scroll speed, or squash and stretch. |
| max | number | 12 (skew), 0.35 (stretch) | Largest lean in degrees, or 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
- Big section titles on long, energetic pages.
- Portfolios with a lot of momentum.
Skip it
- Reading-heavy pages; motion during scroll can distract.
- Small text.
Accessibility and motion
Accessibility
- The text is never split; it reads normally.
- Motion only happens while the user is scrolling.
Motion
- Velocity passes through a spring, so the lean rises and settles smoothly.
- Stretch preserves area, narrowing as it grows taller.
Reduced motion. Upright, still text.
Performance
- Transform only, driven by motion values; no React renders on scroll.