Floating Header

Overview

Core Concept

The FloatingHeader component transforms a static navigation bar into a scroll-reactive, motion-enhanced header. Built on top of Framer Motion's useScroll and useSpring, it interpolates width, border-radius, background, and shadow as the user scrolls — giving a polished "shrink-on-scroll" effect with zero JavaScript layout thrashing.

Visual transitions use direct motion values for geometry and theme CSS variables (--primary, --accent, --secondary, --background, --foreground) for color, so the component stays aligned with your design tokens.

Key Features

• Scroll-driven morph — Width, radius, shadow, and background animate smoothly via spring physics
• Theme-aware visuals — Background and shadow colors derive from theme tokens, so the header automatically adapts to your palette
• Variant system — Full support for intent, styling, size, shape, elevation, and targetWidth
• Glass styling — Built-in backdrop-blur glass morphism variant
• Semantic markup — Renders as a <header role="banner">

Installation

Usage

Basic

<FloatingHeader>
  <nav className="flex w-full items-center justify-between">
    <span className="font-semibold">Logo</span>
    <ul className="flex gap-4">
      <li>
        <a href="#home">Home</a>
      </li>
      <li>
        <a href="#about">About</a>
      </li>
    </ul>
  </nav>
</FloatingHeader>

Composition

Combine with a glass look, pill shape, and floating elevation:

<FloatingHeader
  intent="primary"
  styling="glass"
  shape="pill"
  elevation="floating"
  size="lg"
  targetWidth={70}
>
  <nav aria-label="Main" className="flex w-full items-center justify-between">
    <Logo />
    <NavigationMenu />
    <Button size="sm">Sign in</Button>
  </nav>
</FloatingHeader>

API Reference

FloatingHeader

Accessibility

• Landmark — Renders as <header role="banner"> for assistive technology detection
• Focus management — Place focusable navigation items inside; the header itself is not interactive
• Reduced motion — Spring animations respect prefers-reduced-motion when configured via Framer Motion's global settings