Tuning a spiral, one snapshot at a time
Before building the portfolio, we built a one-card study and a spiral study, and saved a snapshot before every big change. Nine snapshots later, we dropped the rule we'd worked hardest to keep.
- Project
- Card and spiral studies
- Year
- 2026
- What we did
- Interaction and motion design
- Built with
- WebGL2, headless browser checks
Motion is hard to judge from a description. So before building the portfolio, we built two small studies on a plain light page, and every time we were about to change something fundamental, we saved the working version first. The spiral study ended with nine of those snapshots, and they tell the story better than our notes do.
One card first
The first study was a single card with three sliders: glass depth, refraction and colour separation. It ran in one shader pass, capped the pixel ratio at 2, and stopped animating once the card's spring settled, so a study left open in a tab used no power.
The values we approved there, depth 67, refraction 47 and separation 75, went into the spiral unchanged. Settling the material on one card first meant the spiral could be judged on motion alone.
From snapping to drifting
The first spiral had seven cards on a vertical helix, and choosing one made it spring into place. It felt like a carousel. Studying how the reference moved showed us something different: wheel input added small impulses to a velocity, which eased in and decayed a little every frame, so the spiral never snapped anywhere. We replaced the selection spring with a continuous drift at 0.108 cards a second.
Flat cards cross each other
Flat rectangles on a curve intersect where they overlap, and the edges cut visibly through each other. The fix was to bend each card into a strip of a cylinder, built from a 40 by 20 grid of 1,600 triangles. The same grid is used to draw the card and to work out which card is under the pointer, so what you see and what you click always agree.
Finding the frame
Most of the snapshots are about proportion: how tall the cards are, how far the camera sits, how steeply the spiral climbs. Along the way we tried taller cards, an elliptical orbit, then the reference's proportions: a 35° field of view, a camera four radii from the axis and 13 positions on the helix. The final version is modelled on a public demo of a spiral slider, with 5:3 cards, a constant gap between them and a wider field of view on small screens.
Letting go of a rule
For most of the rounds, the study enforced one requirement above all others: every card had to stay fully on screen. We built a 16-pixel clearance, a solver that pushed cards inward at the edges of the screen, and checks for every corner.
The final version drops all of it. The ends of the spiral are now allowed to run past the edge of the window instead of being folded back in to keep every card on screen. Without the solver bending the path at the edges, the spiral keeps one shape all the way along, and it reads as continuing beyond the frame.
Checked by scripts
Each snapshot was checked by small scripts that open the study in a headless browser at desktop and phone sizes and measure what actually happened:
- whether the cards move at the intended speed and respond to wheel, drag and keys
- whether curved surfaces ever cross, across 21 to 28 combinations of layout and travel
- how much of the depth blur reaches each card, read back from the GPU
Those checks prove the geometry, not the speed. A check in a desktop browser at phone size is not a measurement of a real phone, and we wrote that down next to every result so we wouldn't forget it.
What happened to the study
The spiral study was never the shipped portfolio. The final build was written separately, and the study went back to being a reference. That's what we'd recommend for any motion-heavy piece: tune it somewhere quiet, keep every version, and only then build the real thing.
