Morphing Nav

NewPremium

Navigation that morphs between three modes: full bar, floating pill, and fullscreen overlay. Scroll-aware with direction-aware motion.

navigationmorphingscrollanimateddirection-aware

Installation

Terminalbash

npx motioncraft add morphing-nav

Usage

morphing-nav.tsxtsx

import { MorphingNav } from "@/components/navigation/morphing-nav";

<MorphingNav items={[
  { label: "Home", href: "/" },
  { label: "About", href: "/about" },
  { label: "Work", href: "/work" },
]} />

Props

Prop	Type	Default	Description
items*	NavItem[]	—	Navigation items with label and href
logo	ReactNode	—	Logo element
className	string	—	Additional CSS classes

Related Components

Animated Masonry

New

Masonry grid with staggered entrance animations and category filtering. Direction-aware motion presets.

Parallax Scroll

Parallax scrolling effect with configurable speed and direction.

Split Screen Text

New

Text that splits apart vertically on scroll, revealing content underneath. Scroll-driven with sticky positioning.

Text Reveal

Text that reveals word by word with scroll-driven animation.