PRO

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.

Component

Dense Geometry

Install
npx shadcn@latest add https://ui.aryank.space/r/rotating-halves-menu.json

Installs from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.

Files

API
PropTypeDefaultDescription
leftPanelColor / rightPanelColorstring#474437 / #403d31The two halves. Two close values read as one surface with a fold; two distant ones read as a split.
heroImage / heroHeadingstringBLANK heroPage behind the menu.
footerLinks / footerNotestring[] / stringBLANK copyLegal row along the bottom of the open menu.
Customize
primaryLinkstext

Uppercase column of the menu.

secondaryLinkstext

Serif column of the menu.

Dependencies
gsap