<Let's Talk/>
Design 5 min read

Why we obsess over micro-interactions

The details nobody notices — until they are gone. A look at how small animations build trust and make products feel alive.

The invisible layer

There is a layer of a product that most users will never consciously notice. They will not tweet about it. They will not mention it in a user interview. But remove it, and something feels wrong — like furniture moved an inch in a familiar room.

That layer is micro-interactions: the hover state that brightens just slightly, the button that springs back after being pressed, the form field that shakes gently when you enter the wrong password. None of these things are features. All of them are essential.

Micro-interactions are not decoration. They are feedback. They tell the user the interface heard them.

Close-up of fingers interacting with a touchscreen interface
Every tap, hover, and press is a micro-conversation between the user and the product.
UI design wireframes and prototypes on a screen
Every state is designed before it is built.
Laptop with a minimalist interface on screen
Restraint is the hardest micro-interaction to design.
Mobile phone showing a clean app interface with animations
Mobile interactions demand even more precision.
Designer sketching UI flows on paper
It starts on paper — even the animations.

Three examples we always ship

01
The focus ring you actually want

Every focusable element gets a custom focus ring — not the browser default. A 2px outline in the brand colour, 2px offset. It takes ten minutes. It makes keyboard navigation feel like it was designed, not forgotten.

02
Buttons that have mass

A button that does not respond to being pressed feels unresponsive — like a dead switch. We add a 1–2px downward translate on :active. The button appears to physically depress. Users trust it more.

03
Loading states that are honest

When something is loading, show it. Not a spinner borrowed from a UI kit — something that fits the product. A pulsing skeleton, a progress bar, a subtle shimmer. Waiting feels shorter when the interface acknowledges it.

Our philosophy

We have a rule: every interactive element must have at least three states defined — default, hover/focus, and active. Before a component ships, those three states are designed and built. Not prototyped in Figma. Implemented in code.

button.css
.btn {
    background: var(--brand);
    transform: translateY(0);
    transition: background 0.2s ease, transform 0.15s ease,
                box-shadow 0.2s ease;
}

.btn:hover {
    background: var(--brand-light);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.btn:active {
    /* the button has mass */
    transform: translateY(2px);
    box-shadow: none;
}

The details nobody notices are the first thing they feel when they are gone. That is reason enough to obsess over them.

Next post
Tech

Our stack in 2026: what we use and why