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 https://ui.aryank.space/r/elastic-curtain-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 |
|---|---|---|---|
| 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