A floating frosted bar whose blur, tint and shadow deepen as the page scrolls, with a specular sheen and a lit rim that follow the pointer. The active link carries a softly pulsing glow dot.
npx shadcn@latest add https://hyperblur.dev/r/navbar-prism-glass.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/navbar-prism-glass.tsx.
import { NavbarPrismGlass } from "@/components/hyperblur/navbar-prism-glass"
<NavbarPrismGlass brand="Halo" showBackdrop={false} />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Halo" | Product name next to the prism mark. |
| links | { label: string; href: string; badge?: string }[] | Studio, Presets, Gallery, Pricing, Learn | Center links. A badge renders a small tinted pill after the label. |
| active | number | Controlled index of the current link. Pair with onActiveChange. | |
| defaultActive | number | 0 | Current link index when uncontrolled. |
| onActiveChange | (index: number) => void | Called when a link is clicked. | |
| signIn | { label: string; href: string } | null | { label: "Sign in", href: "#" } | Quiet link on the right. Pass null to hide it. |
| cta | { label: string; href: string } | null | { label: "Open Studio", href: "#" } | Primary button on the right. Pass null to hide it. |
| frost | number | Fixed frost amount from 0 to 1. When unset, the frost follows window scroll. | |
| scrollRange | number | 140 | Pixels of scroll over which the frost goes from light to full. |
| accent | string | "#8fa8ff" | Color of the active dot, badges and focus rings. |
| showBackdrop | boolean | true | Render a sample page under the bar for previews. Turn it off in a real layout. |