Folding Panel Menu
A strip of numbered panels pinned to the right edge that unfolds into a fullscreen navigation. Tapping Menu widens the strip with a custom hop ease while each panel's giant rotated word rises letter by letter; once open, hovering a panel swaps its label and clip-reveals its image. GSAP timeline with CustomEase.
npx shadcn@latest add https://ui.aryank.space/r/folding-panel-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 |
|---|---|---|---|
| items | FoldingPanelMenuItem[] | Five BLANK panels (Why, Who, What, How, Join) | Panel index, label, and image for each folded column. |
| heroImage | string | BLANK-hosted image | Fullscreen backdrop shown behind the menu. |
| cream / muted / ink | string | #eee5d2 / #a39b89 / #2c221d | Panel surface, index text, and display-type colors. |
itemstextPanel index, label, and per-panel image.
heroImageasset-urlFullscreen backdrop behind the folded strip.
cream / muted / inkcolorPanel surface, index, and display-type colors.
gsap