A transparent navbar over a full-bleed hero that fills in proportion to scroll: the background, blur, shadow, text color and height all follow one progress value instead of snapping. On phones a circular overlay opens with large staggered links and a focus trap.
npx shadcn@latest add https://hyperblur.dev/r/navbar-hero-fill.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/navbar-hero-fill.tsx.
import { NavbarHeroFill } from "@/components/hyperblur/navbar-hero-fill"
<NavbarHeroFill distance={240} showBackdrop={false} />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Solstice" | Name next to the logo. |
| links | { label: string; href: string }[] | Stays, Experiences, Journal, About | Links on the right and in the mobile overlay. |
| cta | { label: string; href: string } | null | { label: "Book a stay", href: "#book" } | Outlined button that fills with the accent as the bar fills. Pass null to hide it. |
| progress | number | Controlled fill from 0 to 1. When omitted it follows the scroll position. | |
| distance | number | 220 | Scroll distance in pixels over which the bar goes from transparent to filled. |
| menuOpen | boolean | Controlled state of the mobile overlay. | |
| defaultMenuOpen | boolean | false | Start with the mobile overlay open. |
| onMenuOpenChange | (open: boolean) => void | Called when the overlay opens or closes. Escape closes it and focus returns to the menu button. | |
| accent | string | "#c2410c" | Call to action fill and focus rings. |
| showBackdrop | boolean | true | Render a scrollable sample hero and page. The bar then follows that scroll area instead of the window. |