Liquid Blobs

Hero Backgrounds

A gooey metaball hero backdrop: soft radial blobs drift on slow sine orbits and lean gently toward the pointer, fusing like liquid where they overlap via the SVG gooey-filter trick (a wide feGaussianBlur plus an alpha-contrast feColorMatrix). A single rAF loop writes GPU-only translate/scale, the blur radius tracks the container so the goo reads the same at any size, and an IntersectionObserver idles it off-screen; under prefers-reduced-motion the blobs settle into a static, still-merged arrangement with no drift.

Inspired by Cult UI — Hero gradient / metaball backgrounds (pattern) — independently built, not affiliated. Attribution policy

ParableLiquid Blobs

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/liquid-blobs.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/liquid-blobs.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<LiquidBlobs className="grid h-64 w-full place-items-center rounded-xl">
    <div className="text-center">
      <span className="block font-mono text-[10px] uppercase tracking-[0.3em] text-white/60">
        Parable
      </span>
      <span className="mt-2 block text-2xl font-semibold text-white">
        Liquid Blobs
      </span>
    </div>
  </LiquidBlobs>

Props

LiquidBlobsProps extends React.HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
colors	string[]	["#8b5cf6", "#ec4899", "#f5a623"]	Colours the blobs cycle through. Defaults to violet / fuchsia / ember.
background	string	"#0f0f10"	Backdrop colour behind the blobs. Mirrors the site `--pb-ink` token.
count	number	5	How many blobs to render (clamped 1–12).
speed	number	1	Drift-speed multiplier. `1` is a slow, hero-grade flow; `0` freezes it.