Kinetic Type Scroll

Editorial kinetic typography driven by scroll — words scale, track and shift weight as the section scrolls, so the phrase breathes.

Installation

npx smoothui-cli add kinetic-type-scroll

Features

• Each word maps its own slice of scroll progress to a scale, lift, opacity, tracking (letter-spacing) and weight curve
• Windows overlap and the wave is centred in the range with head- and tail-room, so the crest travels through the phrase while it is parked in view rather than as it leaves
• Curves are smoothed with useSpring so the phrase reads as a continuous wave rather than a snap
• Configurable scaleRange, liftRange, dimRange, trackingRange, weightRange, stagger, and Motion offset (defaults to ["start 0.9", "end 0.45"])
• Must be driven by a scrollable container, passed via the container ref — give that container position: relative so Motion can resolve the target's offsets against it
• Respects prefers-reduced-motion by rendering the phrase statically at its peak weight

Accessibility

ARIA Attributes

Screen Reader

• The wrapper carries aria-label={words.join(" ")}, announcing the full phrase as one string.
• Each word span underneath is aria-hidden, so the scroll-driven fragments are never read individually.
• The text remains selectable in the DOM at all times.

Reduced Motion

Respects the prefers-reduced-motion media query via useReducedMotion from Motion. When reduced motion is preferred, every word renders statically at the top of weightRange with no scale, no lift and no dimming — the phrase simply reads at full strength, with no scroll listeners and no springs.

Props