Island Menu

Press Menu to open it, and Close or Escape to shut it.

A pill of a nav bar that opens into a menu in two moves. It grows tall first — a black slab rising off the bar with the bar’s controls still pinned to its foot — then wide, and only once it is the size of a menu does the menu arrive in it: the links one after another, the email after them, the picture last.

Height and width on one clock is a rectangle scaling, which the eye reads as a zoom and cannot follow. One axis, then the other, is a thing unfolding, and the order carries information: up first says the menu comes out of the bar rather than out of nowhere.

But the two axes cannot be butted end to end. Run the first move to completion before starting the second and the box stops dead at the corner and starts again, which reads as two animations. Start the second in the first one’s last third and the corner becomes a curve.

The order has to flip on the way out. A menu that grew tall then wide shrinks wide then short, or the shape it passes through on the way out is a shape it never had on the way in, and the close reads as a different object leaving. The content goes first in both directions, since a box should not resize around text that is still there.

The bar’s controls never move. They sit pinned to the foot of the box and ride it up as it grows, so the reader’s hand is still on the button that opened it when it is time to close it. The button’s glyph turns from a pill into a square on the same clock as the box, and its label morphs from Menu to Close.

Build a nav pill that unfolds into a menu with React + motion/react: initially a 340×52 near-black rounded capsule (26px radius) holding a brand mark, a Menu label, and a small glyph. Clicking opens it in three moves — (1) the box grows HEIGHT only first (0.36s cubic-bezier(0.4,0,0.2,1) to 280px, radius easing to 22px), reading as a black slab rising off the pill, with the Menu control pinned to the foot of the box and riding up with it; (2) WIDTH starts when the height move is about 70% done (same 0.36s, to 460px) — the two axes deliberately overlap by 30%, because butted end to end the box stops dead at the corner and starts again, which reads as two animations rather than one shape unfolding, while starting the second move in the first one's last third turns the corner into a curve; (3) only when the box has reached menu size does the content arrive: three links slide in from below one after another (50ms apart, y 10→0 with blur(4px)→0), then an email row, then a picture card. Closing flips the order entirely: content leaves first as one group (0.2s), then the width shrinks, then the height — so the shapes it passes through on the way out are shapes it had on the way in; the glyph morphs from capsule to square on the same clock as the box, the label morphs from Menu to Close, and Escape closes at any time. Palette limited to near-black, paper white text, and warm grey, with a translucent paper-white hover as the only accent.