A pitch-black bar lit only where the pointer is: a flashlight reveals a dot grid, makes nearby labels glow and runs a beam along the bottom edge. Touch moves the light too, and idleAt can park it for a static hero.
npx shadcn@latest add https://hyperblur.dev/r/navbar-spotlight.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/navbar-spotlight.tsx.
import { NavbarSpotlight } from "@/components/hyperblur/navbar-spotlight"
<NavbarSpotlight idleAt={0.5} showBackdrop={false} />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Nocturne" | Monospace wordmark next to the diamond mark. |
| links | { label: string; href: string }[] | Platform, Detection, Integrations, Customers, Docs | Center links. |
| active | number | Controlled index of the current link. Pair with onActiveChange. | |
| defaultActive | number | 1 | Current link index when uncontrolled. |
| onActiveChange | (index: number) => void | Called when a link is clicked. | |
| status | string | null | "All systems normal" | Status text with a live dot. Pass null to hide it. |
| cta | { label: string; href: string } | null | { label: "Book a demo", href: "#" } | Outlined button on the right. Pass null to hide it. |
| size | number | 150 | Radius of the spotlight in pixels. |
| idleAt | number | null | null | Keep the light on at this horizontal position (0 to 1) when the pointer is away. Null turns it off. |
| accent | string | "#5ee7ff" | Color of the glow, the beam, the active marker and focus rings. |
| showBackdrop | boolean | true | Render a sample page under the bar for previews. Turn it off in a real layout. |