Glossy two-tone blobs that drift, merge and split like a lava lamp, with a bright rim and a specular edge where they meet the light. The field is computed at low resolution and scaled up smoothly, so it stays light on the CPU.
Ideas that merge
on their own
npx shadcn@latest add https://hyperblur.dev/r/bg-metaballs.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-metaballs.tsx.
import { BgMetaballs } from "@/components/hyperblur/bg-metaballs"
<div className="relative h-96"><BgMetaballs><h1>Ideas that merge</h1></BgMetaballs></div>| Prop | Type | Default | Description |
|---|---|---|---|
| colors | [string, string] | ["#2f7bff", "#b46bff"] | Top and bottom colors of the blobs, blended vertically. Hex colors. |
| accent | string | "#e9f1ff" | Color of the rim and the specular highlight. Hex color. |
| background | string | "#07080c" | Color behind the blobs. Hex color. |
| count | number | 7 | Number of blobs, from 2 to 16. |
| size | number | 1 | Scale of the blobs relative to the container. |
| speed | number | 1 | Speed of the drift. |
| className | string | "" | Extra classes for the root. The root is absolutely positioned and fills its parent. |
| children | ReactNode | Content rendered on top of the background. |