A fullscreen navigation overlay that opens as a circle growing from the menu button, with oversized links rising in sequence. Hovering one link dims the rest and slides in an arrow.
npx shadcn@latest add https://hyperblur.dev/r/modal-fullscreen-menu.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/modal-fullscreen-menu.tsx.
import { ModalFullscreenMenu } from "@/components/hyperblur/modal-fullscreen-menu"
<ModalFullscreenMenu brand="Northfold" />| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | undefined | Controlled open state. Leave undefined to let the component manage it. |
| defaultOpen | boolean | false | Initial open state when uncontrolled. Defaults to true when embedded so the preview shows the dialog. |
| onOpenChange | (open: boolean) => void | undefined | Called whenever the dialog opens or closes. |
| embedded | boolean | false | Renders the dialog inside its parent (absolute, not fixed) without scroll lock, for previews and docs. |
| trigger | ReactNode | null | "Menu" | Label of the built-in trigger button. Pass null to hide it and control the dialog with open. |
| brand | string | "Northfold" | Wordmark shown in the overlay header. |
| links | { label: string; href: string; meta?: string }[] | 5 studio links | Main links, numbered automatically. |
| contact | { label: string; value: string; href?: string }[] | 3 contact rows | Contact column shown on wide screens. |
| note | string | "Booking new projects for Q1 2027" | Status line with a green dot under the contact column. |
| onNavigate | (href: string) => void | undefined | Called when a link is chosen, before the overlay closes. |
| accent | string | "#ff5a36" | Accent color for the primary action, focus rings and highlights. |
| className | string | "" | Extra class on the root element. |