Getting Started
Components
TweenCommand Palette
Search for a command to run...
TweenSearch for a command to run...
Design Studio / Est. 2026
We craft interfaces that feel alive — fluid transitions, precise timing, and detail that earns a second look.
Studio
Berlin — Remote
Worldwide
Portfolio
Vol. 03
Inquiries
hello@studio.dev
Phone
+47 1234 567890
Dribbble
Careers
Press
Privacy
Terms
Ref. 00492X
import { FullscreenOverlayMenu } from "@/registry/tween/fullscreen-overlay-menu"
export function FullscreenOverlayMenuDemo() {
return <FullscreenOverlayMenu />
}
import { FullscreenOverlayMenu } from "@/components/ui/fullscreen-overlay-menu"<FullscreenOverlayMenu
toggleLabel="Menu"
items={[
{ label: "Work", href: "#" },
{ label: "Studio", href: "#" },
{ label: "Journal", href: "#" },
{ label: "About", href: "#" },
{ label: "Contact", href: "#" },
]}
/>Activating the toggle expands the overlay to fill the viewport, masking the
page content behind it. The menu items stagger in from below their clip
masks while the centered image scales into place and the left and right
info columns fade up. As the cursor moves over the links, an accent
highlighter follows it with a lerped translate controlled by lerpFactor,
underlining whichever item is hovered. Closing the menu plays the sequence
in reverse, returning to pageContent. The toggle, corner label, and both
info columns are fully configurable so the overlay can match any brand,
and the entire interaction stays keyboard accessible.
| Prop | Type | Default | Description |
|---|---|---|---|
items | FullscreenMenuItem[] | 5 defaults | Each entry is { label, href? }. |
menuImage | string | Default path | URL of the centered menu image. |
menuImageAlt | string | "" | Alt text for the centered image. |
leftColumn | ReactNode | — | Extra content appended to the left info column. |
rightColumn | ReactNode | — | Extra content appended to the right info column. |
pageContent | ReactNode | Default copy | Content shown behind the overlay before the menu is opened. |
toggleLabel | string | "Menu" | Label rendered on the toggle button. |
cornerLabel | string | "Archive" | Label rendered on the right side of the nav bar. |
accent | string | "#f0ee6f" | Color of the underline highlighter. |
ink | string | "#0e0e10" | Background color of both the page and the overlay. |
cream | string | "#f5f3ec" | Foreground color used for links, copy, and the toggle. |
lerpFactor | number | 0.05 | Linear interpolation factor for cursor-tracked translate and highlighter. |
className | string | — | Extra classes on the outer container. |