KILN.
← All work
◆ 1285°CTier 01 · SignatureFintech · Card issuer

Bearer.

A 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.

Role
Design + build
Type
Fintech · Card issuer
Stack
CSS 3D · Canvas · Vanilla
Status
Concept build
The idea

If the object is the product, the object has to be present.

Real CSS 3D · six faces, and an edge 0.76 mm to scale

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.

What went into it
Geometry

The radius is derived

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

Delta-timed, not per-frame

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

Four ways to turn it

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

It stops when nobody is looking

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.

Light the kiln

Got an object worth turning?

Tell me what you make. I'll come back with whether it's a Tier 01 or Tier 02 job, a timeline, and a fixed quote.

hello@studiokiln.space
  • Tell meWhat you're building, roughly when you need it, and a link or two you like.
  • You'll hear backWithin 48 hours, from me. There's nobody else here to route it through.
  • You'll getA tier recommendation, a timeline, and a fixed quote. No hourly billing.