apex-ui-kit 2.1.3 → 2.3.0

package/dist/ApexUI-Kit/templates/FloatingNavbar/FloatingNavbar.jsx

@@ -0,0 +1,162 @@
+import React, { useEffect, useId, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { ArrowUpRight } from "lucide-react";
+
+/*
+ * Floating Navbar: a glassy pill that floats over the page. A highlight
+ * follows the pointer across the links, the active link keeps a dot, and the
+ * bar tucks away when you scroll down and slides back when you scroll up.
+ * It switches to a hamburger menu based on its own width (container query),
+ * so it is responsive wherever you put it.
+ */
+
+const DEFAULT_LINKS = [
+    { label: "Home", href: "#home" },
+    { label: "Components", href: "#components" },
+    { label: "Templates", href: "#templates" },
+    { label: "Pricing", href: "#pricing" },
+    { label: "Blog", href: "#blog" },
+];
+
+function Burger({ open }) {
+    return (
+        <span className="relative block h-3.5 w-5" aria-hidden="true">
+            <motion.span className="absolute left-0 top-0 h-[2px] w-full rounded-full bg-current" animate={open ? { top: "50%", rotate: 45, y: "-50%" } : { top: "0%", rotate: 0, y: 0 }} />
+            <motion.span className="absolute left-0 top-1/2 h-[2px] w-full -translate-y-1/2 rounded-full bg-current" animate={{ opacity: open ? 0 : 1, scaleX: open ? 0.3 : 1 }} />
+            <motion.span className="absolute bottom-0 left-0 h-[2px] w-full rounded-full bg-current" animate={open ? { bottom: "50%", rotate: -45, y: "50%" } : { bottom: "0%", rotate: 0, y: 0 }} />
+        </span>
+    );
+}
+
+const FloatingNavbar = ({
+    brand = "Apex",
+    links = DEFAULT_LINKS,
+    cta = { label: "Get started", href: "#start" },
+    active: activeProp,
+    onNavigate,
+    hideOnScroll = true,
+    scrollRoot,
+    accentColor = "#a3e635",
+    theme = "dark",
+    className = "",
+}) => {
+    const id = useId();
+    const [active, setActive] = useState(activeProp ?? links[0]?.label);
+    const [hover, setHover] = useState(null);
+    const [open, setOpen] = useState(false);
+    const [hidden, setHidden] = useState(false);
+    const [compact, setCompact] = useState(false);
+    const dark = theme !== "light";
+
+    // Hide on scroll down, show on scroll up; compact once the page has moved.
+    useEffect(() => {
+        const root = scrollRoot?.current ?? window;
+        const read = () => (root === window ? window.scrollY : root.scrollTop);
+        let last = read();
+        const onScroll = () => {
+            const y = read();
+            setCompact(y > 24);
+            if (hideOnScroll && Math.abs(y - last) > 6) setHidden(y > last && y > 80);
+            last = y;
+        };
+        root.addEventListener("scroll", onScroll, { passive: true });
+        return () => root.removeEventListener("scroll", onScroll);
+    }, [hideOnScroll, scrollRoot]);
+
+    const go = (link, e) => {
+        setActive(link.label);
+        setOpen(false);
+        onNavigate?.(link, e);
+    };
+
+    const surface = dark ? "border-white/10 bg-neutral-900/70 text-white shadow-[0_10px_40px_-12px_rgba(0,0,0,0.7)]" : "border-black/10 bg-white/75 text-neutral-900 shadow-[0_10px_40px_-14px_rgba(0,0,0,0.25)]";
+    const muted = dark ? "text-white/65 hover:text-white" : "text-neutral-500 hover:text-neutral-900";
+
+    return (
+        <div className={`@container sticky top-3 z-50 w-full px-3 ${className}`}>
+            <motion.nav
+                aria-label="Main"
+                initial={false}
+                animate={{ y: hidden && !open ? "-140%" : "0%", opacity: hidden && !open ? 0 : 1 }}
+                transition={{ type: "spring", stiffness: 380, damping: 34 }}
+                className={`mx-auto max-w-4xl rounded-[1.6rem] border backdrop-blur-xl transition-[padding] duration-300 ${surface} ${compact ? "px-2.5 py-1.5" : "px-3 py-2.5"}`}
+            >
+                <div className="flex items-center justify-between gap-3">
+                    <a href="#home" onClick={(e) => go(links[0], e)} className="flex items-center gap-2 pl-1.5 text-[0.95rem] font-bold">
+                        <motion.span whileHover={{ rotate: -12, scale: 1.08 }} className="grid h-8 w-8 place-items-center rounded-xl text-sm font-black text-black" style={{ background: accentColor }}>
+                            {brand[0]}
+                        </motion.span>
+                        {brand}
+                    </a>
+
+                    {/* Desktop links with a pill that follows the pointer. */}
+                    <ul className="hidden items-center gap-0.5 @xl:flex" onPointerLeave={() => setHover(null)}>
+                        {links.map((link) => {
+                            const on = active === link.label;
+                            return (
+                                <li key={link.label} className="relative">
+                                    <a
+                                        href={link.href}
+                                        onClick={(e) => go(link, e)}
+                                        onPointerEnter={() => setHover(link.label)}
+                                        aria-current={on ? "page" : undefined}
+                                        className={`relative block rounded-full px-3 py-2 text-[0.86rem] font-medium transition-colors ${on ? "" : muted}`}
+                                    >
+                                        {hover === link.label && <motion.span layoutId={`${id}-hover`} className={`absolute inset-0 rounded-full ${dark ? "bg-white/[0.08]" : "bg-black/[0.05]"}`} transition={{ type: "spring", stiffness: 500, damping: 38 }} />}
+                                        <span className="relative">{link.label}</span>
+                                        {on && <motion.span layoutId={`${id}-dot`} className="absolute bottom-0.5 left-1/2 h-1 w-1 -translate-x-1/2 rounded-full" style={{ background: accentColor }} />}
+                                    </a>
+                                </li>
+                            );
+                        })}
+                    </ul>
+
+                    <div className="flex items-center gap-1.5">
+                        {cta && (
+                            <motion.a
+                                href={cta.href}
+                                whileHover={{ scale: 1.04 }}
+                                whileTap={{ scale: 0.96 }}
+                                className="hidden items-center gap-1 rounded-full px-4 py-2 text-[0.85rem] font-semibold text-black @3xl:inline-flex"
+                                style={{ background: accentColor }}
+                            >
+                                {cta.label}
+                                <ArrowUpRight className="h-4 w-4" />
+                            </motion.a>
+                        )}
+                        <button type="button" aria-label={open ? "Close menu" : "Open menu"} aria-expanded={open} onClick={() => setOpen((o) => !o)} className={`grid h-10 w-10 place-items-center rounded-full @xl:hidden ${dark ? "hover:bg-white/10" : "hover:bg-black/5"}`}>
+                            <Burger open={open} />
+                        </button>
+                    </div>
+                </div>
+
+                {/* Mobile menu */}
+                <AnimatePresence initial={false}>
+                    {open && (
+                        <motion.div initial={{ height: 0, opacity: 0 }} animate={{ height: "auto", opacity: 1 }} exit={{ height: 0, opacity: 0 }} transition={{ duration: 0.3, ease: [0.22, 1, 0.36, 1] }} className="overflow-hidden @xl:hidden">
+                            <ul className="space-y-1 px-1 pb-2 pt-3">
+                                {links.map((link, i) => (
+                                    <motion.li key={link.label} initial={{ x: -14, opacity: 0 }} animate={{ x: 0, opacity: 1 }} transition={{ delay: 0.04 * i + 0.05 }}>
+                                        <a href={link.href} onClick={(e) => go(link, e)} className={`flex items-center justify-between rounded-2xl px-4 py-3 text-[0.95rem] font-medium ${active === link.label ? (dark ? "bg-white/[0.08]" : "bg-black/[0.05]") : ""}`}>
+                                            {link.label}
+                                            {active === link.label && <span className="h-1.5 w-1.5 rounded-full" style={{ background: accentColor }} />}
+                                        </a>
+                                    </motion.li>
+                                ))}
+                                {cta && (
+                                    <motion.li initial={{ y: 8, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ delay: 0.04 * links.length + 0.08 }} className="pt-2">
+                                        <a href={cta.href} className="flex items-center justify-center gap-1 rounded-2xl py-3 text-[0.95rem] font-semibold text-black" style={{ background: accentColor }}>
+                                            {cta.label} <ArrowUpRight className="h-4 w-4" />
+                                        </a>
+                                    </motion.li>
+                                )}
+                            </ul>
+                        </motion.div>
+                    )}
+                </AnimatePresence>
+            </motion.nav>
+        </div>
+    );
+};
+
+export default FloatingNavbar;

package/dist/ApexUI-Kit/templates/Folder/Folder.jsx

@@ -0,0 +1,101 @@
+import React, { useState } from "react";
+import { motion } from "framer-motion";
+
+/*
+ * Folder: a little folder that opens on click — the front flap tilts down
+ * and up to three papers fan out of it. While open, each paper leans toward
+ * the pointer a little. Click again to tuck everything back in.
+ */
+
+const DEFAULT_ITEMS = [
+    <div key="a" className="space-y-1.5 p-2">
+        <p className="text-[0.55rem] font-bold text-neutral-800">Notes.md</p>
+        {[85, 60, 72].map((w) => (
+            <span key={w} className="block h-1 rounded-full bg-neutral-300" style={{ width: `${w}%` }} />
+        ))}
+    </div>,
+    <div key="b" className="space-y-1.5 p-2">
+        <p className="text-[0.55rem] font-bold text-neutral-800">Plan.pdf</p>
+        {[70, 90, 50].map((w) => (
+            <span key={w} className="block h-1 rounded-full bg-neutral-300" style={{ width: `${w}%` }} />
+        ))}
+    </div>,
+    <div key="c" className="space-y-1.5 p-2">
+        <p className="text-[0.55rem] font-bold text-neutral-800">Logo.png</p>
+        <span className="block h-7 rounded bg-gradient-to-br from-lime-300 to-cyan-300" />
+    </div>,
+];
+
+// Where each paper lands when open, in em (scales with `size`).
+const SPOTS = [
+    { x: -3.9, y: -3.3, r: -14 },
+    { x: 0, y: -4.2, r: 3 },
+    { x: 3.9, y: -3.3, r: 15 },
+];
+
+const Folder = ({ color = "#a3e635", size = 1, items = DEFAULT_ITEMS, label = "Projects", className = "" }) => {
+    const [open, setOpen] = useState(false);
+    const [lean, setLean] = useState([]);
+    const papers = items.slice(0, 3);
+    const back = `color-mix(in srgb, ${color} 75%, #000)`;
+
+    return (
+        <div className={`flex flex-col items-center gap-4 ${className}`} style={{ fontSize: `${size}rem` }}>
+            <button
+                type="button"
+                aria-expanded={open}
+                aria-label={`${label} folder`}
+                onClick={() => {
+                    setOpen((o) => !o);
+                    setLean([]);
+                }}
+                className="group relative h-[5.5em] w-[7em] outline-none transition-transform duration-200 hover:-translate-y-1"
+                style={{ perspective: "600px" }}
+            >
+                {/* Back panel with tab */}
+                <span className="absolute inset-0 rounded-[0.6em] rounded-tl-none" style={{ background: back }} />
+                <span className="absolute -top-[0.7em] left-0 h-[0.9em] w-[2.6em] rounded-t-[0.45em]" style={{ background: back }} />
+
+                {papers.map((p, i) => {
+                    const spot = SPOTS[papers.length === 1 ? 1 : papers.length === 2 ? i * 2 : i];
+                    const l = lean[i] ?? { x: 0, y: 0 };
+                    return (
+                        <motion.span
+                            key={i}
+                            className="absolute bottom-[10%] left-[10%] h-[80%] w-[80%] overflow-hidden rounded-[0.4em] bg-white text-left shadow-md"
+                            initial={false}
+                            animate={open ? { x: `${spot.x + l.x}em`, y: `${spot.y + l.y}em`, rotate: spot.r, scale: 1 } : { x: "0em", y: `${-0.3 - i * 0.2}em`, rotate: 0, scale: 0.92 - (2 - i) * 0.03 }}
+                            transition={{ type: "spring", stiffness: 300, damping: 22, delay: open ? i * 0.04 : 0 }}
+                            onPointerMove={(e) => {
+                                if (!open) return;
+                                const r = e.currentTarget.getBoundingClientRect();
+                                const next = [...lean];
+                                next[i] = { x: ((e.clientX - (r.left + r.width / 2)) / r.width) * 0.8, y: ((e.clientY - (r.top + r.height / 2)) / r.height) * 0.8 };
+                                setLean(next);
+                            }}
+                            onPointerLeave={() => {
+                                const next = [...lean];
+                                next[i] = { x: 0, y: 0 };
+                                setLean(next);
+                            }}
+                        >
+                            {p}
+                        </motion.span>
+                    );
+                })}
+
+                {/* Front flap */}
+                <motion.span
+                    className="absolute inset-x-0 bottom-0 h-[85%] origin-bottom rounded-[0.6em] shadow-[0_-4px_12px_rgba(0,0,0,0.12)]"
+                    style={{ background: `linear-gradient(180deg, color-mix(in srgb, ${color} 85%, #fff), ${color})` }}
+                    initial={false}
+                    animate={{ rotateX: open ? -38 : 0 }}
+                    transition={{ type: "spring", stiffness: 260, damping: 20 }}
+                />
+            </button>
+            <span className="text-sm font-medium opacity-70">{label}</span>
+        </div>
+    );
+};
+
+export default Folder;

package/dist/ApexUI-Kit/templates/GlitchText/GlitchText.jsx

@@ -0,0 +1,56 @@
+import React, { useEffect, useRef, useState } from "react";
+import { useReducedMotion } from "framer-motion";
+
+/*
+ * Glitch Text: two colored copies of the text sit behind it and jump
+ * around in random horizontal slices, like a broken signal. Runs all the
+ * time or only while hovered.
+ */
+
+const slice = () => {
+    const top = Math.random() * 90;
+    return `inset(${top}% 0 ${Math.max(0, 100 - top - (6 + Math.random() * 22))}% 0)`;
+};
+
+const GlitchText = ({ text = "GLITCH", colors = ["#22d3ee", "#f43f5e"], speed = 90, hoverOnly = false, className = "" }) => {
+    const reduced = useReducedMotion();
+    const [hover, setHover] = useState(false);
+    const a = useRef(null);
+    const b = useRef(null);
+    const active = !reduced && (!hoverOnly || hover);
+
+    useEffect(() => {
+        const layers = [a.current, b.current];
+        if (!active) {
+            layers.forEach((el) => {
+                el.style.clipPath = "inset(50% 0 50% 0)";
+                el.style.transform = "none";
+            });
+            return undefined;
+        }
+        const id = setInterval(() => {
+            layers.forEach((el, i) => {
+                const burst = Math.random() < 0.25;
+                el.style.clipPath = slice();
+                el.style.transform = `translate(${(i ? 1 : -1) * (burst ? 6 + Math.random() * 6 : 1 + Math.random() * 3)}px, ${(Math.random() - 0.5) * 2}px)`;
+            });
+        }, speed);
+        return () => clearInterval(id);
+    }, [active, speed]);
+
+    const layer = "pointer-events-none absolute inset-0 select-none";
+    return (
+        <span className={`relative inline-block font-black tracking-tight ${className}`} onPointerEnter={() => setHover(true)} onPointerLeave={() => setHover(false)}>
+            <span>{text}</span>
+            {/* Sliced, shifted copies painted over the text. */}
+            <span ref={a} aria-hidden="true" className={layer} style={{ color: colors[0], clipPath: "inset(50% 0 50% 0)" }}>
+                {text}
+            </span>
+            <span ref={b} aria-hidden="true" className={layer} style={{ color: colors[1], clipPath: "inset(50% 0 50% 0)" }}>
+                {text}
+            </span>
+        </span>
+    );
+};
+
+export default GlitchText;

package/dist/ApexUI-Kit/templates/GooeyNav/GooeyNav.jsx

@@ -0,0 +1,310 @@
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+
+/*
+ * Gooey Nav: the active pill is drawn in WebGL as a metaball. A fragment
+ * shader smooth-unions a capsule (the pill) with a handful of droplets, so
+ * they genuinely melt into each other. When you switch links the pill's
+ * leading edge races ahead and the trailing edge catches up (it stretches,
+ * thins, then snaps back) and droplets burst out and get pulled back in.
+ * Labels are plain HTML on top, so they stay crisp and accessible. Falls
+ * back to a CSS pill without WebGL.
+ */
+
+const DEFAULT_ITEMS = [
+    { label: "Home", href: "#" },
+    { label: "Components", href: "#" },
+    { label: "Templates", href: "#" },
+    { label: "Docs", href: "#" },
+];
+
+const MAX_DROPS = 14;
+const PAD = 22; // canvas bleed around the bar, for drops and glow (px)
+
+const VERT = `
+attribute vec2 aPos;
+void main() { gl_Position = vec4(aPos, 0.0, 1.0); }
+`;
+
+const FRAG = `
+precision highp float;
+uniform vec2 uRes;
+uniform float uDpr;
+uniform vec4 uPill;
+uniform vec4 uDrops[${MAX_DROPS}];
+uniform vec3 uColor;
+uniform float uGoo;
+uniform float uGlow;
+
+float sdCapsule(vec2 p, vec2 halfSize) {
+    float r = min(halfSize.x, halfSize.y);
+    vec2 q = abs(p) - halfSize + r;
+    return length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - r;
+}
+
+float smin(float a, float b, float k) {
+    float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0);
+    return mix(b, a, h) - k * h * (1.0 - h);
+}
+
+void main() {
+    // Pixel position in CSS px, origin top-left.
+    vec2 p = vec2(gl_FragCoord.x, uRes.y - gl_FragCoord.y) / uDpr;
+    vec2 c = uPill.xy + uPill.zw * 0.5;
+    float d = sdCapsule(p - c, uPill.zw * 0.5);
+    for (int i = 0; i < ${MAX_DROPS}; i++) {
+        vec4 dr = uDrops[i];
+        if (dr.z > 0.01) d = smin(d, length(p - dr.xy) - dr.z, uGoo);
+    }
+    float aa = 0.8;
+    float body = 1.0 - smoothstep(-aa, aa, d);
+    // Soft top highlight and darker bottom for a bit of volume.
+    float v = clamp((p.y - uPill.y) / max(uPill.w, 1.0), 0.0, 1.0);
+    vec3 col = uColor * (1.08 - 0.18 * v);
+    float rim = smoothstep(-3.0, 0.0, d) * body * 0.12;
+    col += rim;
+    float glow = exp(-max(d, 0.0) / 5.0) * uGlow * (1.0 - body);
+    float a = body + glow;
+    gl_FragColor = vec4(col * a, a);
+}
+`;
+
+const hexToRgb = (hex) => {
+    let h = String(hex).replace("#", "");
+    if (h.length === 3) h = h.split("").map((c) => c + c).join("");
+    const n = parseInt(h.slice(0, 6), 16);
+    if (Number.isNaN(n)) return [0.64, 0.9, 0.21];
+    return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255];
+};
+
+function createGL(canvas) {
+    const gl = canvas.getContext("webgl", { premultipliedAlpha: true, antialias: false, alpha: true });
+    if (!gl) return null;
+    const compile = (type, src) => {
+        const s = gl.createShader(type);
+        gl.shaderSource(s, src);
+        gl.compileShader(s);
+        return gl.getShaderParameter(s, gl.COMPILE_STATUS) ? s : null;
+    };
+    const vs = compile(gl.VERTEX_SHADER, VERT);
+    const fs = compile(gl.FRAGMENT_SHADER, FRAG);
+    if (!vs || !fs) return null;
+    const prog = gl.createProgram();
+    gl.attachShader(prog, vs);
+    gl.attachShader(prog, fs);
+    gl.linkProgram(prog);
+    if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) return null;
+    gl.useProgram(prog);
+    const buf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
+    const loc = gl.getAttribLocation(prog, "aPos");
+    gl.enableVertexAttribArray(loc);
+    gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
+    const u = (n) => gl.getUniformLocation(prog, n);
+    return { gl, uRes: u("uRes"), uDpr: u("uDpr"), uPill: u("uPill"), uDrops: u("uDrops"), uColor: u("uColor"), uGoo: u("uGoo"), uGlow: u("uGlow") };
+}
+
+// One spring integration step.
+const step = (s, target, k, c, dt) => {
+    const a = k * (target - s.x) - c * s.v;
+    s.v += a * dt;
+    s.x += s.v * dt;
+};
+
+const GooeyNav = ({ items = DEFAULT_ITEMS, initialActive = 0, onChange, accentColor = "#a3e635", particleCount = 8, goo = 12, theme = "dark", className = "" }) => {
+    const [active, setActive] = useState(initialActive);
+    const [fallback, setFallback] = useState(false);
+    const bar = useRef(null);
+    const canvas = useRef(null);
+    const fallbackPill = useRef(null);
+    const links = useRef([]);
+    const sim = useRef(null);
+    const color = useRef(hexToRgb(accentColor));
+    const gooRef = useRef(goo);
+    const glowRef = useRef(theme === "light" ? 0 : 0.22);
+    const dark = theme !== "light";
+
+    useEffect(() => {
+        color.current = hexToRgb(accentColor);
+        gooRef.current = goo;
+        glowRef.current = theme === "light" ? 0 : 0.22;
+        if (sim.current) sim.current.dirty = true;
+    }, [accentColor, goo, theme]);
+
+    const measure = (i) => {
+        const el = links.current[i];
+        const b = bar.current;
+        if (!el || !b) return null;
+        const a = el.getBoundingClientRect();
+        const p = b.getBoundingClientRect();
+        return { l: a.left - p.left + PAD, r: a.right - p.left + PAD, t: a.top - p.top + PAD, h: a.height };
+    };
+
+    // Set up GL + simulation once.
+    useLayoutEffect(() => {
+        const cv = canvas.current;
+        const ctx = createGL(cv);
+        if (!ctx) setFallback(true);
+        const m = measure(active) ?? { l: 0, r: 0, t: 0, h: 0 };
+        const s = {
+            l: { x: m.l, v: 0 },
+            r: { x: m.r, v: 0 },
+            t: { x: m.t, v: 0 },
+            h: { x: m.h, v: 0 },
+            target: m,
+            activeIndex: active,
+            dir: 1,
+            drops: [],
+            dirty: true,
+            dpr: 1,
+        };
+        sim.current = s;
+
+        const resize = () => {
+            const r = bar.current.getBoundingClientRect();
+            s.dpr = Math.min(window.devicePixelRatio || 1, 2);
+            const w = r.width + PAD * 2;
+            const h = r.height + PAD * 2;
+            cv.width = Math.round(w * s.dpr);
+            cv.height = Math.round(h * s.dpr);
+            cv.style.width = `${w}px`;
+            cv.style.height = `${h}px`;
+            const t = measure(s.activeIndex);
+            if (t) {
+                s.target = t;
+                s.l.x = t.l;
+                s.r.x = t.r;
+                s.t.x = t.t;
+                s.h.x = t.h;
+                s.l.v = s.r.v = s.t.v = s.h.v = 0;
+            }
+            s.dirty = true;
+        };
+        resize();
+        const ro = new ResizeObserver(resize);
+        ro.observe(bar.current);
+
+        const dropData = new Float32Array(MAX_DROPS * 4);
+        let raf = 0;
+        let last = performance.now();
+        const frame = (now) => {
+            const dt = Math.min(0.033, (now - last) / 1000);
+            last = now;
+            const T = s.target;
+            // Leading edge is stiff, trailing edge is loose → stretch.
+            const lead = [520, 30];
+            const trail = [170, 17];
+            const [kl, cl] = s.dir > 0 ? trail : lead;
+            const [kr, cr] = s.dir > 0 ? lead : trail;
+            step(s.l, T.l, kl, cl, dt);
+            step(s.r, T.r, kr, cr, dt);
+            step(s.t, T.t, 400, 32, dt);
+            step(s.h, T.h, 400, 32, dt);
+
+            // Thin the pill while it is stretched (keeps the "volume").
+            const w = s.r.x - s.l.x;
+            const restW = T.r - T.l || 1;
+            const stretch = Math.max(0, w / restW - 1);
+            const h = s.h.x * (1 - Math.min(0.32, stretch * 0.35));
+            const top = s.t.x + (s.h.x - h) / 2;
+
+            // Droplets fly out, then a spring pulls them back to the pill centre.
+            const cx = (s.l.x + s.r.x) / 2;
+            const cy = top + h / 2;
+            s.drops = s.drops.filter((d) => (d.life -= dt) > 0);
+            for (const d of s.drops) {
+                d.vx += ((cx - d.x) * d.k - d.vx * 5) * dt;
+                d.vy += ((cy - d.y) * d.k - d.vy * 5) * dt;
+                d.x += d.vx * dt;
+                d.y += d.vy * dt;
+            }
+
+            const moving = s.drops.length > 0 || [s.l, s.r, s.t, s.h].some((q) => Math.abs(q.v) > 0.5) || Math.abs(s.l.x - T.l) > 0.3 || Math.abs(s.r.x - T.r) > 0.3;
+            if (moving || s.dirty) {
+                s.dirty = false;
+                if (ctx) {
+                    const { gl } = ctx;
+                    gl.viewport(0, 0, cv.width, cv.height);
+                    gl.clearColor(0, 0, 0, 0);
+                    gl.clear(gl.COLOR_BUFFER_BIT);
+                    gl.uniform2f(ctx.uRes, cv.width, cv.height);
+                    gl.uniform1f(ctx.uDpr, s.dpr);
+                    gl.uniform4f(ctx.uPill, s.l.x, top, Math.max(1, w), Math.max(1, h));
+                    dropData.fill(0);
+                    s.drops.slice(0, MAX_DROPS).forEach((d, i) => {
+                        const life = Math.max(0, d.life / d.max);
+                        dropData.set([d.x, d.y, d.r * Math.min(1, life * 1.6), 1], i * 4);
+                    });
+                    gl.uniform4fv(ctx.uDrops, dropData);
+                    gl.uniform3fv(ctx.uColor, color.current);
+                    gl.uniform1f(ctx.uGoo, gooRef.current);
+                    gl.uniform1f(ctx.uGlow, glowRef.current);
+                    gl.drawArrays(gl.TRIANGLES, 0, 3);
+                } else if (fallbackPill.current) {
+                    Object.assign(fallbackPill.current.style, { left: `${s.l.x - PAD}px`, top: `${top - PAD}px`, width: `${w}px`, height: `${h}px` });
+                }
+            }
+            raf = requestAnimationFrame(frame);
+        };
+        raf = requestAnimationFrame(frame);
+        return () => {
+            cancelAnimationFrame(raf);
+            ro.disconnect();
+            ctx?.gl.getExtension("WEBGL_lose_context")?.loseContext();
+        };
+        // Built once per item count; later selections go through sim.current.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [items.length]);
+
+    const select = (i, e) => {
+        e?.preventDefault();
+        const s = sim.current;
+        if (i === active || !s) return;
+        const t = measure(i);
+        if (!t) return;
+        s.dir = i > active ? 1 : -1;
+        s.target = t;
+        s.activeIndex = i;
+        setActive(i);
+        onChange?.(i, items[i]);
+        if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+            s.l.x = t.l;
+            s.r.x = t.r;
+            s.dirty = true;
+            return;
+        }
+        const cx = (t.l + t.r) / 2;
+        const cy = t.t + t.h / 2;
+        // Burst at the destination; the droplets get pulled back into the pill.
+        for (let k = 0; k < particleCount; k++) {
+            const a = (Math.PI * 2 * k) / particleCount + (Math.random() - 0.5) * 0.6;
+            const sp = 120 + Math.random() * 110;
+            const max = 0.75 + Math.random() * 0.3;
+            s.drops.push({ x: cx, y: cy, vx: Math.cos(a) * sp * 1.5, vy: Math.sin(a) * sp * 0.55, r: 4 + Math.random() * 4, k: 55, life: max, max });
+        }
+        if (s.drops.length > MAX_DROPS) s.drops.splice(0, s.drops.length - MAX_DROPS);
+    };
+
+    return (
+        <nav className={`relative inline-flex max-w-full ${className}`} aria-label="Main">
+            <div ref={bar} className={`relative flex items-center gap-0.5 rounded-full p-1.5 ${dark ? "bg-neutral-950 ring-1 ring-white/10" : "bg-white shadow-sm ring-1 ring-black/10"}`}>
+                <canvas ref={canvas} aria-hidden="true" className="pointer-events-none absolute" style={{ left: -PAD, top: -PAD, display: fallback ? "none" : "block" }} />
+                {fallback && <span ref={fallbackPill} aria-hidden="true" className="pointer-events-none absolute rounded-full" style={{ background: accentColor }} />}
+                {items.map((item, i) => (
+                    <a
+                        key={i}
+                        ref={(el) => (links.current[i] = el)}
+                        href={item.href}
+                        onClick={(e) => select(i, e)}
+                        aria-current={i === active ? "page" : undefined}
+                        className={`relative z-[1] shrink-0 rounded-full px-3.5 py-2.5 text-[0.95rem] font-medium outline-none transition-colors duration-300 focus-visible:ring-2 focus-visible:ring-current/30 sm:px-5 ${i === active ? "text-neutral-950" : dark ? "text-white/65 hover:text-white" : "text-neutral-500 hover:text-neutral-900"}`}
+                    >
+                        {item.label}
+                    </a>
+                ))}
+            </div>
+        </nav>
+    );
+};
+
+export default GooeyNav;