MORPHING MENU

i kept opening and closing this menu. a white pill becomes a panel, the label rolls out of the way, and the links arrive a beat later. i wanted to keep that feeling in a reusable primitive.

inspired by blinkpath, with this site's type and blue accent.

how it works

• mobile — the pill grows left and down from its top-right corner. menu becomes close, the divider draws across, then the links rise into place. closing plays the sequence back
• desktop — a blue dot stretches into the selected link. a white copy of the text stays aligned inside it as the pill travels
• hover / focus — the label rolls upward and blue parentheses appear. the selected mobile link keeps them
• surface — only the background changes size. the text stays on its own layer, so the letters never squash or stretch
• escape, outside clicks, and selection close the panel. reduced motion skips the travelling and stagger

i liked how much of the interaction came from sequencing a few small movements. keeping those layers separate also means a second click can reverse the animation from wherever it is.

<MorphingMenu
  items={items}
  activeId={activeSection}
  onSelect={(item) => setActiveSection(item.id)}
  action={{ label: "contact", onClick: openContact }}
/>

pass { id, label, href } items and let the page own selection. layout="auto" switches at 1024 px; the previews pin each layout so both are easy to try. turn on follow screen size to test the automatic switch.