A site for a fictional card issuer whose only product is the object itself. Six metal cards on a drum you can turn with a cursor or a thumb — every face drawn where you are reading it, and the whole site around them set as the paperwork that follows the object.
Open the live build ↗Next: Ember & Ash
Card companies sell an app and photograph the card. Bearer sells the card, so the card had to be a thing on the page you could turn over rather than a picture someone had already turned over for you.
Six of them hang on a drum that turns in the air above the sheet, off-axis, dropping a shadow onto the paper. The form never opens: where the object belongs it prints four registration corners and nothing else. Drag it, flick it, use the arrow keys, or pick a row in the finishes table and it turns to that one. Each card is a real box — front, back and four edges — and the edge is 0.76 mm at the same scale its 85.60 mm width is drawn at, which is why the metal you catch on the turn is three pixels and not a rounder number.
Nothing on a face is an image. The engine-turning is a rose curve plotted to a canvas at load with different parameters per card, so no two patterns repeat; the metal is three layers of CSS doing three jobs. The rest of the page is the opposite of all that on purpose — continuous-form stationery, sprocket margins, greenbar under the one table — so the only made thing in the document is the one being sold, and it is the only thing not lying flat on it.
Geometry
For six faces at a pitch p, R is p/2 over tan(π/6), and the pitch is the card plus one gap. At p equal to the card the six faces touch, which is correct and reads wrong: a closed barrel is one surface, so it looked like a chain rather than six objects.
Motion
Every turn, throw and settle is computed against elapsed seconds. A per-frame increment runs at double speed on a 120Hz phone, which is the bug you only find on the one device you did not test.
Input
Pointer drag with inertia, wheel, arrow keys on a focusable slot, and the finishes table. It snaps to the nearest face and holds it — an object you have handled should stay where you put it.
Restraint
One rAF for the whole scene, cut by an IntersectionObserver and by tab visibility. Reduced motion drops the drift and the parallax and leaves the drum draggable.
