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.

Component

Digital architecture that rises from the void.

Install

npx shadcn@latest add https://ui.aryank.space/r/tilt-away-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

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.

Customize

linkstext

Menu labels and the preview image each one shows.

heroHeadingtext

The headline on the page behind the menu.

Dependencies

gsap

Digital architecture that rises from the void.

components

ui