There’s a specific feeling you get from a 16px grid. Not the grid itself — you never see the grid — but the things that live on it. The snap. The angularity. The way elements relate to each other in clean multiples rather than arbitrary floats. It doesn’t feel like constraint. It feels like grammar.
I’ve been thinking about this a lot while building the background animation on this site. The pixel field is a grid of cells, each 16×16 pixels. Each cell has a state — brightness, color, phase — and the states evolve according to a heat-field algorithm that propagates influence from a moving source. The result looks organic and almost continuous, but it’s not: it’s 16px quanta all the way down, and that quantization is the entire aesthetic.
Why constraints produce better aesthetics than freedom
The intuitive move when designing a motion system is to reach for continuous interpolation. Smooth bezier curves, fractional pixel positions, easing functions that give you fine-grained control over every part of the arc. The result is usually polished and immediately forgettable.
Constraints force invention. When you can only move in 16px increments, you have to find the interesting thing that’s possible within that restriction rather than smoothing over it. The restriction becomes the style. Teenage Engineering figured this out years ago — their products look deliberately constrained, not accidentally limited. The OP-1’s screen is tiny and low-resolution and that’s not a compromise, it’s the aesthetic. Every design decision downstream of that constraint is shaped by it, and the coherence you feel is the coherence of something that had nowhere to cheat.
The demoscene understood this even earlier. Working within the PETSCII character set, or the CGA palette, or 64KB of memory — these weren’t unfortunate limitations to work around, they were the medium. The craft was in discovering what was possible inside the box. The box was the point.
The heat-field animation
The specific technique on this site is a cellular automaton running a heat diffusion simulation. Each cell’s value at time T+1 is a weighted average of its neighbors at time T, plus a small random perturbation. The heat source is a moving point that tracks — loosely, with lag — the cursor position and the audio amplitude from the drone engine.
What makes this interesting rather than just noisy is the relationship between the heat-field timescale and the grid timescale. The heat diffuses slowly relative to the frame rate, so you get a smeared, trailing quality. But because the underlying cells are hard-quantized at 16px, the smear has a blocky texture that reads as intentional rather than blurry. It’s motion that looks like it’s running on discrete hardware, because it is.
I’ve tried versions of this with sub-pixel rendering, with Gaussian blur post-processing, with continuous value fields. They all feel worse. The quantization isn’t a stylistic choice I made — it’s what the grid told me to do.
What the grid teaches
The practical lesson I keep coming back to: pick your grid before you pick your aesthetics. The grid is the generator. Once you’ve committed to 16px cells, a hundred other decisions collapse — padding values, icon sizes, gap rhythms, animation step sizes. You’re not choosing between options, you’re deriving answers.
This is true for layout, obviously, but it’s also true for motion. If your grid is 16px, your motion should feel 16px. Not literally — you’re not snap-animating UI elements — but in sensibility. The animation should feel like it belongs to the same discrete system as the layout.
When it all lines up, you don’t notice the grid. You just notice that everything feels right, like it was designed by something with a single opinion about how space works. That’s what I’m after. The grid is invisible and total.