Skip to content

Commit e63ad04

Browse files
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

File tree

0 commit comments

Comments
 (0)