"use client"; import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState, } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { cn } from "@/lib/utils"; export type GooeyNavItem = { id: string; label: string }; type Pos = { x: number; width: number }; const EASE: [number, number, number, number] = [0.16, 1, 0.3, 1]; // Fast spring rides the leading edge, slow spring lags behind so the two // blobs overlap mid-transit and the SVG goo filter merges them into a // stretching liquid bridge. const LEAD_SPRING = { type: "spring", stiffness: 320, damping: 30, mass: 1 } as const; const TRAIL_SPRING = { type: "spring", stiffness: 120, damping: 17, mass: 1.1 } as const; export function GooeyNav({ items, autoAdvance = true, interval = 2200, onActiveChange, className, }: { items: GooeyNavItem[]; autoAdvance?: boolean; interval?: number; onActiveChange?: (index: number) => void; className?: string; }) { const rawId = useId(); const gooId = `goo-${rawId.replace(/:/g, "")}`; const gooRef = useRef(null); const itemRefs = useRef>([]); const [positions, setPositions] = useState([]); const [active, setActive] = useState(0); const [paused, setPaused] = useState(false); const [ready, setReady] = useState(false); const measure = useCallback(() => { const base = gooRef.current; if (!base) return; const b = base.getBoundingClientRect(); const next: Pos[] = itemRefs.current.map((el) => { if (!el) return { x: 0, width: 0 }; const r = el.getBoundingClientRect(); return { x: Math.round(r.left - b.left), width: Math.round(r.width) }; }); setPositions(next); setReady(true); }, []); useLayoutEffect(() => { measure(); }, [measure, items]); useEffect(() => { measure(); const base = gooRef.current; if (!base) return; const ro = new ResizeObserver(() => measure()); ro.observe(base); window.addEventListener("resize", measure); let cancelled = false; if (typeof document !== "undefined" && "fonts" in document) { document.fonts.ready.then(() => { if (!cancelled) measure(); }); } return () => { cancelled = true; ro.disconnect(); window.removeEventListener("resize", measure); }; }, [measure]); useEffect(() => { if (!autoAdvance || paused || items.length <= 1) return; const t = window.setInterval(() => { setActive((a) => (a + 1) % items.length); }, interval); return () => window.clearInterval(t); }, [autoAdvance, paused, interval, items.length]); useEffect(() => { onActiveChange?.(active); }, [active, onActiveChange]); const pos = positions[active] ?? { x: 0, width: 0 }; return (

{/* Hidden goo filter. High alpha gain on the blurred layer snaps the soft edges back into a crisp metaball silhouette. */}

setPaused(true)} onMouseLeave={() => setPaused(false)} className="relative isolate inline-flex rounded-full border border-white/10 bg-panel/90 p-1.5 shadow-[0_1px_0_0_rgba(255,255,255,0.05)_inset,0_20px_50px_-30px_rgba(0,0,0,0.9)] backdrop-blur-sm" > {/* Liquid layer. Provides the trailing tail that merges into the pill. */}

{ready && ( <> )}

{/* Crisp active pill. Rides the leading edge, carries the highlight and glow. */}

{ready && (

)}

{/* Labels */}

); } export default function Demo() { const items: GooeyNavItem[] = [ { id: "overview", label: "Overview" }, { id: "analytics", label: "Analytics" }, { id: "automations", label: "Automations" }, { id: "members", label: "Members" }, { id: "billing", label: "Billing" }, ]; const copy: Record = { overview: { title: "Your workspace at a glance", body: "Signals, activity, and health across every project in one calm view.", }, analytics: { title: "Metrics that actually move", body: "Track adoption, retention, and revenue with charts that stay current.", }, automations: { title: "Work that runs itself", body: "Chain triggers and actions so routine handoffs happen without a nudge.", }, members: { title: "Everyone in the loop", body: "Invite teammates, set roles, and keep permissions tidy as you scale.", }, billing: { title: "Clarity on every charge", body: "Plans, invoices, and usage laid out plainly, no surprises at renewal.", }, }; const [active, setActive] = useState(0); const handleActive = useCallback((i: number) => setActive(i), []); const current = items[active]; const content = copy[current.id]; return (

Live navigation

{content.title}

{content.body}

); }

Gooey Nav

Your workspace at a glance