Tilt Away Menu
Opening this menu does not cover the page, it throws it. The hero rotates, scales up and slides off toward the bottom right while the panel unfolds from the opposite corner, arriving from a rotated, oversized, quarter-opacity state. The clip path overshoots past the bottom edge so the panel lands as a skewed sheet, links roll up from below their baseline, and hovering a link stacks a new preview in over the last.
npx shadcn@latest add @compronents/tilt-away-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 | TiltAwayMenuLink[] | Visions, Core, Signals, Connect | Label plus the preview image swapped in on hover. |
| heroImage / heroHeading | string | Blob-hosted hero | The page behind the menu. |
| socials / footerPrimary / footerLinks | string[] / string | Behance, Dribbble, LinkedIn, Instagram | Secondary link groups in the panel. |
linkstextMenu labels and the preview image each one shows.
heroHeadingtextThe headline on the page behind the menu.
gsap
