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 pane of frosted glass with color drifting behind it: soft round shapes and rounded bars in up to six colors float slowly on the far side, blurred by the glass into a gradient, while a fine sandblasted tooth scatters the view, the edges of the pane bend the light with a thin highlight and optional vertical flutes press into the surface. Colors blend in Oklab under a fine film grain. Colors, background, shape count and size, blur, frost, bevel, flutes, speed, saturation and grain are all props; a new palette fades through over a set time, and the first shape glides after the cursor behind the glass. It grows softly out of its background color 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 { FrostedGradient } from "@/components/beste/component/frosted-gradient";
// As a layer behind content
<section className="relative min-h-[40rem]">
<FrostedGradient className="absolute inset-0" />
<div className="relative">...</div>
</section>
// A dark, fluted pane over three deep colors
<FrostedGradient
className="min-h-[32rem]"
colors={["#ff4f3a", "#3a5bff", "#ffb13a"]}
backgroundColor="#0e0f14"
shapes={4}
blur={0.8}
frost={0.7}
flutes={18} // vertical reeds pressed into the glass
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
colors | string[] | — | Colors of the shapes behind the glass, 1 to 6. Any CSS color, tokens included. |
backgroundColor | string | — | Color seen through the glass between the shapes, and the frame the intro grows out of. |
shapes | number | — | Shapes drifting behind the glass, 1 to 8. Even ones are round, odd ones are soft bars. |
size | number | — | Size of the shapes, 0.5 to 2. |
blur | number | — | How far the glass softens the shapes, 0 (nearly clear) to 1 (deep haze). |
frost | number | — | Sandblasted texture of the glass, 0 (smooth) to 1 (coarse). |
bevel | number | — | Refraction and a thin highlight along the edges of the pane, 0 to 1. |
flutes | number | — | Vertical flutes pressed into the glass. 0 keeps it flat; 4 to 40 sets how many span the frame. |
speed | number | — | How fast the shapes drift, 0 (still) to 3. |
saturation | number | — | Color intensity, 0 (grey) to 2 (vivid). 1 keeps the colors as given. |
grain | number | — | Film grain over the glass, 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 shapes. |
interactive | boolean | — | The first shape drifts after the cursor behind the glass. |
paused | boolean | — | Hold the shapes still. |
className | string | — | |
children | ReactNode | — |