The Potter's Invisible Bubble: On the Unseen Cushion of a Well-Mannered Interaction

There’s a moment, right before you pick up a freshly glazed mug, when your hand hovers. It’s a brief, almost imperceptible pause. You’re not just reaching; you’re calculating. You’re anticipating the weight, the texture, the heat. The potter, in their wisdom, has already calculated this for you. They’ve smoothed the handle, balanced the form, chosen a glaze that doesn’t just look beautiful but feels right. This anticipation is a cushion, a tiny pocket of psychological safety that makes the interaction feel seamless and elegant. On the web, we have a similar, almost invisible cushion. It’s the space between a user’s intent and the browser’s response, and it’s governed by a metric that feels as abstract as intuition: Interaction to Next Paint (INP).

INP isn't about the grand, sweeping load of a page. That’s the potter spinning the wheel and firing the kiln. INP is about the small, everyday interactions—the click of a button, the tap on a menu. It measures the time from that click to the moment the browser can actually begin painting the next frame of the response. When this delay stretches beyond a mere fraction of a second, the bubble pops. The user, who hovered their cursor with an expectation of immediacy, is left grasping at air. The mug handle feels rough; the button feels broken.

The culprit is often not what you’d suspect. It’s rarely a single, massive task. Instead, it’s the accumulation of tiny, ill-mannered scripts jostling for attention on the main thread. It’s an event listener that’s a little too greedy, a third-party script that’s a little too chatty, or a callback function that’s forgotten its manners. Like a studio filled with half-finished projects, the main thread gets cluttered. When a user attempts an interaction, their request has to wait in a queue, surrounded by the digital equivalent of drying clay and scattered tools. The delay isn’t loud or dramatic; it’s a quiet, cumulative friction.

Creating that invisible cushion, then, is an exercise in tidiness and foresight. It’s the front-end craft of breaking down long tasks, of yielding to the main thread so it can breathe between its labors. It’s about using techniques like `setTimeout` or `isInputPending` to create micro-yields, tiny gaps where a user’s click can jump the queue. This is the potter carefully clearing their workspace, ensuring that when a hand reaches out, there’s nothing in the way.

A fast INP isn’t a feature you advertise. You don’t see a banner that shouts ‘Click here for a 90-millisecond response time!’ Its success is felt only in its absence. It’s the satisfying, immediate ‘click’ of a toggle switch, the fluid expansion of an accordion menu, the lack of that frustrating stutter when adding an item to a cart. It is, in essence, good manners in code. It’s the potter’s unseen effort to smooth the edges, to balance the weight, to create an object that feels not just functional, but respectful of the hands that will use it. Every interaction is a tiny handshake between user and machine, and a good INP ensures it’s always firm, immediate, and confidently received.

Notes & further reading

A few pages I came back to while writing this: