Scroll-driven · 1.4
Scroll-velocity-reactive motion
Wind resistance. The faster you move, the more the world leans.
How fast you scroll, treated as a continuous input signal, not just where you are.
4 knobs
How it actually works
Scroll position tells you where the reader is. Scroll velocity tells you how they feel. Someone flinging the page past a section and someone inching through it are at the same offset for one frame, and they are not doing the same thing. Velocity is the only input on this page that knows the difference.
Frame-to-frame scroll delta, lerp-smoothed, clamped to a safe range, thresholded back to zero at rest. That one smoothed scalar is then piped into everything: a skew, a scale, a brightness. Codrops drives brightness, plane tilt and scale pulse off a single velocity value. The math is easy. The tuning is the work.
The knobs, named
Damping, clamp ceiling, rest threshold, output gain. Four numbers, and only the first one really matters: damping decides whether the lean snaps back the instant you stop, or coasts.
| Knob | Source | What it teaches |
|---|---|---|
| Damping | sourced | How fast the velocity signal decays back to zero. Low = a long coast; high = snaps to rest. |
| Clamp ceiling | sourced | The cap. Without it a trackpad fling sends the skew to absurd values. |
| Rest threshold | sourced | Below this the signal is forced to exactly zero, so the page truly settles instead of drifting. |
| Output gain | sourced | How much of the signal reaches the output. The same velocity, dialled from subtle to ridiculous. |
sourced means the source names this parameter. ours means the source names none and the knob is our design against the mechanism. No knob here is invented and passed off as sourced.
Evidence
VERIFIED (author)
Codrops "Scroll-Reactive 3D Gallery with Three.js, Velocity, and Mood-Based Backgrounds"; Codrops "Reactive Depth: 3D Image Tube" (inertia).
- Seen on
- Codrops scroll-reactive 3D gallery; widely copied as "skew on scroll".
- Dependencies
- vanilla (one scalar)
- Difficulty
- moderate
- Performance
- Cheap: one scalar per frame.
- Accessibility and the floor
- Velocity-driven motion is exactly what triggers vestibular discomfort, and the sources are silent on it. A prime reduced-motion candidate: under reduced motion we drive the signal to zero and the panels sit square.
Notes
Composability. This is a signal, not a look. Feed it into the marquee (7.3) for a tape being yanked, or into any warp uniform.