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 whirlpool of color: up to six colors wound into a logarithmic spiral that turns and pulls toward its center, blended in Oklab so every mix stays clean. Fractal ripples fray the arms, the pit darkens as it falls away, and an optional bright eye glows at the heart, all under a fine film grain. Colors, base, arm count, tightness, spread, depth, turbulence, eye, center position, direction, speed, saturation and grain are all props; a new palette fades through over a set time, and the center leans gently toward the cursor. It grows softly out of its base color on load, adapts its resolution to the device, pauses offscreen, holds a still frame for reduced motion and falls back to a CSS conic sweep without WebGL.
The import and the props worth knowing about, in one place.
import { VortexGradient } from "@/components/beste/component/vortex-gradient";
// As a layer behind content
<section className="relative min-h-[40rem]">
<VortexGradient className="absolute inset-0" />
<div className="relative">...</div>
</section>
// A calm, sea-glass whirlpool filling the frame
<VortexGradient
className="min-h-[32rem]"
colors={["#0f3d3e", "#3fa7a0", "#c8f1e6", "#1c6e8c"]}
baseColor="#061a1c"
arms={5}
tightness={0.8}
spread={2} // reaches past the frame edges
eye={0}
direction="counterclockwise"
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
colors | string[] | — | The colors wound into the spiral, 1 to 6. Any CSS color, tokens included. |
baseColor | string | — | Color around the vortex, and the frame the intro grows out of. |
arms | number | — | Spiral arms, 1 to 8. |
tightness | number | — | How tightly the arms wind toward the center, 0 (loose sweep) to 1 (tight coil). |
spread | number | — | How far the color reaches from the center, 0.3 to 2 frame heights. |
depth | number | — | How much the whirlpool darkens as it falls toward the center, 0 to 1. |
turbulence | number | — | Ragged, fractal ripples along the arms, 0 (clean) to 1 (stormy). |
eye | number | — | A bright eye at the center, 0 (none) to 1 (large and glowing). |
centerX | number | — | Horizontal position of the center, 0 (left) to 1 (right). |
centerY | number | — | Vertical position of the center, 0 (top) to 1 (bottom). |
direction | "clockwise" | "counterclockwise" | — | Turning direction. |
speed | number | — | How fast the vortex turns, 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 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 `baseColor` takes to fade through. 0 swaps at once. |
seed | number | — | Picks a different pattern of ripples. |
interactive | boolean | — | The center leans a little toward the cursor. |
paused | boolean | — | Hold the vortex still. |
className | string | — | |
children | ReactNode | — |