Overlay Menu
A layered, curtain-style fullscreen navigation. A hamburger sweeps four colored panels down in sequence, clip-reveals a dark menu surface, and slides each link group up line-by-line. Built with a GSAP timeline and SplitText; wraps your page as a layout.
npx shadcn@latest add https://ui.aryank.space/r/overlay-menu.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| logo | string | "…/overlay-menu/logo.png" | Logo image shown in the top-left of the bar. |
| children | ReactNode | — | Page / hero content rendered behind the menu. |
| socials | { label, href }[] | Bluesky / Pinterest / … | Social links column. |
| legal | { label, href }[] | Cookie Policy / … | Small legal links column. |
| primaryLinks | { label, href }[] | Home / Experiments / … | Large primary navigation links. |
| secondaryLinks | { label, href }[] | Playground / … | Mid-size secondary links. |
| panelColors | [string, string, string, string] | ["#57cea5","#063124","#0b5c43","#21ba80"] | The four curtain panel colors, swept in order. |
| menuColor | string | "#084331" | Menu surface color revealed under the curtains. |
| togglerColor | string | "#ffffff" | Hamburger bar color. |
panelColorstupleThe four curtain panel colors, swept in order.
menuColorcolorMenu surface revealed beneath the curtains.
togglerColorcolorHamburger bar color.
logoasset-urlBar logo, hosted through https://ui.aryank.space/assets/overlay-menu/logo.png.
gsap