A control that learned to get out of the way

The pill was loud in every way a small thing can be loud. It was wide. It was set in uppercase. It carried a heavy drop shadow so it floated above the page like it had somewhere to be. And it never left — it sat over the bottom of the feed, clipping the corner of whatever card happened to be down there, on every page, forever.

The defense for an always-on control is discoverability: people can't use what they can't find. But discoverability is a one-time cost. You pay it once, the visitor learns the control exists, and then every subsequent pageview is just the tax — a permanent fixture earning its keep on a transaction that already cleared.

The reference that came up was the Vercel toolbar: the way it rests as a tiny nub at the edge of the screen and only unfurls into a real toolbar when you reach for it. That's the right posture — small until summoned — even though its look has nothing to do with this site.

So the brief was to steal the behavior and draw it in the house style. This place is Bauhaus: a cream page, a red-to-blue accent bar across the top, and three primitives — a circle, a square, a triangle — in primary colors. Whatever replaced the pill had to feel like it grew out of that, not like a widget that wandered in from another app.

The first pass swapped the wide pill for a 44px circular nub. At rest it's just a glyph in the corner — a real tap target, but quiet. On hover or keyboard focus it unfurls to the right, revealing the Ask / Search label and the ⌘K shortcut, then folds back up when you look away. Click it, or hit the shortcut, and the same palette opens as before.

Nothing underneath changed: the Cmd/Ctrl-K binding, the open/close state, and the list of routes that suppress the pill (pages that already own their bottom-right corner) all kept working exactly as they were. Only the thing you look at got smaller.

v1 fixed the obnoxious part. The second pass was about making it feel like it belongs here, and it changed four things.

A gradient ring. The nub is now wrapped in a hairline ring that runs red to magenta to blue — the exact gradient as the accent bar across the top of every page. It ties the floating control back to the site's own chrome.

The primitives, not a sparkle. v1 used a generic ✦. v2 replaces it with a miniature of the homepage's own motif: a yellow circle, a blue square, and a red triangle strung along a faint line. The control now literally wears the site's identity.

Letting the color do the work. v1 had a cute trick where hovering flipped the nub to a bold black pill. It turned out the dark-blue square vanished against black, so the inversion was quietly eating one of the three primitives. I dropped it. The nub stays a light surface in both states and lets the primary colors carry the contrast instead.

Quieting on scroll. While the page is moving, the nub dims and shrinks a touch toward the corner; a beat after you stop, it comes back. It gets out of the way precisely when you're busy reading and reappears when you're not — and it's switched off entirely for anyone who's asked the OS to reduce motion, so it never flickers.

An unfurl-on-hover control has an obvious hole: touch screens have no hover. On a phone the label would never appear, leaving a mystery glyph in the corner. So on coarse-pointer devices the nub simply rests in its labeled state — no hover to discover — and the keyboard hint, meaningless without a keyboard, is dropped. The control also picked up aria-keyshortcuts, so a screen reader announces the ⌘K / Ctrl-K binding the same way sighted users see it.

Before: a wide pill shouting in the corner of every page, all day, whether or not you needed it. After: a small ringed nub holding the site's three primitives, dimming when you scroll, unfurling Ask / Search ⌘K the instant you reach for it, and resting open on touch. Two passes, one small button — and a corner of the page given back to the content.