Floating Shrink Header

Floating nav that runs full width at the top of the page and shrinks into a blurred pill once you scroll past 100px, with a spring-animated width change. Links share a sliding hover highlight; on mobile a toggle opens an animated dropdown menu. Ships composable parts and a scroll-container prop for embedded layouts.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Floating Shrink Header to your project and fits it to your theme.

import Header02 from "@/components/ui/header-02";

export default function Header02Demo() {
  return <Header02 />;
}