COMPONENTS/SCROLL NAV

Scroll Nav

Full-screen scroll-linked navigation with animated section transitions and code preview.

navigation
navigationscrollanimation

LIVE PREVIEW

Loading component…

DESIGN RATIONALE

Uses Framer Motion's useScroll and useTransform to create a deeply immersive, section-aware navigation. Each panel transitions with a staggered clip-path reveal, giving the user a sense of spatial depth as they move through content. The monospace code preview alongside the visual card creates a dual-read: one for humans, one for machines.

USAGE GUIDELINES

Use as the primary navigation for long-form landing pages, documentation, or brand storytelling where scroll position drives the narrative. Requires viewport height sections to function correctly.

SOURCE FILE

components/paxeer1.tsx

EXPORT NAME

ScrollNav

CATEGORY

navigation