How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Bar: fixed to the top with 32px padding, 20px uppercase type in the light colour and mix-blend-mode: difference, so it stays readable over light and dark sections. The 8px square before the wordmark blinks once a second in the accent colour.
- Open: the panel grows from a point at the centre to the full screen (0.3s ease-out) and page scrolling locks.
- Links: - They sit on the right half of the screen, 7.5vw uppercase with line-height 0.9. The current page's link is in the accent colour. - The links start 0.1s apart. Within a link, each letter appears 25ms after the one before and flickers through random characters every 50ms, 5 times (at most 0.15s), before settling.
- Footer: two social links (32px apart) on the left and a bracketed contact link on the right, 20px, with 32px padding. They decode the same way, continuing the 0.1s sequence after the big links.
- Hover (desktop): a link turns the accent colour and its letters flicker again. Big links flicker 10 times every 50ms (at most 0.2s, 25ms apart letter to letter). Footer links flicker 5 times every 25ms (at most 0.1s, 15ms apart). Leaving restores the colour.
- Close: Menu again (or Escape) shrinks the panel back to the centre (0.3s), then the letters reset, ready for the next open.
- Under 1000px: the links span the full width from 16px in, at 15vw, the padding is 16px, the footer items are 16px apart and there is no hover effect.
- Fallbacks: reduced motion opens and closes instantly and shows the links without the scramble.