Gooey Tabs

"use client";
import { useState } from "react";

/* The SVG blur + high-contrast alpha matrix is what melts the pill into the
   track as it travels — that filter is the whole effect. */
export function GooeyTabs({ tabs, width = 88 }: { tabs: string[]; width?: number }) {
  const [active, setActive] = useState(0);
  return (
    <div className="relative inline-flex rounded-full bg-muted p-1" style={{ filter: "url(#goo)" }}>
      {tabs.map((t, i) => (
        <button key={t} onClick={() => setActive(i)}
          className={`relative z-10 text-sm font-medium transition-colors ${active === i ? "text-brand-foreground" : "text-muted-foreground"}`}
          style={{ width, paddingBlock: 6 }}>
          {t}
        </button>
      ))}
      <span className="absolute top-1 rounded-full bg-brand transition-all duration-500"
        style={{ left: 4 + active * width, width, height: "calc(100% - 8px)" }} />
      <svg className="absolute size-0" aria-hidden>
        <defs>
          <filter id="goo">
            <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
            <feBlend in="SourceGraphic" in2="goo" />
          </filter>
        </defs>
      </svg>
    </div>
  );
}