Scroll-velocity skew
Elements lean or stretch more when you scroll faster, then relax back to normal when scrolling stops.
See it
What it is
Scroll-velocity skew turns scroll speed into deformation. Slow scrolling leaves elements nearly square; a fast flick makes them lean or stretch, then they settle as velocity returns to zero. The input is the change in scroll position divided by elapsed time, usually smoothed before it reaches a CSS transform.
Reach for it on image rails, poster lists, and expressive editorial pages where inertial movement is part of the visual identity. It reads as house style on agency portfolios that already run a smooth-scroll layer such as Lenis or Locomotive Scroll. Skew suggests drag, while a small scaleY change suggests speed. Clamp the result and ease it back to neutral so trackpad spikes never become wild geometry.
Gotcha: raw scroll events are noisy and devices report them differently. Sample position once per requestAnimationFrame, smooth the velocity, and transform a visual child instead of the scroll container. Large skew hurts readability and can cause motion sickness, so keep text stable and disable the effect under prefers-reduced-motion.
Ask AI for it
Add scroll-velocity skew with Motion for React. Read scrollY from useScroll, derive speed with useVelocity, smooth it with useSpring, and map the result through useTransform to a clamped skewY range of -4deg to 4deg and a scaleY range of 0.98 to 1.02. Apply the transform only to image wrappers, let it spring back to zero at rest, and return neutral transforms when prefers-reduced-motion is active.