Surface study no. 04
A studio for identities that move. We cast brands in liquid metal, then let them settle into something you can hold.
A live WebGL lava lamp: soft colored blobs float, merge and pull apart like liquid over a background color, each carrying its own color and blending with its neighbors in Oklab where they meet, so the mix stays bright instead of going muddy. A goo setting runs from soft glowing orbs to crisp liquid edges, a glow adds a halo and light along the edges, and a rise setting moves from free floating to blobs that climb and sink like wax in a lamp. Colors, background, blob count, size, speed, saturation, grain amount and size and the seed are all props; a new palette fades through over a set time, a new count grows blobs in or shrinks them away, and the cursor becomes one more blob that merges with the rest. It grows softly out of its background on load, adapts its resolution to the device, pauses offscreen, holds a still frame for reduced motion and falls back to soft CSS color pools without WebGL.
The import and the props worth knowing about, in one place.
import { BlobGradient } from "@/components/beste/component/blob-gradient";
// As a layer behind content
<section className="relative min-h-[40rem]">
<BlobGradient className="absolute inset-0" />
<div className="relative">...</div>
</section>
// Soft pastel orbs floating freely on the page background
<BlobGradient
className="min-h-[32rem]"
colors={["#ffc8dd", "#bde0fe", "#cdb4db"]}
backgroundColor="var(--background)"
count={5}
goo={0.1} // soft glowing orbs instead of liquid edges
rise={0} // float freely, no lamp drift
size={1.4}
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
colors | string[] | — | Blob colors, 1 to 6. Any CSS color, tokens included. Blobs take them in turn. |
backgroundColor | string | — | Color behind the blobs. |
count | number | — | How many blobs float in the field, 1 to 10. Changes grow and shrink blobs in. |
size | number | — | Blob size, 0.5 to 2. |
goo | number | — | Edge of the blobs, 0 (soft glowing orbs) to 1 (crisp liquid). |
glow | number | — | Halo around the blobs and light along their edges, 0 to 1. |
speed | number | — | How fast the blobs move, 0 (still) to 3. |
rise | number | — | 0 lets the blobs float freely, 1 makes them rise and sink like a lava lamp. |
saturation | number | — | Color intensity, 0 (grey) to 2 (vivid). 1 keeps the colors as given. |
grain | number | — | Film grain over the field, 0 to 1. |
grainSize | number | — | Size of one grain in CSS pixels, 1 to 4. |
grainMotion | boolean | — | Let the grain flicker like film instead of holding still. |
transition | number | — | Seconds a change of `colors` or `backgroundColor` takes to fade through. 0 swaps at once. |
seed | number | — | Picks a different set of blob sizes and paths. |
interactive | boolean | — | The cursor becomes one more blob that merges with the others. |
cursorSize | number | — | Size of the cursor blob, 0.5 to 2. |
paused | boolean | — | Hold the blobs still. |
className | string | — | |
children | ReactNode | — |