# Gooey Blobs

> Liquid blobs drift, merge and pull apart like a lava lamp, with a blob that follows your cursor and melts into the rest.

Category: Backgrounds · MotionKit Plus · Updated 2026-10-22 · Live demo: https://motionkitui.com/components/gooey-blobs

## When to use it

Playful, friendly heroes for consumer apps, design tools and creative brands, and soft backdrops behind signup forms.

## How it works

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.

## Installation

Part of MotionKit Plus (https://motionkitui.com/pricing). Subscribers install it with `npx shadcn@latest add @motionkit/gooey-blobs` after adding their registry token from https://motionkitui.com/account.

## Props

| 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. |

## Accessibility

- **Keyboard: Not applicable.** Decorative, nothing to focus.
- **Screen readers: Pass.** The blobs and filter are hidden from assistive tech; only your content is read.
- **Reduced motion: Pass.** With reduced motion on, the blobs hold still and none follows the pointer.
- **Colour contrast: Pass.** Ivory text over the brightest blob measures 8.3:1.