Elastic Curtain Menu
A full-screen menu whose panel is a single SVG path with a quadratic control point, so it drops in as a sagging sheet rather than a rectangle. Opening runs the curve past its resting position and settles it, closing flips the anchor to the bottom and lifts the sag the other way. Link characters fly in from far right on an elastic ease while the contact block staggers up underneath.
npx shadcn@latest add @compronents/elastic-curtain-menuInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
Checking access…
| Prop | Type | Default | Description |
|---|---|---|---|
| links | string[] | work, services, about, insights, careers, contact | Menu entries, split into characters for the fly-in. |
| contactLabel / contactLines / addressLines | string / string[] | BLANK contact block | The information column beside the links. |
| backgroundImage | string | Blob-hosted hero | The page image the curtain drops over. |
| panelColor / accent | string | #f0eeee / #a374ff | Curtain fill and contact label color. |
linkstextThe menu link labels.
panelColor / accentcolorCurtain fill and the contact label color.
gsap