Scroll Studies

Scroll Studies — small motion systems, isolated and instrumented

Pinning Progress Velocity

Build receipt / live

As commonly shipped by component kits: React + Tailwind + Framer Motion.

This page: 0 dependencies, measuring lines, measuring KB served, 60fps.

Network: 1 file
Writes: 2 vars
Status: live

Perimeter math. Every beam path is normalized to 1000 units with pathLength. A 54-unit core followed by a 946-unit gap advances from 0 to -1000, so one cycle is exactly one rounded-rectangle perimeter.

One-frame write. Pointer and touch events only record the latest coordinates. One scheduled animation frame converts that point against a cached card rectangle, then writes --spot-x and --spot-y together. No layout read follows those writes.