proNew330 lines · framer-motion

Navbar Glass Scroll

Transparent over the hero, frosted the moment it matters. A nav that starts transparent and minimal over a bold hero, then gains a frosted-glass background, shrinks slightly and picks up a border/shadow as the user scrolls — scoped entirely to its own internal scrollable container, never the window. `showBackdrop` renders just the bar when a template already has its own page content.

Use it for: Any landing page that wants the classic scroll-aware glass nav effect, previewed self-contained inside a library card without hijacking the page scroll.
Themes: Light + dark
License: Commercial use

Live

New · Workspace

Plan, ship and track it from one calm home base.

Projects, approvals and release notes stay in sync, so nobody has to go ask what shipped.

Live visibility

A single feed shows every automated run the moment it starts, not after it finishes.

Guarded changes

Every edit a workflow makes is held for review before it touches anything real.

Rollback by default

Each step keeps a reversible snapshot, so undoing a bad run is one click.

Quiet by design

Notifications batch into one digest instead of a separate ping for every step.

tsx

"use client";

import * as React from "react";
import { AnimatePresence, motion, useReducedMotion, useScroll, useTransform } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

/**
 * Scroll-aware nav: starts transparent/minimal over a bold mock hero, then
 * gains a frosted-glass background, shrinks slightly and picks up a
 * border/shadow as the user scrolls. The whole thing is scoped to its own
 * internal scrollable container (never `window`), so it behaves inside a
 * card preview exactly as it would on a real page.
 */

export interface NavbarGlassScrollProps {

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→Builds its own scrollable 'page' — a fixed-height div with overflow-y-auto containing a dark hero and a few plain content blocks — and attaches framer-motion useScroll({ container }) to that div's ref, never to window.
→Nav is sticky top-0 inside that scrollable container; as scrollY rises from 0 to a small threshold, its background opacity, backdrop-blur strength, border/shadow opacity and (if shrinkOnScroll) height all interpolate via useTransform.
→Link and CTA colours flip from white (readable over the dark hero) to the foreground/primary tokens once the glass background is dense enough to need it.
→At widths where the links would crowd, a hamburger toggles a rounded dropdown sheet positioned absolute under the sticky nav, inside the nav's own relative wrapper — it never escapes the scroll container.
→Decorative hero blobs drift on an infinite loop, paused via IntersectionObserver (block offscreen) and the Page Visibility API (tab hidden); prefers-reduced-motion removes the drift entirely.
→Scrolling back to the top resets the nav to its transparent resting state.

Accessibility

✓Nav is a labelled <nav aria-label="Primary">; the hamburger button exposes aria-expanded and a dynamic aria-label.
✓Text/link colour always keeps sufficient contrast against whatever background is currently showing (white over the hero, foreground tokens once glassed).
✓Mobile sheet items are real, keyboard-reachable <a> elements that close the sheet on activation.
✓Decorative gradient blobs are aria-hidden; the internal scroll container is a plain scrollable div, not a focus trap.
✓Honours prefers-reduced-motion.