The site header: logo, links and actions, as a full-width bar or a floating pill. Under lg the links move into a popover panel (and, under sm, every action except the last, which should be the primary); the panel opens before hydration, closes on Esc, an outside tap, a link tap or its close button, and focus returns to the menu button. The bar variant is transparent over the hero's sky and frosts into the night after 4rem of scroll (scroll timeline); floating is a ringed pill that frosts the same way. The current link is plain bright text (the soft fill is for hover and the phone panel). Pull the Hero up under the bar with className="-mt-(--navbar-h)". Client component.
It is part of Noir Aurora. The style’s 91 pieces share one set of tokens, type and motion, in a light and a dark theme, so whatever you take from it fits together.
To put it in your project, copy the prompt into Claude Code, OpenAI Codex or Cursor, or add the file and its styles by hand. The documentation walks through both.
The site header: logo, links and actions. bar is the kit's header: a full-bleed paper bar ruled with 2 px at the bottom, solid from the start, links centred (the current one on paper-2), actions at the end. floating is an inset outlined bar over a paper fade, so nothing shows around it.
The site header: logo, links and actions, as a full-width bar (the links centred in a clay nav pill) or a floating pill.
The site header: logo, mono caps links with an underline that wipes in on hover, and actions. bar is the full-width bar on a hairline rule; floating is the same bar inset as a square-cornered card (no pill).