# Navbar Glass Blur — React Navbar Component

> A frosted floating navbar that blurs and saturates whatever scrolls beneath it, with a specular highlight that tracks the pointer along the glass.

- Category: [Navbars](https://pixelpapa.com/components/navbars.md)
- Tags: navbar, glass, blur, frosted, backdrop
- Dependencies: lucide-react (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/navbars/navbar-glass-blur

## Install

```bash
npx shadcn@latest add "https://pixelpapa.com/r/navbar-glass-blur.json"
```

The file is written to `components/pixelpapa/navbar-glass-blur.tsx`. To install manually, run `npm install lucide-react` and copy the source below into your project. It imports `cn` from `@/lib/utils`, which every shadcn project has.

## Source

```tsx
"use client";

import { ArrowUpRight } from "lucide-react";
import { useRef, type CSSProperties, type PointerEvent } from "react";
import { cn } from "@/lib/utils";

type NavbarGlassBlurProps = {
  links?: string[];
  className?: string;
};

export function NavbarGlassBlur({ links = ["Collection", "Artists", "Editions", "Visit"], className }: NavbarGlassBlurProps) {
  const ref = useRef<HTMLDivElement>(null);

  function onPointerMove(e: PointerEvent<HTMLDivElement>) {
    const el = ref.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    el.style.setProperty("--x", `${e.clientX - r.left}px`);
    el.style.setProperty("--y", `${e.clientY - r.top}px`);
  }

  return (
    <header className={cn("sticky top-4 z-40 px-4", className)}>
      <div
        ref={ref}
        onPointerMove={onPointerMove}
        style={{ "--x": "50%", "--y": "0px" } as CSSProperties}
        className="group relative mx-auto flex h-14 max-w-3xl items-center justify-between rounded-2xl border border-white/30 bg-background/35 pr-2 pl-5 shadow-[0_8px_32px_-8px_rgb(0_0_0/0.25),inset_0_1px_0_rgb(255_255_255/0.35)] backdrop-blur-xl backdrop-saturate-150 dark:border-white/10 dark:bg-background/30 dark:shadow-[0_8px_32px_-8px_rgb(0_0_0/0.6),inset_0_1px_0_rgb(255_255_255/0.12)]"
      >
        {/* Specular highlight: a soft light on the surface and a brighter one on the rim. */}
        <span
          aria-hidden
          className="pointer-events-none absolute inset-0 rounded-2xl opacity-0 transition-opacity duration-500 group-hover:opacity-100"
          style={{ background: "radial-gradient(220px circle at var(--x) var(--y), rgb(255 255 255 / 0.22), transparent 70%)" }}
        />
        <span
          aria-hidden
          className="pointer-events-none absolute inset-x-6 top-0 h-px opacity-70"
          style={{ background: "radial-gradient(160px circle at var(--x) 0px, rgb(255 255 255 / 0.9), transparent 70%)" }}
        />
        <a href="#" className="relative flex items-center gap-2 text-sm font-semibold text-foreground">
          <span className="size-5 rounded-full bg-[conic-gradient(from_210deg,var(--chart-1),var(--chart-3),var(--chart-4),var(--chart-2),var(--chart-1))]" />
          Prisma Hall
        </a>
        <nav aria-label="Main" className="relative hidden items-center gap-1 sm:flex">
          {links.map((l) => (
            <a
              key={l}
              href="#"
              className="rounded-full px-3.5 py-1.5 text-sm text-foreground/75 transition-colors hover:bg-white/25 hover:text-foreground dark:hover:bg-white/10"
            >
              {l}
            </a>
          ))}
        </nav>
        <a
          href="#"
          className="relative inline-flex h-10 items-center gap-1.5 rounded-xl bg-foreground px-4 text-sm font-medium text-background"
        >
          Book tickets <ArrowUpRight className="size-4" />
        </a>
      </div>
    </header>
  );
}

const works = [
  { title: "Tidal Study No. 4", artist: "Mirela Oduya", from: "var(--chart-1)", to: "var(--chart-2)" },
  { title: "Soft Machinery", artist: "Kenji Vaux", from: "var(--chart-3)", to: "var(--chart-4)" },
  { title: "Greenhouse, 6 a.m.", artist: "Anouk Sørensen", from: "var(--chart-5)", to: "var(--chart-2)" },
  { title: "Field Recording", artist: "Dario Belmonte", from: "var(--chart-4)", to: "var(--chart-1)" },
  { title: "Low Orbit", artist: "Yara Lindqvist", from: "var(--chart-2)", to: "var(--chart-3)" },
  { title: "Paper Weather", artist: "Tobias Nakamura", from: "var(--chart-3)", to: "var(--chart-5)" },
];

export default function NavbarGlassBlurDemo() {
  return (
    <div className="relative h-[440px] w-full overflow-hidden bg-background">
      <style>{`
        @keyframes pp-navbar-glass-blur-drift {
          0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
          50% { transform: translate3d(6%, 8%, 0) scale(1.15); }
        }
      `}</style>
      <div aria-hidden className="pointer-events-none absolute inset-0">
        {[
          ["var(--chart-1)", "left-[8%] -top-24", "0s"],
          ["var(--chart-4)", "left-[38%] -top-32", "-5s"],
          ["var(--chart-3)", "right-[6%] -top-20", "-9s"],
        ].map(([color, pos, delay]) => (
          <span
            key={color}
            className={cn("absolute size-72 rounded-full opacity-70 blur-3xl motion-reduce:animate-none dark:opacity-50", pos)}
            style={{ background: color, animation: `pp-navbar-glass-blur-drift 14s ease-in-out ${delay} infinite` }}
          />
        ))}
      </div>
      <div className="absolute inset-0 overflow-y-auto pt-4 [scrollbar-width:thin]">
        <NavbarGlassBlur />
        <div className="mx-auto max-w-3xl px-6 pt-12 pb-12">
          <p className="text-xs tracking-[0.18em] text-foreground/60 uppercase">Spring programme · until 8 June</p>
          <h2 className="mt-3 text-5xl font-semibold tracking-tight text-balance text-foreground">Colour, held up to the light</h2>
          <div className="mt-8 grid grid-cols-2 gap-4 sm:grid-cols-3">
            {works.map((w) => (
              <figure key={w.title}>
                <div className="aspect-[4/5] rounded-2xl" style={{ background: `linear-gradient(160deg, ${w.from}, ${w.to})` }} />
                <figcaption className="mt-2 text-sm">
                  <span className="block font-medium text-foreground">{w.title}</span>
                  <span className="text-muted-foreground">{w.artist}</span>
                </figcaption>
              </figure>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}
```

## AI prompt

```text
Add the "Navbar Glass Blur" component from PixelPapa UI to this project.

What it is: A frosted floating navbar that blurs and saturates whatever scrolls beneath it, with a specular highlight that tracks the pointer along the glass.
Category: Navbars. Depends on: lucide-react.

1. Install it with the shadcn CLI:
   npx shadcn@latest add "https://pixelpapa.com/r/navbar-glass-blur.json"
   (If the CLI is unavailable, fetch that URL, write files[0].content to components/pixelpapa/navbar-glass-blur.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/navbar-glass-blur" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More navbars

- [Navbar Announcement Bar](https://pixelpapa.com/components/navbars/navbar-announcement-bar.md) (Pro): A navbar topped by a dismissible strip that ticks through announcements and folds away with a spring when closed.
- [Navbar Centered Logo](https://pixelpapa.com/components/navbars/navbar-centered-logo.md) (Pro): An editorial storefront header with a serif wordmark between two link groups; labels roll on hover and the bag count pops when it changes.
- [Navbar Command Search](https://pixelpapa.com/components/navbars/navbar-command-search.md) (Pro): A docs navbar whose compact search field widens on focus or ⌘K into a filterable result list with arrow-key navigation.
- [Navbar Dynamic Island](https://pixelpapa.com/components/navbars/navbar-dynamic-island.md) (Pro): A compact black pill of links that swells on a spring into a live notification, drains a timer line, then shrinks back to navigation.
- [Navbar Floating Pill](https://pixelpapa.com/components/navbars/navbar-floating-pill.md) (Pro): A floating pill navbar that condenses as you scroll: it narrows on a spring, drops its release chip and swaps the CTA label for an arrow.
- [Navbar Mega Menu](https://pixelpapa.com/components/navbars/navbar-mega-menu.md) (Pro): Hover or focus a trigger and one shared panel springs to the new height while its content crossfades in the direction you moved.