Rotating Halves Menu
A fullscreen navigation whose backdrop is two panels that arrive by rotating rather than sliding. Each half is scaled twice over and parked at a half turn about the edge it meets in the middle, so opening the menu unwinds both rotations at once and the two colours sweep in from the seam. The links are split into masked lines that rise once the panels are most of the way home, and the hamburger crosses into an X on the same clock. GSAP with CustomEase and SplitText.
npx shadcn@latest add https://ui.aryank.space/r/rotating-halves-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 |
|---|---|---|---|
| leftPanelColor / rightPanelColor | string | #474437 / #403d31 | The two halves. Two close values read as one surface with a fold; two distant ones read as a split. |
| heroImage / heroHeading | string | BLANK hero | Page behind the menu. |
| footerLinks / footerNote | string[] / string | BLANK copy | Legal row along the bottom of the open menu. |
primaryLinkstextUppercase column of the menu.
secondaryLinkstextSerif column of the menu.
gsap