Scroll Velocity Text
A direction-aware kinetic typography component that smoothly expands letter-spacing and scale on downward scroll, and winds back on upward scroll, with zero per-frame React re-renders.
Installation
Add the component directly to your repository using shadcn CLI:
npx shadcn@latest add Surajmaurya1/easyui/scrollvelocitytext
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | The text string to render as a single accessible text node |
| as | keyof JSX.IntrinsicElements | 'span' | HTML tag to render as (e.g. "h1", "h2", "span", "p", "div") |
| expandDistance | number | 500 | Net scroll distance in pixels needed to progress from resting size to fully expanded and faded out |
| intensity | number | 1 | Multiplier on how much each scrolled pixel contributes to expansion progress |
| minLetterSpacing | number | 0 | Letter-spacing in em units at rest (zero scroll progress) |
| maxLetterSpacing | number | 1 | Letter-spacing in em units at full scroll expansion |
| maxScale | number | 1.6 | Scale multiplier at full scroll expansion (1 = no scale change) |
| fadeStart | number | 0.4 | Progress fraction (0–1) at which the text begins fading out (>= 1 disables fading) |
| smoothingMs | number | 400 | Duration in milliseconds of the CSS easing transition between scroll updates |
| transformOrigin | string | 'center center' | CSS transform origin for expansion and scaling (e.g. "left center" for left-aligned headlines) |
| scrollContainerRef | RefObject<HTMLElement | null> | — | Optional ref to a custom scrollable container instead of the window viewport |
| className | string | — | Additional CSS classes for font size, weight, color, and positioning |