Liquid blobs drift, merge and pull apart like a lava lamp, with a blob that follows your cursor and melts into the rest.
Lava, but calmer
Customize
Usage
import { GooeyBlobs } from "@/components/motionkit/gooey-blobs";
<GooeyBlobs
className="h-[32rem] rounded-3xl"
>
<h1>Your hero</h1>
</GooeyBlobs>Motion
The exact curves this component runs, plotted with Motion's own maths.
Blob drift
Runs on its own
Pointer blob
Pointer moves
Playful, friendly heroes for consumer apps, design tools and creative brands, and soft backdrops behind signup forms.
The blobs are plain coloured circles drifting round their own loops. The layer they sit in uses an SVG filter: a Gaussian blur melts their edges together, then a colour matrix sharply boosts the alpha, which turns the blur back into crisp edges, but now joined wherever two circles were close. That is the classic gooey, metaball look. A sprung blob follows the pointer and merges with the rest.
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | string[] | ["#0E7C86", "#2E9098", "#A56D5B"] | Blob colours, in turn. |
| duration | number | 16 | Seconds for one slow drift. |
| interactive | boolean | true | Add a blob that follows the pointer. |
| children | ReactNode | — | Your content, layered above. |
How we audit: the WCAG 2.2 animation checklist and respecting reduced motion in React.
Yes. The file starts with "use client", so you can import it straight into a Server Component page or layout. It works in Vite as is, and in Astro as a React island.
Only the motion package, beside React and Tailwind CSS v4. There is no MotionKit package and no Tailwind config to add.
Yes, with MotionKit Plus. Add the @motionkit registry and your personal token to components.json (the snippet is on your account page), then run npx shadcn@latest add @motionkit/gooey-blobs. It saves the file to components/motionkit and installs its dependencies.
Gooey Blobs is part of MotionKit Plus (£12 a month or £96 a year). The live preview and playground are free to explore; Plus unlocks its source code, every customisation control and commercial use.
With reduced motion on, the blobs hold still and none follows the pointer.
Lava, but calmer
Customize
Usage
import { GooeyBlobs } from "@/components/motionkit/gooey-blobs";
<GooeyBlobs
className="h-[32rem] rounded-3xl"
>
<h1>Your hero</h1>
</GooeyBlobs>Motion
The exact curves this component runs, plotted with Motion's own maths.
Blob drift
Runs on its own
Pointer blob
Pointer moves
The live preview is free to explore. Plus unlocks the source for Gooey Blobs and every other premium component.