How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Toggle: a rounded 40px chip. "Menu" and "Close" are stacked inside a clip and both slide up one line (1s) to switch.
- Open (1.25s, expo.out-style curve): - The overlay's clip-path grows from a zero-height strip at the bottom to the full screen. - The photo (150px, 5:7) scales from 0.5 to 1 and fades from 25% to full (1.5s). - The detail lines rise from below their masks, 0.05s apart, starting 0.5s in. - The links rise from 150% below, 0.1s apart, starting 0.25s in. - The accent bar rises in last, at 1s.
- Close (1.25s): the overlay collapses to its top edge, the photo moves up 25% of the screen height and fades to 50%, and the detail lines slide out upward. Everything then resets for the next open.
- Pan: while the mouse is over the menu, its horizontal position across the middle half of the screen maps to the link row's full travel. Both the row and the bar ease towards their targets (5% per frame).
- Hover roll: hovering a link rolls its letters up out of view while a duplicate rolls up from below (0.5s, 0.05s apart, strong in-out curve). Leaving reverses it. The accent bar slides and resizes to sit under that link. When the pointer leaves the row, the bar returns to the first link.
- Links: 160px heavy condensed uppercase, 32px apart, 32px from the bottom-left. The bar is 12px tall in the accent colour.
- Details: 13.6px uppercase in two columns (left-aligned and right-aligned), 45% down the screen, with 24px between groups.
- Under 1000px: no photo, details or bar. The links stack as a 64px column, the pan and hover roll are off, and the padding is 20px.
- Escape closes the menu, focus moves into the menu when it opens, and the page behind does not scroll while it is open.
- Fallbacks: reduced motion opens and closes instantly.