A studio header where every link leans toward the pointer and a soft chip stretches after it, then springs back with a slight overshoot. The call to action has a stronger pull and an arrow that straightens on hover.
npx shadcn@latest add https://hyperblur.dev/r/navbar-magnetic.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/navbar-magnetic.tsx.
import { NavbarMagnetic } from "@/components/hyperblur/navbar-magnetic"
<NavbarMagnetic strength={0.5} showBackdrop={false} />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Orbit" | Studio name next to the orbiting mark. |
| links | { label: string; href: string }[] | Work, Services, Studio, Journal, Contact | Magnetic links in the center. |
| 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. | |
| cta | { label: string; href: string } | null | { label: "Start a project", href: "#" } | Magnetic pill button on the right. Pass null to hide it. |
| strength | number | 0.4 | How far elements travel toward the pointer, from 0 to 1. |
| radius | number | 90 | Distance in pixels around each element where the pull is felt. |
| accent | string | "#ff7a45" | Color of the orbit dot, active marker, button arrow and focus rings. |
| showBackdrop | boolean | true | Render a sample page under the bar for previews. Turn it off in a real layout. |