Metaballs Background for React

A full-bleed lava lamp: fourteen drops of glossy liquid, small and large, drift through the whole section, fusing into one mass when they meet and pulling apart again, over a soft haze of the same color. The merged shape is lit, with a gloss along the edges that face the light and a shaded rim, so it reads as liquid rather than flat paint. Each drop is placed when the page renders and loops on a slow CSS keyframe path; one SVG filter blurs the drops together, cuts the blur sharp again and lights the result, which is what fuses them. Nothing runs in JavaScript. It's a soft translucent tint on a light page and a deeper, dimmer gloss on a dark one.

Use it behind a launch hero, an AI product page or a creative tool's landing section. For many small bubbles that rise instead of one slow mass, use Bubbles; for color that moves without any shapes, Gradient Animation; for ink blooming in water, Ink.

Installation

Usage

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

<Metaballs className="flex min-h-[32rem] items-center justify-center">
  <h1 className="text-5xl font-semibold">Fluid by design</h1>
</Metaballs>

Metaballs is a container: whatever you put inside sits on top of the liquid, in normal flow. It fills its own box, so give it a height or content. For a backdrop behind the whole page, render it empty with className="fixed inset-0 -z-10".

Demos

In a card

Here it fills a card: count={7} for fewer drops and speed={0.7} for a slower drift. Drops are sized from the box, so the lamp works at card size too; a drop is never smaller than its blur allows, or the filter would blur it away.

Colors

colors takes any CSS colours: the first is the liquid, the others tint the drops' cores, cycled. Here a classic amber lamp with orange, red and yellow cores, and speed={0.6} for a slower drift.

Accessibility

The liquid is decoration: it's hidden from assistive tech and lets every click through to your content. With reduced motion every drop stops where it is, so a still, fused composition stays. Nothing flashes.

Put copy over it in your foreground colour (text-foreground). With the default colours it keeps about 4.5:1 or more at the worst spot in both colour schemes: dark text over the pale liquid, light text over the dim gloss, which is held back on a dark page for this reason. Keep long body copy on a surface all the same, since the mass keeps moving under it, and check again with your own colors.

FAQ

API Reference