← This site: the remake
Iteration 08[Card Composition]iterating

Cards as labels on a sheet.

Third piece of Iteration 05. Each card now sits at a slight angle — like labels peeled from a sheet, not precision-aligned UI tiles.

Hypothesis

A grid of perfectly-aligned cards reads as software. A sheet of factory-printed labels reads as something physical someone has placed on the page. The brand is the second one.

v0.2 (April 2026): first pass got the metaphor wrong. I rotated each card individually, as if every label had been peeled off and re-stuck. The right reading (per a clarifying photo) is the opposite — the labels are still on a single sheet of stock. So v0.2 wraps each card grid in a .label-sheet container with a warm cream backing, slight overall rotation, and a soft shadow placing it on the page. Cards inside the sheet are flat (no per-card rotation) and brighter — they read as printed labels still attached to the stock.

Try it

Visit the plaza. The five doors sit on a single sheet of label stock — warm cream backing visible as a margin around the labels, a slight tilt of the whole sheet on the page. The labels themselves are aligned to the sheet's grid (factory-printed, not peeled). Or look at this room's iteration index — same effect, the iteration cards are labels on a stock sheet.

How it works

Five rotation values cycled via :nth-child(5n + N) on the existing .paper-card class. The rotation lives on a CSS custom property (--base-rotation) so the hover transform can preserve it while adding lift. On hover, the card relaxes to ~60% of its base rotation — closer to upright, as if someone's just touched it to read it more easily.

No JavaScript. No JSX changes. Any future grid of paper-cards inherits the labelling automatically — five cards, ten, twenty.

Open questions

  • Is ±1.2° the right amount? Subtle enough to read as natural tilt, visible enough to break the grid feel. Could go gentler (±0.6°) or stronger (±2°).
  • On mobile (single column), the rotation reads slightly differently — each card sits alone rather than in a grid chord. Probably fine, possibly worth a smaller value at narrow widths.
  • Should some cards look "peeled" (rotated more, slightly offset) while others stay flat (still attached to the stock)? Would need per-card opt-in.
  • The grid of cards still sits on the same paper as everything else. Iteration 05 also calls for a separate label-stock sheet behind the grid — a faint rectangular paper outline wrapping the cards. Future polish.

Conclusion

Pending.

Iteration 08 · April 2026 · sub-iteration of 05