Nav Animation

Zenora UI

Get Started

Nav Animation·Navigation

npx zenora-ui-registry@latest add nav-animation

Navigation

137 views•22 uses

Get this component

Copies the component into your project, installs what it needs, and pulls down its images. Nothing to download by hand.

npx zenora-ui-registry@latest add nav-animation

Writes to components/zenora-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.

Or let an AI agent pull it in for you. Set up the MCP server

A full-screen immersive navigation menu with staggered GSAP background reveals and kinetic split-text entrance animations.

KEY FEATURES

·Staggered multi-layer background scale reveals powered by GSAP timelines
·SplitType line animations for kinetic typography entrances on open
·Responsive grid and flex layouts adapting dynamically to screen sizes

Props

4 properties

logostringZENORA

Text for the brand logo in the header.

accentColorcolor#57cea5

Color for the brand period and the primary background slide layer.

menuBgColorcolor#084331

The final solid background color of the opened navigation menu.

logoColorcolor#ffffff

Color of the logo text.