Scroll Velocity Skew

ScrollVanilla JS · zero dependenciesVelocity = scroll delta per frame

scroll fast, then stop ↓

-- fps

prefers-reduced-motion detected — content scrolls without leaning

X-ray · layers

Leanskew follows scroll speed

Spring backwobbles upright when you stop

Stretchfast scroll also elongates

Parameters

Max lean10°

Sensitivity0.35

Damping0.82

Stretch amount0.06

your version · updates as you tinker

How this effect works

Scroll position is boring; scroll velocity is where the personality lives. Velocity is just this frame's scrollTop minus last frame's. Feed it into a skew — skewY(velocity × sensitivity), clamped to the max lean — and the content leans into your gesture like passengers when a train brakes. Fast flick, hard lean; gentle read, barely a tilt. The page starts answering not where you are but how you move.

The raw velocity signal is spiky (wheels click, fingers stutter), so it runs through the same spring we use everywhere: velocity pulls the lean, damping bleeds it away. When you stop, the input drops to zero and the spring carries the lean back through upright with a wobble or two — the spring back layer. Stretch spends the same signal on scaleY, a whiff of motion blur without any blur.

Production notes: prefers-reduced-motion: no lean, no stretch · one transform on the list per frame · clamp the lean — beyond ~25° it reads as broken, not fast · the copied snippet is self-contained with its own demo scroll box.