Next.js App Router & SASS / SCSS

Modern Floating Header with
Smooth Scroll Animation

Scroll down to watch the floating pill navbar smoothly transition into a full-width sticky header at the top of the viewport.

Next.js Docs ↗
✨

Floating Pill Mode

Initially sits centered with top margin, rounded borders, glassmorphic backdrop-filter blur, and subtle border glow.

🌊

Scroll Transition

Smooth 0.35s cubic-bezier animation expands header to full width, removes border radius, and docks at top: 0px.

🎨

SASS Styling

Built with SASS module nesting, mixins, variables, and responsive media queries without external UI library bloat.

🛠️ Navbar SCSS Module
Navbar.module.scss
<span class="page-module-scss-module__rcUngW__variable">.navbar</span> {
  <span class="page-module-scss-module__rcUngW__property">position</span>: fixed;
  <span class="page-module-scss-module__rcUngW__property">top</span>: 24px;
  <span class="page-module-scss-module__rcUngW__property">left</span>: 50%;
  <span class="page-module-scss-module__rcUngW__property">transform</span>: translateX(-50%);
  <span class="page-module-scss-module__rcUngW__property">width</span>: calc(100% - 48px);
  <span class="page-module-scss-module__rcUngW__property">border-radius</span>: 16px;
  <span class="page-module-scss-module__rcUngW__property">transition</span>: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);

  <span class="page-module-scss-module__rcUngW__variable">&.scrolled</span> {
    <span class="page-module-scss-module__rcUngW__property">top</span>: 0;
    <span class="page-module-scss-module__rcUngW__property">width</span>: 100%;
    <span class="page-module-scss-module__rcUngW__property">border-radius</span>: 0;
  }
}

Seamless Integration

The navbar detects window scroll events using standard React hooks and applies SCSS module classes for maximum performance and 60fps animation smooth transitions.