# Liquid gooey tabs

> The tab indicator is a liquid drop that stretches and leaves a trail as it follows the pointer from tab to tab.

- Category: [Navigation](https://library.aimran.es/components/navigation)
- Built with: React + Motion
- Live editor: https://library.aimran.es/blocks/liquid-gooey-tabs
- Library: AIMRAN Library (https://library.aimran.es), free, no sign-up, by Aimran Oukham

## Where to use it

Tabs are everywhere in a feed: “For you”, “Following”, “Popular”, “Saved”. These animated tabs in React replace the usual underline with a drop of colour that stretches, lags behind itself and snaps together, so switching sections in a social app or a portfolio filter feels a little playful without getting in the way.

The drop follows the mouse only; on touch it simply flows to the tab you tapped. Viscosity sets how long the trail lasts, and a middle value tends to look best. Stick to three to five short labels, since the tabs share the width equally.

## Code

### React (Motion)

```tsx
import { useId, useRef, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";

const GOO_TABS = [
  { label: "For you", count: "24", text: "Picked from what you save and share." },
  { label: "Following", count: "48", text: "The latest from people and studios you follow." },
  { label: "Popular", count: "12", text: "What’s trending today in design and product." },
  {
    label: "Saved",
    count: "126",
    text: "Your saved items, newest first.",
  },
];

interface GooeyTabsProps {
  color?: string;
  goo?: number;
  followPointer?: boolean;
}

export default function GooeyTabs({
  color = "#ff4f7b",
  goo = 8,
  followPointer = true,
}: GooeyTabsProps) {
  const [active, setActive] = useState(0);
  const [hover, setHover] = useState<number | null>(null);
  const reduce = useReducedMotion();
  const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);
  const uid = useId().replace(/[^a-zA-Z0-9]/g, "");
  const filterId = "goo-" + uid;
  const n = GOO_TABS.length;
  const target = followPointer && hover !== null ? hover : active;
  const current = GOO_TABS[active]!;

  const select = (i: number) => {
    const k = (i + n) % n;
    setActive(k);
    tabRefs.current[k]?.focus();
  };

  const blob = (inset: string, scaleY: number, stiffness: number, damping: number) => (
    <motion.div
      className={"absolute left-0 rounded-full " + inset}
      style={{ width: 100 / n + "%", backgroundColor: color }}
      initial={false}
      animate={{ x: target * 100 + "%", scaleY }}
      transition={reduce ? { duration: 0 } : { type: "spring", stiffness, damping }}
    />
  );

  return (
    <div className="w-80 max-w-full text-[#1d1d1f] dark:text-[#f5f5f7]">
      <svg aria-hidden className="absolute h-0 w-0">
        <defs>
          <filter id={filterId}>
            <feGaussianBlur in="SourceGraphic" stdDeviation={goo} 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 24 -10"
            />
          </filter>
        </defs>
      </svg>

      <div
        role="tablist"
        aria-label="Feed sections"
        onPointerLeave={() => setHover(null)}
        onKeyDown={(e) => {
          const keys: Record<string, number> = {
            ArrowRight: active + 1,
            ArrowLeft: active - 1,
            Home: 0,
            End: n - 1,
          };
          const to = keys[e.key];
          if (to === undefined) return;
          e.preventDefault();
          select(to);
        }}
        className="relative grid grid-cols-4 rounded-full bg-white p-1 shadow-[0_1px_2px_rgba(0,0,0,0.04),0_10px_32px_rgba(0,0,0,0.07)] ring-1 ring-black/[0.06] dark:bg-[#1c1c1e] dark:shadow-[0_10px_32px_rgba(0,0,0,0.4)] dark:ring-white/10"
      >
        <div
          aria-hidden
          className="pointer-events-none absolute inset-1"
          style={{ filter: "url(#" + filterId + ")" }}
        >
          {blob("inset-y-0", 1, 340, 30)}
          {blob("inset-y-0.5", 0.85, 110, 15)}
          {blob("inset-y-1.5", 0.7, 65, 12)}
        </div>
        {GOO_TABS.map((tab, i) => (
          <button
            key={tab.label}
            ref={(el) => {
              tabRefs.current[i] = el;
            }}
            type="button"
            role="tab"
            id={uid + "-tab-" + i}
            aria-selected={active === i}
            aria-controls={uid + "-panel"}
            tabIndex={active === i ? 0 : -1}
            onClick={() => setActive(i)}
            onPointerEnter={(e) => {
              if (e.pointerType === "mouse") setHover(i);
            }}
            className={
              "relative z-10 h-10 min-w-0 truncate rounded-full px-1 text-[13px] font-medium outline-none transition-colors duration-300 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-white/70 active:scale-[0.97] " +
              (target === i
                ? "text-white"
                : "text-[#86868b] hover:text-[#1d1d1f] dark:hover:text-[#f5f5f7]")
            }
          >
            {tab.label}
          </button>
        ))}
      </div>

      <div
        role="tabpanel"
        id={uid + "-panel"}
        aria-labelledby={uid + "-tab-" + active}
        className="relative mt-3 h-[84px] overflow-hidden rounded-[20px] bg-white px-5 py-4 shadow-[0_1px_2px_rgba(0,0,0,0.04),0_10px_32px_rgba(0,0,0,0.07)] ring-1 ring-black/[0.06] dark:bg-[#1c1c1e] dark:shadow-[0_10px_32px_rgba(0,0,0,0.4)] dark:ring-white/10"
      >
        <AnimatePresence mode="popLayout" initial={false}>
          <motion.div
            key={active}
            initial={{ opacity: 0, y: 10, filter: "blur(4px)" }}
            animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
            exit={{ opacity: 0, y: -10, filter: "blur(4px)" }}
            transition={{ type: "spring", stiffness: 380, damping: 34 }}
          >
            <p className="flex items-baseline gap-2">
              <span className="text-[15px] font-semibold tracking-[-0.01em]">{current.label}</span>
              <span className="text-[12px] font-medium tabular-nums" style={{ color }}>
                {current.count}
              </span>
            </p>
            <p className="mt-1 text-[13px] leading-snug text-[#86868b]">{current.text}</p>
          </motion.div>
        </AnimatePresence>
      </div>
    </div>
  );
}
```

## Prompt for AI assistants

Paste this into ChatGPT, Claude, Cursor, v0 or Lovable to adapt the block to your stack (Tailwind, Vue, Svelte…):

````text
I want to add the “Liquid gooey tabs” block (Navigation) from AIMRAN Library to my project.

## What it is
The tab indicator is a liquid drop that stretches and leaves a trail as it follows the pointer from tab to tab.

## Chosen settings
- Color: #ff4f7b
- Viscosity: 8 (from 4 to 14)
- Follow the pointer: yes

## What I need
1. Add it to my project with the same look and animation as the reference code: same sizes, colours, radii, shadows, timings and easing.
2. It is built with React + TypeScript, with framer-motion for the animation and lucide-react for the icons. If my project uses something else (Vue, Svelte, Astro, plain HTML…), translate it without losing any behaviour. If I use Tailwind, turn the styles into classes; if not, keep the CSS in its own file.
3. Expose the settings above as props (or CSS variables) with those values as defaults.
4. Make it work well on phones: nothing that depends only on hover, touch targets of at least 44 px and no overflow on 320 px screens.
5. Make it look right in light and dark mode.
6. Keep it accessible: semantic HTML, roles and aria-* where needed, visible focus and keyboard support.
7. Respect prefers-reduced-motion: with reduced motion, no big animations but the same end result.

## Reference code
```tsx
import { useId, useRef, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";

const GOO_TABS = [
  { label: "For you", count: "24", text: "Picked from what you save and share." },
  { label: "Following", count: "48", text: "The latest from people and studios you follow." },
  { label: "Popular", count: "12", text: "What’s trending today in design and product." },
  {
    label: "Saved",
    count: "126",
    text: "Your saved items, newest first.",
  },
];

interface GooeyTabsProps {
  color?: string;
  goo?: number;
  followPointer?: boolean;
}

export default function GooeyTabs({
  color = "#ff4f7b",
  goo = 8,
  followPointer = true,
}: GooeyTabsProps) {
  const [active, setActive] = useState(0);
  const [hover, setHover] = useState<number | null>(null);
  const reduce = useReducedMotion();
  const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);
  const uid = useId().replace(/[^a-zA-Z0-9]/g, "");
  const filterId = "goo-" + uid;
  const n = GOO_TABS.length;
  const target = followPointer && hover !== null ? hover : active;
  const current = GOO_TABS[active]!;

  const select = (i: number) => {
    const k = (i + n) % n;
    setActive(k);
    tabRefs.current[k]?.focus();
  };

  const blob = (inset: string, scaleY: number, stiffness: number, damping: number) => (
    <motion.div
      className={"absolute left-0 rounded-full " + inset}
      style={{ width: 100 / n + "%", backgroundColor: color }}
      initial={false}
      animate={{ x: target * 100 + "%", scaleY }}
      transition={reduce ? { duration: 0 } : { type: "spring", stiffness, damping }}
    />
  );

  return (
    <div className="w-80 max-w-full text-[#1d1d1f] dark:text-[#f5f5f7]">
      <svg aria-hidden className="absolute h-0 w-0">
        <defs>
          <filter id={filterId}>
            <feGaussianBlur in="SourceGraphic" stdDeviation={goo} 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 24 -10"
            />
          </filter>
        </defs>
      </svg>

      <div
        role="tablist"
        aria-label="Feed sections"
        onPointerLeave={() => setHover(null)}
        onKeyDown={(e) => {
          const keys: Record<string, number> = {
            ArrowRight: active + 1,
            ArrowLeft: active - 1,
            Home: 0,
            End: n - 1,
          };
          const to = keys[e.key];
          if (to === undefined) return;
          e.preventDefault();
          select(to);
        }}
        className="relative grid grid-cols-4 rounded-full bg-white p-1 shadow-[0_1px_2px_rgba(0,0,0,0.04),0_10px_32px_rgba(0,0,0,0.07)] ring-1 ring-black/[0.06] dark:bg-[#1c1c1e] dark:shadow-[0_10px_32px_rgba(0,0,0,0.4)] dark:ring-white/10"
      >
        <div
          aria-hidden
          className="pointer-events-none absolute inset-1"
          style={{ filter: "url(#" + filterId + ")" }}
        >
          {blob("inset-y-0", 1, 340, 30)}
          {blob("inset-y-0.5", 0.85, 110, 15)}
          {blob("inset-y-1.5", 0.7, 65, 12)}
        </div>
        {GOO_TABS.map((tab, i) => (
          <button
            key={tab.label}
            ref={(el) => {
              tabRefs.current[i] = el;
            }}
            type="button"
            role="tab"
            id={uid + "-tab-" + i}
            aria-selected={active === i}
            aria-controls={uid + "-panel"}
            tabIndex={active === i ? 0 : -1}
            onClick={() => setActive(i)}
            onPointerEnter={(e) => {
              if (e.pointerType === "mouse") setHover(i);
            }}
            className={
              "relative z-10 h-10 min-w-0 truncate rounded-full px-1 text-[13px] font-medium outline-none transition-colors duration-300 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-white/70 active:scale-[0.97] " +
              (target === i
                ? "text-white"
                : "text-[#86868b] hover:text-[#1d1d1f] dark:hover:text-[#f5f5f7]")
            }
          >
            {tab.label}
          </button>
        ))}
      </div>

      <div
        role="tabpanel"
        id={uid + "-panel"}
        aria-labelledby={uid + "-tab-" + active}
        className="relative mt-3 h-[84px] overflow-hidden rounded-[20px] bg-white px-5 py-4 shadow-[0_1px_2px_rgba(0,0,0,0.04),0_10px_32px_rgba(0,0,0,0.07)] ring-1 ring-black/[0.06] dark:bg-[#1c1c1e] dark:shadow-[0_10px_32px_rgba(0,0,0,0.4)] dark:ring-white/10"
      >
        <AnimatePresence mode="popLayout" initial={false}>
          <motion.div
            key={active}
            initial={{ opacity: 0, y: 10, filter: "blur(4px)" }}
            animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
            exit={{ opacity: 0, y: -10, filter: "blur(4px)" }}
            transition={{ type: "spring", stiffness: 380, damping: 34 }}
          >
            <p className="flex items-baseline gap-2">
              <span className="text-[15px] font-semibold tracking-[-0.01em]">{current.label}</span>
              <span className="text-[12px] font-medium tabular-nums" style={{ color }}>
                {current.count}
              </span>
            </p>
            <p className="mt-1 text-[13px] leading-snug text-[#86868b]">{current.text}</p>
          </motion.div>
        </AnimatePresence>
      </div>
    </div>
  );
}
```

Give me the complete final code, ready to paste, and tell me in one line where to put it in my project.
````