WOOK.Lab · 04 / 05Get in touch
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.

IMAGE — ARC-GALLERY
/ About
React Three FiberThree.jsFramer MotionTypeScript

Family trips leave a flood of photos that 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 booleans scattered across components.

02

React out of the render loop: dragging caused visible frame drops, traced to per-frame re-renders — now input writes to refs, useFrame lerps toward them, 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 360° in place.

Next experiment · WEB · PERSONAL

Wedding Invite