Commit e63ad04
committed
Make the §4 finale paper spin interactive on the homepage
The final scene paper spun via a fixed CSS keyframe (tlab-spin 8s
linear infinite), which gives no speed control. Replace it with a
JS-driven angular-velocity model so the spin reacts to the pointer,
like dragging a hand across a spinning record:
- Hovering eases the resting spin up.
- Moving the pointer across the paper (no click needed) injects spin
velocity from how fast it whips around the centre — either direction,
so you can speed it up, slow it, or reverse it. It sets speed, not
angle, so a quick flick leaves it spinning fast; it then coasts back
down to the resting speed.
A useLoopSpinController hook owns a rotation MotionValue advanced each
frame by the velocity via useAnimationFrame. Because the paper renders
in the .report layer (z-index 8) that the foreground (z-index 9)
covers, it can't catch pointer events itself; a transparent
LoopPaperGrip placed in the foreground's .loop-fig slot sits exactly
over the paper and forwards events through a shared context. Respects
prefers-reduced-motion.1 parent 2d3d905 commit e63ad04
3 files changed
Lines changed: 303 additions & 165 deletions
0 commit comments