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 gradient set in tiles: a soft, flowing multi-color gradient is sampled once per tile, so the frame reads as a grid of rounded, glazed tiles in grout, each with a beveled edge, a small shadow and its own slow glint, while broad waves of light pass across the grid and gently lift the tiles they cross. Colors blend in Oklab. Colors, grout color, tile count, gap, rounding, shimmer, depth, wave strength, speed, saturation and grain are all props; a new palette fades through over a set time, and tiles near the cursor lift and brighten softly. The tiles grow in one by one from the center on load, it adapts its resolution to the device, pauses offscreen, holds a still frame for reduced motion and falls back to a CSS blend without WebGL.
The import and the props worth knowing about, in one place.
import { MosaicGradient } from "@/components/beste/component/mosaic-gradient";
// As a layer behind content
<section className="relative min-h-[40rem]">
<MosaicGradient className="absolute inset-0" />
<div className="relative">...</div>
</section>
// Fine, round pixels on a light grout
<MosaicGradient
className="min-h-[32rem]"
colors={["#ffd6e0", "#c9e4ff", "#b8f2d8", "#fff1b8"]}
backgroundColor="#fbf8f3"
cells={48}
gap={0.22}
radius={1} // round tiles
depth={0.2}
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
colors | string[] | — | Colors of the gradient flowing under the tiles, 1 to 6. Any CSS color, tokens included. |
backgroundColor | string | — | Color of the grout between the tiles; also the wrapper background. |
cells | number | — | Tiles across the width, 4 to 80. Rows follow so the tiles stay square. |
gap | number | — | Width of the gap between tiles as a share of a tile, 0 to 0.5. |
radius | number | — | Tile rounding, 0 (square) to 1 (round). |
shimmer | number | — | Each tile's own slow glint, 0 to 1. |
depth | number | — | Bevel and shadow that make the tiles read as raised, 0 (flat) to 1. |
wave | number | — | Strength of the slow light waves passing across the grid, 0 to 1. |
speed | number | — | How fast the gradient flows and the waves pass, 0 (still) to 3. |
saturation | number | — | Color intensity, 0 (grey) to 2 (vivid). |
grain | number | — | Film grain over the frame, 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 arrangement of the gradient and the glints. |
interactive | boolean | — | Tiles near the cursor lift and brighten softly. |
paused | boolean | — | Hold the gradient still. |
className | string | — | |
children | ReactNode | — |