Navbar Experiments

Three creative navbar concepts. Click each to test in full.

Option A

Liquid Unstick + Breathing Island

Full-width at top, morphs with liquid/blob animation as it "peels away" into a floating island. Once floating, subtle breathing animation (scale pulse).

  • Liquid Morph
  • SVG Filter
  • Breathing Animation
  • Organic Feel
Option B

Split & Converge + Magnetic Snap

Elements spread across full width at top. On scroll, they choreograph inward, converging into a compact floating pill with elastic snap physics.

  • Choreographed
  • Elastic Physics
  • Magnetic Snap
  • Premium Feel
Option C

Context Chameleon + Liquid Unstick

Adapts styling based on what section is behind it (dark header over light sections, light header over dark sections). Plus liquid morph animation.

  • Smart Adaptation
  • Context Aware
  • Liquid Morph
  • Seamless
FINAL

Combined: B + C + Glassmorphic

Desktop uses Option B's Split & Converge. Mobile uses Option C's larger tap targets. Context Chameleon theme adaptation everywhere. Glassmorphic CTA with sweep animation.

  • THE WINNER
  • Best of Both
  • Context Aware
  • Glassmorphic CTA

Testing Instructions

  1. 1. Click any option to open the full test page
  2. 2. Scroll up and down to see the animation triggers
  3. 3. Notice how each behaves differently as you scroll
  4. 4. Test on mobile too (resize browser or use dev tools)
  5. 5. For Option C, notice how colors adapt to section backgrounds