How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Bar: fixed with 32px padding. The name chip is dark with light 14px mono uppercase text (8px × 10px padding, 6px corners). The toggle chip is in the panel colour (10px padding, 6px corners). Its 14px-tall window holds "Menu" with "Close" underneath.
- Open: - The toggle turns dark with light text and both labels slide up 16px (0.3s), so "Close" shows. - The page stops scrolling. - The panel fades in (0.3s). - The chips pop in: every link chip, then the footer headings, then the footer links. Each rises from one full height below and fades in (0.75s, strong ease-out), 75ms after the one before.
- Link chips: a centred column at 47.5% of the screen height, 16px apart. Each is a rounded chip (8px corners) in the page colour with 32px condensed text (weight 600, line-height 1.125) and 0.5em 0.5em 0.3em padding. The current page's chip is dark with light text.
- Footer: three groups along the bottom with 32px padding, 24px apart. Each has a small heading chip (12px mono uppercase on the page colour, 6px × 8px padding, 5px corners) above 12px mono links 12px apart and 8px below it. The left group aligns left, the right group aligns right, and the middle group is a single line.
- Close: the label rolls back, the panel fades out (0.3s), and the chips reset below their slots for next time. The page returns to where it was.
- Under 1000px: link text is 24px, the footer groups stack in the centre and the middle group hides.
- Fallbacks: reduced motion shows and hides everything instantly. Escape closes the menu.