Unseen details compound

No one notices one detail; together they make it feel right.

Emil Kowalski@emilkowalski
Come for the features, stay for the details.
Sep 27, 2022Demo 1 ↓View on X ↗
Emil Kowalski@emilkowalski
One of my favorite details of Sonner: By default the toast disappears after 4 seconds unless you hover over it. But what if a toast is triggered and the user switches to a different tab? 4 seconds would pass and the toast would never be seen. [...] A small detail that improves the experience.
Aug 31, 2026Demo 2 ↓View on X ↗
Emil Kowalski@emilkowalski
One detail I like about Linear's docs is that cmd + f searchbox searches within an accordion like FAQ as well and opens it if there's a match. I don't see this often, but it's one of those things I'm pleasantly surprised about when I see it.
Jul 28, 2026Demo 3 ↓View on X ↗
Emil Kowalskiemilkowal.ski
Everyone’s software is good enough these days. The barriers to entry are low. To stand out, you need to make your product feel great.
Good vs great animationsDemo 1 ↓Read article ↗

From emil-design-eng.

1 · Ten details, one switch

Open both Share menus, then switch details off on the right.

No detailsBad
400ms ease-in, scale(0), keyframes
Your detailsGood
10/10
Details on the right pane 
.menu {
  transform-origin: var(--radix-popover-content-transform-origin);
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out);
}
.menu[data-open] { opacity: 1; transform: none; transition-duration: 200ms; }
.button:active { transform: scale(0.97); }
.label-swap[data-leaving] { opacity: 0; filter: blur(2px); }

2 · The toast waits for you

Show both toasts, then switch tabs for five seconds.

Timer always runsBad
idle
Pauses when unseenGood
idle
document.addEventListener("visibilitychange", () => {
  if (document.hidden) timer.pause();
  else timer.resume();
});
toast.addEventListener("pointerenter", () => timer.pause());
toast.addEventListener("pointerleave", () => timer.resume());

3 · Find opens the answer

Press ⌘F and search for “prorated”.

hiddenBad

display: none
hidden="until-found"Good

beforematch: 0
<div class="answer" hidden="until-found">…</div>

answer.addEventListener("beforematch", () => {
  trigger.setAttribute("aria-expanded", "true");
});

Why it matters, pros and cons

Why it matters

Each detail removes a friction nobody reports; together it feels calm.

Pros

  • Most cost one line of CSS.
  • Ten small fixes read as a new product.
  • Hard to copy; competitors only see features.

Cons

  • No single detail moves a metric; batch them.
  • Invisible work regresses silently; keep a checklist.
  • Don't polish a flow you're about to delete.