Gooey Blob Merge React component
Glossy liquid blobs that drift, stretch and fuse together like lava-lamp goo: your pointer becomes a blob of its own that pulls them into one shape, trails a drop behind it, and a click flicks off a little droplet.
About the Gooey Blob Merge component
Gooey Blob Merge is a background of glossy liquid blobs that drift on slow loops and melt into one another whenever they come close, like the wax in a lava lamp. Each blob is lit like a drop of jelly, with a soft highlight and a coloured rim.
Your pointer becomes a blob too: it springs after you, drags a smaller drop behind it when you move fast and pulls nearby blobs into one shape. A click flicks off a little droplet that slides away and shrinks.
When to use it
Use it for playful product heroes, creative studios, music and drink brands, onboarding screens or anywhere you want a soft, tactile background that invites people to play.
The blobs move through the middle, so put text along an edge or on a panel.
Installation
Add the Gooey Blob Merge component to your project with the shadcn CLI. It lands in components/gooey-blob-merge.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/gooey-blob-mergeOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<GooeyBlobMerge /> accepts 5 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| colors Three colours the goo blends between, top-left to bottom-right. | [string, string, string] | ["#ff6ac1", "#7b61ff", "#38d4ff"] |
| background | string | "#0c0b12" |
| count Number of floating blobs (2–8). | number | 6 |
| size Size of the blobs, as a share of the shorter side. | number | 0.095 |
| goo How readily blobs fuse together (0–1). | number | 0.6 |
- colors
Three colours the goo blends between, top-left to bottom-right.
[string, string, string]Default: ["#ff6ac1", "#7b61ff", "#38d4ff"] - backgroundstringDefault: "#0c0b12"
- count
Number of floating blobs (2–8).
numberDefault: 6 - size
Size of the blobs, as a share of the shorter side.
numberDefault: 0.095 - goo
How readily blobs fuse together (0–1).
numberDefault: 0.6
npm dependencies
Installed for you by the shadcn CLI.
Gooey Blob Merge FAQ
- How is the goo made?
- Each blob adds to a smooth field and the shader draws the shape where the field passes a threshold, so blobs that get close join with a smooth neck instead of overlapping. It's lit from the field's slope, all on the GPU.
- Can I change the colours?
- colors takes three colours that blend across the blobs from top-left to bottom-right, and background sets the colour behind them.
- How do I make it more or less sticky?
- goo (0–1) sets how readily blobs fuse; count sets how many float around and size how big they are.
- What about phones and reduced motion?
- A finger drags the cursor blob and a tap flicks a drop. With reduced motion on the blobs stop drifting and the cursor blob follows without springing. Without WebGL it falls back to a soft gradient.
