Metaballs: Liquid Blob Background for React (Free)

A "blur + contrast" filter on a 2D canvas approximates a metaball field: as neighboring blobs come close, their edges naturally grow a merging bridge, flowing like mercury or ferrofluid. It can also follow the cursor.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add metaballs.en

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Blob countcount

Sphere sizesize

0.12

Drift speedspeed

Blur radiusblur

Background colorbackground

Cursor attractioninteractive

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<Metaballs/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/metaballs.en.json

Or, once registries are configured in components.json, install it as @webberui/metaballs.

Usage

The component fills its parent container, so put it inside a bounded box with an explicit height (and avoid viewport height units):

import { Metaballs } from "@/components/ui/metaballs";

<div className="relative h-[320px] w-full overflow-hidden rounded-xl">
  <Metaballs interactive />
</div>

Props

Prop	Type	Default	Description
`count`	`number`	`7`	Number of blobs
`colors`	`string[]`	Magenta / purple / cyan	Blob palette, applied by cycling through the list
`background`	`string`	`"#0a0a12"`	Background color, which is the baseline for the merge threshold
`size`	`number`	`0.12`	Radius multiplier (relative to the container's short edge)
`speed`	`number`	`1`	Drift speed multiplier
`blur`	`number`	`16`	Blur radius (px), which stretches out the merging bridges
`contrast`	`number`	`18`	Contrast strength, which determines edge sharpness
`interactive`	`boolean`	`true`	One blob follows the cursor smoothly (mouse only)

Accessibility

When the user has "reduce motion" enabled at the system level, only a single static frame of the merged field is drawn — no animation and no interaction
A purely decorative background: the container is marked aria-hidden, so it does not interfere with assistive technology

Metaballs