3D · R3FInterface Experiment
Photo cards wrap onto a 3D ring around the camera. Scroll to zoom, move to rotate, click to fan out an album.
/ About
React Three FiberThree.jsFramer MotionTypeScript
Family photos end up in a flat grid no one revisits. I wanted browsing to feel like standing inside the album, so the photos curve into a ring around the camera.
What it explores
01
One source of truth: INIT → DETAIL → CLICKED in a single stepRef, not scattered booleans.
02
React out of the render loop: frame drops traced to per-frame re-renders. Input writes to refs, useFrame lerps, React never runs in the loop.
03
Zero media queries: card size and ring radius derived from the camera frustum, recomputed on resize.
04
Hover in 3D, not the DOM: raycast onto a plane, distance falloff, nearby cards spin in place.