The Potter’s Steady Hand: On the Centered Calm of a Predictable Reflow

There is a quiet moment in a potter’s studio, after the wheel is spinning but before the first real pull, where the hands are not yet shaping. They are settling. The potter applies a gentle, equal pressure, finding the center of the clay. To rush this is to risk a wobble that compounds with every subsequent motion, a flaw that may not be apparent until the final form is nearly complete. The entire endeavor is built upon this initial, critical stability.

In our own craft, we are also shape-makers, but our clay is the viewport and our wheel is the browser. We spend so much time focused on the final, visible form—the stunning visuals, the complex interactions—that we can neglect the foundational centering. The wobble in our work is Cumulative Layout Shift (CLS), that jarring jump of content that breaks the user’s focus. It is the typographic equivalent of a vase leaning precariously, threatening to topple the entire experience.

A potter learns to anticipate the forces that will act upon the clay. Adding a handle isn’t an afterthought; it’s a calculated step that requires supporting the main body to prevent distortion. Similarly, CLS is not an isolated bug to be fixed with a frantic `height` or `width` attribute at the last minute. It’s a symptom of a process that failed to account for the forces acting on our page: images without dimensions, fonts that swap in and push content, advertisements that inflate like balloons.

The potter’s solution is not to fight each wobble as it appears, but to create conditions where wobbles cannot easily begin. They work with a centered, predictable material. Our equivalent is to reserve space. It sounds simple, almost embarrassingly so. But like the steadying of the clay, it is a discipline. It means always defining aspect ratios for images and videos, using `aspect-ratio` in CSS or width and height attributes that modern browsers can use to calculate the space. It means understanding the likely size of injected content, and pre-allocating a container for it. It means controlling the loading behaviour of our fonts, ensuring text remains visible during the swap.

This act of reservation is not a constraint on our creativity; it is what makes a stable creativity possible. A potter is free to create elegant, intricate forms precisely because they first established a stable center. By reserving space, we are not designing for an empty page, but for the page that will be. We are centering the experience before the user’s gaze even arrives. The goal is a predictable reflow—a smooth, expected progression of content as assets load, not a series of startled jumps. It is the front-end equivalent of a potter’s steady hand, a practice that transforms a potential mess into a vessel ready to hold attention.

Notes & further reading

A few pages I came back to while writing this: