Soft BentoMotion
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, links and actions, as a full-width bar (the links centred in a clay nav pill) or a floating pill. Under lg the links move into a popover panel (and, under sm, the actions too); 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 turns into frosted glass with a hairline over the first 6rem of scroll (a glass layer fading in on the scroll timeline; glass from the start where unsupported). Client component.
It is part of Soft Bento. The style’s 92 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 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).