# Navbar with Liquid Stretch Highlight and Inverting Labels > Navbar where a lime blob stretches between links like liquid and the label text inverts exactly where the blob covers it. Free React and HTML code to copy. A shadcn/ui block from the [@weinc](https://we.inc/components?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/weinc/navbar-with-liquid-stretch-highlight-and-inverting-labels). - Page, with a live preview: https://shadcn.exchange/r/weinc/navbar-with-liquid-stretch-highlight-and-inverting-labels - Screenshot: https://shadcn.exchange/shot/weinc/navbar-with-liquid-stretch-highlight-and-inverting-labels/light.png - Registry item: https://we.inc/r/navbar-with-liquid-stretch-highlight-and-inverting-labels.json - Listed: 2026-10-28, source last changed 2026-10-28 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/weinc/navbar-with-liquid-stretch-highlight-and-inverting-labels.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Dependencies - npm packages: `framer-motion`, `lucide-react` ## Files ### `components/we-inc/navbar-with-liquid-stretch-highlight-and-inverting-labels.tsx` ```tsx import { useCallback, useEffect, useRef, useState } from "react"; import { animate, motion, useInView, useMotionTemplate, useMotionValue, useReducedMotion, useTransform } from "framer-motion"; import { ArrowUpRight } from "lucide-react"; const links = ["Work", "Studio", "Journal", "Shop", "Contact"]; // The edge that leads the move is stiff, the edge that trails is loose: that gap is the stretch. const LEAD = { type: "spring", stiffness: 520, damping: 34, mass: 0.7 } as const; const TRAIL = { type: "spring", stiffness: 150, damping: 15, mass: 0.9 } as const; const PAD = 5; // gap between the blob and the edge of the bar const DEMO_MS = 1150; const chairs = [ { name: "Oda lounge chair", price: "$1,240", tone: "bg-lime-300", seat: "#1c1917" }, { name: "Tern side table", price: "$380", tone: "bg-stone-900", seat: "#bef264" }, { name: "Halde bench", price: "$910", tone: "bg-orange-200", seat: "#1c1917" }, ]; export default function NavbarWithLiquidStretchHighlightAndInvertingLabels() { const reduce = useReducedMotion(); const rootRef = useRef(null); const barRef = useRef(null); const itemRefs = useRef<(HTMLLIElement | null)[]>([]); const inView = useInView(rootRef, { amount: 0.3 }); const [active, setActive] = useState(0); const [hover, setHover] = useState(null); const [demo, setDemo] = useState(true); const [ready, setReady] = useState(false); const left = useMotionValue(0); const right = useMotionValue(0); const rest = useMotionValue(1); // width the blob settles at const barW = useMotionValue(0); const target = hover ?? active; // Squash the blob vertically while it is stretched wider than its resting width. const squash = useTransform([left, right, rest], ([l, r, w]: number[]) => { const extra = Math.max(0, r - l - w); return PAD + Math.min(7, extra * 0.07); }); const rightInset = useTransform([right, barW], ([r, w]: number[]) => Math.max(0, w - r)); const clip = useMotionTemplate`inset(${squash}px ${rightInset}px ${squash}px ${left}px round 999px)`; const moveTo = useCallback( (index: number, instant: boolean) => { const bar = barRef.current; const el = itemRefs.current[index]; if (!bar || !el) return; const l = el.offsetLeft; const r = l + el.offsetWidth; barW.set(bar.offsetWidth); rest.set(el.offsetWidth); if (instant) { left.set(l); right.set(r); return; } const goingRight = l >= left.get(); animate(left, l, goingRight ? TRAIL : LEAD); animate(right, r, goingRight ? LEAD : TRAIL); }, [barW, left, rest, right], ); // First paint and every resize: snap, do not animate. useEffect(() => { const bar = barRef.current; if (!bar) return; moveTo(target, true); setReady(true); const ro = new ResizeObserver(() => moveTo(target, true)); ro.observe(bar); return () => ro.disconnect(); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); useEffect(() => { if (!ready) return; moveTo(target, !!reduce); return () => { left.stop(); right.stop(); }; }, [target, ready, reduce, moveTo, left, right]); // Idle demo: the blob visits each link in turn until someone takes over. useEffect(() => { if (!demo || reduce || !inView) return; const order = [1, 3, 2, 4, 0]; let step = 0; const tick = () => { if (document.hidden) return; setActive(order[step % order.length]); step += 1; }; let id = window.setTimeout(function run() { tick(); id = window.setTimeout(run, DEMO_MS); }, 1400); return () => window.clearTimeout(id); }, [demo, reduce, inView]); const stop = () => setDemo(false); return (
Nordlow Book a visit

Autumn collection, made in small runs

Furniture that keeps its shape and loses its edges.

Steam-bent ash, wool from one mill and joints you can take apart with a coin. Every piece ships flat and outlives the sofa it replaces.

    {chairs.map((c, i) => (

  • {c.name}

    {c.price}

    • ))}
); } ```