proNew302 lines · framer-motion

Navbar Floating Pill

One rounded shell, links that light up as you pass. A fully-rounded, inset nav bar that floats with margin from the top and sides of the section, logo left, centred links with a sliding hover capsule, and a filled CTA right — shown over a short framed hero so it reads like a real page.

Use it for: The top of a marketing or product landing page where the nav should feel like a distinct floating object rather than a bolted-on bar.
Themes: Light + dark
License: Commercial use

Live

Interface, revisited

Every project, one calm overview.

Progress, owners and the next step all sit in the same place, so status updates stop being a meeting.

Overview

Where every project stands, at a glance.

Automation

Repetitive steps run themselves in the background.

Reporting

Share progress without building a deck.

tsx

"use client";

import * as React from "react";
import { AnimatePresence, motion, useReducedMotion } 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;
}

/**
 * Floating, inset, pill-shaped nav bar over a short framed page backdrop.
 * Desktop: centred text links with a shared "hover capsule" (layoutId) that
 * slides behind whichever link is hovered/focused. Narrow widths (<640px)
 * collapse the links into a hamburger that opens a small rounded sheet
 * anchored under the pill — never fixed, never portalled to document.body.
 */

export interface NavbarFloatingPillProps {

The rest is in Pro.

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

Get Pro

How it behaves

→Desktop links share one absolutely-positioned capsule (motion.span with layoutId) that slides and resizes behind whichever link is hovered or focused.
→At narrow widths the centred links disappear and a hamburger button (animated SVG morph between bars and an X) toggles a rounded dropdown sheet anchored under the pill, positioned absolute inside the nav's own relative wrapper.
→glow toggles a soft blurred signal-coloured halo behind the pill; pillStyle switches the shell between a solid card background and a translucent blurred one.
→Two decorative background blobs drift on an infinite loop, pausing automatically via IntersectionObserver when the block is scrolled offscreen and via the Page Visibility API when the tab is hidden.
→prefers-reduced-motion removes the blob drift and the hover-capsule spring (capsule still appears, just without animated easing).
→showBackdropCards toggles the three small mock content cards under the hero copy.

Accessibility

✓Nav is a labelled <nav aria-label="Primary">; the hamburger button has a dynamic aria-label and aria-expanded state.
✓All links are real <a> elements that preventDefault instead of navigating, so focus and keyboard activation behave normally.
✓Mobile sheet items are reachable by keyboard and each click closes the sheet, returning focus flow to the page.
✓Decorative dot-grid and glow blobs are aria-hidden.
✓Honours prefers-reduced-motion.