Morphing Scroll Navbar

Component 81

About

A responsive navbar that morphs from a full-width header into a blurred floating capsule, compacts while scrolling down, restores on upward scroll, and tracks reading progress.

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

Code

How Morphing Scroll Navbar is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { MorphingScrollNavbar } from "@/components/ui/morphing-scroll-navbar"

const sections = [
  ["how", "01", "How it works", "A navigation bar that responds to reading intent."],
  ["control", "02", "Control", "Scroll upward and the links return before you reach the top."],
  ["assurance", "03", "Assurance", "Every transition is restrained and reversible."],
  ["developers", "04", "Developers", "One component, no animation dependency."],
  ["faq", "05", "FAQ", "Responsive by construction."],
]

export default function MorphingScrollNavbarDemo() {
  return (
    <main className="msn-demo">
      <style>{DEMO_STYLES}</style>
      <MorphingScrollNavbar />
      <header className="msn-demo-hero" id="top">
        <div className="msn-demo-dots" />
        <p>Scroll-responsive navigation</p>
        <h1>Calm at rest.<br />Useful in motion.</h1>
        <span>Scroll to see the shell float, compress and restore itself.</span>
      </header>
      {sections.map(([id, index, eyebrow, title]) => (
        <section className="msn-demo-section" id={id} key={id}>
          <div className="msn-demo-index">{index}</div>
          <div><p>{eyebrow}</p><h2>{title}</h2></div>
        </section>
      ))}
    </main>
  )
}

const DEMO_STYLES = `
*{box-sizing:border-box}html{scroll-behavior:smooth}.msn-demo{min-height:100vh;background:#f6f7f5;color:#17201c;font-family:"Geist Variable",ui-sans-serif,system-ui,sans-serif}.msn-demo-hero{position:relative;min-height:100vh;display:grid;place-content:center;justify-items:center;padding:120px 24px 80px;text-align:center;overflow:hidden}.msn-demo-dots{position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(23,32,28,.11) 1px,transparent 0);background-size:27px 27px;mask-image:radial-gradient(ellipse 70% 65% at 50% 38%,#000 20%,transparent 72%)}.msn-demo-hero>*:not(.msn-demo-dots){position:relative}.msn-demo-hero p,.msn-demo-section p{margin:0 0 18px;color:#176247;font-size:11px;font-weight:650;letter-spacing:.1em;text-transform:uppercase}.msn-demo-hero h1{margin:0;font-size:clamp(52px,8.2vw,112px);font-weight:590;line-height:.91;letter-spacing:-.065em;text-wrap:balance}.msn-demo-hero>span{margin-top:30px;color:#68716b;font-size:15px}.msn-demo-section{width:min(1120px,calc(100% - 48px));min-height:92vh;margin:auto;padding:120px 0;display:grid;grid-template-columns:minmax(120px,.34fr) minmax(0,1fr);gap:48px;scroll-margin-top:90px;border-top:1px solid #dce1dd}.msn-demo-index{color:#8b938e;font-size:11px}.msn-demo-index:before{content:"";display:block;width:48px;height:1px;margin-bottom:14px;background:#176247}.msn-demo-section h2{max-width:760px;margin:0;font-size:clamp(38px,5.4vw,72px);font-weight:560;letter-spacing:-.05em;line-height:.98;text-wrap:balance}.dark .msn-demo{background:#101310;color:#edf1ee}.dark .msn-demo-dots{background-image:radial-gradient(circle at 1px 1px,rgba(237,241,238,.1) 1px,transparent 0)}.dark .msn-demo-hero>span{color:#9aa49e}.dark .msn-demo-section{border-color:#2b312d}@media(max-width:700px){.msn-demo-section{width:calc(100% - 36px);grid-template-columns:1fr;gap:32px;padding:84px 0}.msn-demo-hero h1{font-size:clamp(48px,15vw,76px)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
`