← This site: the remake
Iteration 09[Spatial / Motion]iterating

The page on a slight tilt.

Fourth piece of Iteration 05. As you scroll, content rises from below tilted toward you, settles flat in the middle of the viewport, then tilts back as it exits at the top — recession into the screen.

Hypothesis

A flat scroll reads as a flat document. A scroll where elements actually move through space — toward you on entry, away from you on exit — reads as a desk you're looking down at. The tilt is small but constant; the cumulative effect over a long scroll is a sense of moving through depth, not over a billboard.

Try it

Scroll this page slowly. Each headline and each label-sheet rises from below at ~14° forward tilt, sits flat in the middle band of the viewport, then rotates ~16° away as it leaves the top. The plaza and longer iteration pages show the effect most clearly.

Try the plaza — the label-stock sheet of doors tips up as you scroll into it. Or scroll Iteration 04 end-to-end to feel the headlines moving through depth.

How it works

Modern CSS scroll-driven animations: animation-timeline: view()hooks the keyframes to the element's position in the viewport rather than to time. A viewport-level perspective: 1800px on body makes the rotations read as actual 3D tilt rather than flat skew. Wrapped in @supports (animation-timeline: view()) so older browsers (older Safari mostly) just see flat scrolling rather than broken animations.

prefers-reduced-motion: reducekills the animation entirely. The page reads flat for visitors who've asked the system not to move things.

Open questions

  • Is ±15° the right amount? Stronger than the brainstorm's "barely-perceptible" — done deliberately because the user asked for it. Could go further (±20°) or pull back (±10°).
  • Right now headlines and label-sheets animate. Cards inside a label-sheet ride the sheet's tilt. Should standalone paragraphs also animate? They probably shouldn't — too many tilting elements would read as a kinetic-typography experiment, not a page on a desk.
  • Mobile: scroll-driven animations work, but tilting on a small viewport can feel more dramatic. May need a smaller angle below sm breakpoints.
  • Combined with the desk lamp (06) and worn-grid zones (07): the tilt makes the lamp's falloff feel directional, and the worn patches catch the perspective as they pass through the viewport. Worth observing on a long scroll.

Conclusion

Pending.

Iteration 09 · April 2026 · sub-iteration of 05