Installation
pnpm dlx shadcn@latest add https://dithercn.dev/r/metaballs.jsonUsage
import { Metaballs } from "@/components/dithercn/metaballs";
export function Hero() {
return (
<section className="relative isolate min-h-[480px]">
<Metaballs className="absolute inset-0 -z-10" />
<h1>Your headline</h1>
</section>
);
}Each blob rises and sinks on its own slow loop. Where two come close, their edges reach for each other and join, then pull apart again. Every blob is densest at its core and has a soft halo around its edge.
Examples
Contour rings
variant="rings" draws contour lines around the blobs instead of filling them. The rings merge and split with the blobs.
Lava lamp
Five blobs in warm colours, sped up a little, in a tall rounded box. In a narrow box the blobs are sized by its width.
Props
| Prop | Type | Default |
|---|---|---|
| variant Shaded blobs with a soft halo, or contour lines around them. | Type: "solid" | "rings" | Default "solid" |
| count How many blobs, from 2 to 8. | Type: number | Default 5 |
| size Size of the blobs. In a tall box they are sized by the width. | Type: number | Default 1 |
| palette Colours from paper to ink: palette names such as "blue", CSS variable names, or any CSS colour. | Type: [DitherColor, DitherColor, ...DitherColor[]] | Default ["--dither-paper", "--dither-ink"] |
| matrix The threshold pattern. See Dither engine. | Type: "bayer2" | "bayer4" | "bayer8" | "blue-noise" | Default "bayer4" |
| cell Size of one dither cell in CSS pixels. | Type: number | Default --dither-cell |
| speed How fast it moves. | Type: number | Default 1 |
| animate false draws one still frame. | Type: boolean | Default true |
| className Size and position. The background fills this box. | Type: string | Default – |
Notes
- It is decorative and hidden from assistive technology. Put real text on top of it, not inside it.
- With reduced motion turned on, it draws one still frame and stops.
- It pauses when scrolled out of view or when the tab is hidden, and releases its WebGL context when far offscreen. Without WebGL it shows soft CSS blobs in the same colours.
- It costs one small draw per frame at 30 fps, at one pixel per dither cell. See Performance.