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 conic gradient glow: up to six colors sweep around a center point and slowly turn, blended in Oklab so each seam between two hues stays clean and bright. The sweep can repeat into several arms, bend into a spiral, soften its seams toward the center, breathe with a slow swell and ripple, and fade at its edge into a background color, reading as a full disc, a glowing ring or a sweep that fills the frame. A soft light can sit at the core and a film grain on top. Colors, background, center, repeats, angle, speed and direction, radius, ring, falloff, blur, twist, core, breathe, saturation and grain are all props; new colors fade through over a set time, radius, core, speed and center glide to new values, and the center leans toward the cursor. 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 a CSS conic gradient without WebGL.
The import and the props worth knowing about, in one place.
import { ConicGradient } from "@/components/beste/component/conic-gradient";
// As a layer behind content
<section className="relative min-h-[40rem]">
<ConicGradient className="absolute inset-0" />
<div className="relative">...</div>
</section>
// A thin, three-armed ring turning counterclockwise
<ConicGradient
className="min-h-[32rem]"
colors={["var(--primary)", "#2fd4ff", "#ffb347"]}
backgroundColor="var(--background)"
repeat={3}
ring={0.8}
rotation={-1.5}
radius={0.4}
core={0}
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
colors | string[] | — | Colors swept around the center, 1 to 6, in order. Any CSS color, tokens included. |
backgroundColor | string | — | Color outside the glow, and behind it while the canvas loads. |
centerX | number | — | Horizontal position of the center, 0 (left) to 1 (right). |
centerY | number | — | Vertical position of the center, 0 (top) to 1 (bottom). |
repeat | number | — | How many times the colors go around, 1 to 6. |
angle | number | — | Starting angle of the sweep in degrees. |
rotation | number | — | Turning speed, -3 to 3. 1 is one turn every 40 seconds; negative turns counterclockwise. |
radius | number | — | Radius of the glow as a share of the frame height, 0.1 to 2. Above 1 it fills the frame. |
ring | number | — | Shape of the glow, 0 (a full disc) to 1 (a thin ring). |
falloff | number | — | How softly the edges fade into the background, 0 (crisp) to 1 (haze). |
blur | number | — | Softens the seams between colors, 0 to 1. Strongest near the center. |
twist | number | — | Bends the sweep into a spiral, -1 to 1. |
core | number | — | A soft light at the center, 0 to 1. |
breathe | number | — | A slow swell of the radius and a ripple through the sweep, 0 to 1. |
saturation | number | — | Color intensity, 0 (grey) to 2 (vivid). 1 keeps the colors as given. |
grain | number | — | Film grain over the gradient, 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. |
interactive | boolean | — | The center leans toward the cursor. |
paused | boolean | — | Hold the sweep still. |
className | string | — | |
children | ReactNode | — |