What if a screen could feel like a place?

In 1960, Kevin Lynch asked how people find their way through a city. His answer changed how I think about every screen we build. Walk through his five elements — not by reading about them, but by navigating them.

In 1995, two researchers hung a string from the ceiling and wired it to the Ethernet. It changed how I think about notifications, dashboards, and attention. I'll show you what noise feels like — then what calm feels like. Same information. Completely different relationship with your mind.

What if depth wasn't about showing more, but showing differently? I'll give you the same idea twice — first all at once, then one layer at a time. Each layer adds a new dimension of understanding. The room changes with you.

Csikszentmihalyi discovered that deep engagement happens when challenge matches skill. You'll play a pattern game that adapts to you in real time — and watch the room change as the system tries to keep you in the channel.

Press the same button seven times, each at a different feedback intensity. Feel the difference between silent and spectacular. Then decide: which moments in a product deserve which level?

The screen exists in nature. The user is a conduit between dimensions. Two patterns run beneath everything — fractal self-similarity and the golden ratio. Grow a tree. See a layout at phi. Watch Fibonacci become a type scale. The design system isn't inspired by nature. It speaks the same mathematics.

An hourglass contains nothing but sand and gravity — yet it produces beauty. Three interactive demos: sand flowing through a constraint, particles crystallising into constellations as you click, and energy cascading through a connected network. Simple rules, bounded spaces, emergent life.

Right now, this browser knows how fast you're moving your mouse, how long since you last scrolled, and what time it is. Move around. Stay still. Watch the atmosphere respond to your energy in real time. Four layers of perception: internal physics, user energy, context, and nature.

Every word is made of letters. Every image of pixels. Every thought of building blocks. Four techniques that let the interface reveal its own composition: text that scatters, characters that stream, shapes that morph, words that dissolve into particles and reform. All performant. All in your browser now.

Nine chapters of visuals. Now the other channels. Native Web Audio for ambient soundscapes and feedback tones. Web Speech API for real voice in and out. Vibration and device orientation for haptic and embodied input. Pure CSS scroll-driven animation. Four native capabilities the web barely uses.

Every principle we've built re-read through the smaller screen. Some shine here more than anywhere else — depth, juice, haptics, calm. Some need to adapt. Interactive thumb zone visualiser, chapter-by-chapter translation, and a live phone mockup comparing mobile-first design to desktop-compressed shrinkage.

Space, calm, depth, flow, juice — separately they're interesting. Together they're a language. Every screen has coordinates across all five. Open the mixer: choose a moment, set the dials, watch the atmosphere respond.

The design system, built. Fibonacci tokens, oklch palette, atmosphere classes, and three primitives (Card, Button, Heading). Every token shown, every component demonstrated, every line of code copy-to-clipboard. This page uses its own system to document itself.