How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Button: fixed 32px from the bottom, centred, 130 × 53px, with fully rounded corners. It is frosted light (75% opacity, 10px blur) with a 48px dark circle 2.5px in from the left holding two 15 × 1.5px bars 6px apart, and "Menu" (14.4px, weight 600) 24px from the right. When open, the bars rotate into an X (0.25s).
- Open: - The menu (a fixed full-screen layer) grows from a zero-size circle at the centre to one covering the screen (2s, ease-out). - At the same time each text block rises from 120% below its own mask (1s, strong ease-out). Block *i* starts at 0.35s + *i* × 0.1s, links first, then the details in reading order. - The page stops scrolling.
- Layout: a 16px inset holds a rounded card (32px corners) in a slightly lighter dark. - At the top left (32px padding) are the links: 64px, line-height 1.1, muted, turning light on hover (0.3s). - At the bottom left, a group half the card's width holds two columns of 16px details, 32px apart. Each detail block has a muted label 16px above light lines 4px apart.
- Close: the lines slide up out of their masks (1s, ease-out, 50ms apart per block). 0.75s in, the circle shrinks back to the centre (1s). Then everything resets and scrolling returns.
- Clicks: the button ignores presses while the menu is mid-animation. Escape closes it.
- Under 1000px: the links are 36px, the detail groups stack in one column with 160px of space below them (clear of the button), and the first detail block hides.
- Fallbacks: reduced motion opens and closes instantly.