Navigation

ID badge

What hangs from the About icon in the top bar: an ID badge on a lanyard that drops once per visit, swings in the hand, and opens About.

Specimen

The real badge, hanging from a copy of the top bar's right-hand end. In the bar it drops once per visit, on the first scroll, so this is where to see it again: press Drop it, or the badge icon, as often as you like. Swing it, flick it, put it away. Choose what the card says, slow it down, see it at a phone's size, or turn on reduced motion.

Props

Prop	Type	Note
hook	`RefObject`	The icon it hangs from. The icon wiggles awake before the badge falls and nods when the badge comes home.
edge	`RefObject`	What it comes out from under. The badge appears at this element's bottom edge: in the bar, the bar itself.
contained	`boolean`	Hang inside a positioned box, as on this page, instead of over the whole page.
size	`"auto" \| "phone" \| "desktop"`	The badge's size. Auto, the default, is the phone's below 768px and the desktop's above. The phone's is the same card at 80%.
content	`"promise" \| "register" \| "ask"`	What the card says beyond the name: the About page's headline and its rule, the About page's register, or three things to ask about. The bar shows the promise.
still	`boolean`	Forces the reduced-motion version. Defaults to the reader's own prefers-reduced-motion setting.
speed	`number`	Slow motion for looking at it: 1 is real time. Only this page sets it.
onEvent	`function`	Told when it drops, is first swung, and goes away (closed, tucked or left behind). The bar sends these to analytics.
ref	`LanyardHandle`	drop, retract, isOut and isHanging, for whatever decides when it comes out: the bar's scroll trigger, or this page's buttons.

Every primitive also forwards the native props of the element it renders, so aria-*, id and event handlers work without being listed here.

Use it for

Only as the badge on the About icon in the top bar. It is an invitation to the About page, and the icon is an ID badge so the two read as one thing.
The card says something worth stopping for, not the name and role again: a visitor has already read those in the home page's hero. Three versions. The promise is the About page's headline, I make complex products understandable, with its rule, no slop, circled by hand. The register is the About page's own: five-plus years from zero to one; AI, fintech and logistics; building Optaire; a dad since 2025. Ask me about lists three things the site already states: multi-agent AI products, design systems in code, and a Figma plugin more than 1,000 designers use. The promise and the register are read from the About page itself, so the badge and the page cannot disagree.
It is the site's drafting language printed on card stock: a graphite drawn edge from the site's own roughening filter, ruler ticks down one side, a metal eyelet through a real punched hole that the page shows through, the accent used once, a pencilled note, and one holographic seal whose colours move with the swing and the cursor. The mark on the seal is printed in ink, so it reads on every colour the foil passes through.
It moves like a real badge, after Vercel's Ship '24 badge. The strap is a rope of seven joints drawn as one smooth curve, so it bends instead of staying stiff. When it drops, the card falls out from under the bar slowed by air, and the strap pays out behind it, trailing and fluttering because it is lighter than the card, then snaps taut with a little give; the card bounces once and turns as it lands. It hangs on a swivel, so it swings a beat behind the strap, turns sideways when it moves fast and slowly turns back to face you. Damping is heavy, so it settles without jitter.
It catches the light as the prints on the home page do: a glint crosses it once as the pointer arrives and again as it lands, and a sheen follows the pointer while it tilts toward it.
It answers the hand. Dragging it moves it the way the hand moves, a flick throws it, and it bumps softly off the screen's edges. A press that does not move it opens About; a press that swings it does not.
It never stays long. The cross in its corner or Escape reels it back up into the bar, reading on for more than a screen tucks it away by itself, and so does going to another page. That is why the cross can be so quiet.

Do not use it for

Dropping it again on every page. Once per visit is what keeps it a surprise rather than an obstacle.
Dropping it on the About page, where it would only point at the page it hangs over, or while the home page's first-visit swarm is still building the page.
Animating it under reduced motion. That reader gets it hanging still, faded in and out.
Repeating the name and role as its message. The hero has said them; the card has to give a reason to open About.