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 planet: one soft sphere whose surface carries a color ramp in latitude bands that fold and swirl slowly as it turns, lit from one side with a wrapped terminator, a luminous rim along its edge and an atmosphere that glows into the space around it. The palette is blended in Oklab, the rim and halo take its lightest color, and a film grain sits over the frame. Colors, base, size, position (including off frame, for a rising horizon), glow, rim, swirl, light angle, speed, saturation and grain are all props; a new palette fades through over a set time, and the light and the turn lean softly toward the cursor. It rises and 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 sphere without WebGL.
The import and the props worth knowing about, in one place.
import { OrbGradient } from "@/components/beste/component/orb-gradient";
// As a layer behind content
<section className="relative min-h-[40rem]">
<OrbGradient className="absolute inset-0" />
<div className="relative">...</div>
</section>
// A huge planet rising from the bottom edge
<OrbGradient
className="min-h-[32rem]"
colors={["#0b2a4a", "#1f6fb2", "#7fd1e8", "#e9f7ff"]}
size={2.6}
positionY={1.95} // center far below the frame, only the top arc shows
glow={0.8}
lightAngle={90}
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
colors | string[] | — | Colors swirling across the orb, 1 to 6, in order. Any CSS color, tokens included. |
baseColor | string | — | Color of the space around the orb. |
size | number | — | Diameter of the orb as a share of the frame height, 0.2 to 3. Large values make a horizon. |
positionX | number | — | Horizontal center, 0 (left edge) to 1 (right edge). Values outside push the orb off frame. |
positionY | number | — | Vertical center, 0 (top) to 1 (bottom). Values past 1 sink the orb below the frame. |
glow | number | — | Strength of the atmosphere glowing around the orb, 0 to 1. |
rim | number | — | Light along the orb's edge, 0 to 1. |
swirl | number | — | How much the colors swirl and fold across the surface, 0 (calm bands) to 1 (storms). |
lightAngle | number | — | Direction the light comes from, in degrees (0 = right, 90 = top). |
speed | number | — | How fast the surface turns and drifts, 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 `baseColor` takes to fade through. 0 swaps at once. |
seed | number | — | Picks a different surface pattern. |
interactive | boolean | — | The light and the turn of the orb lean softly toward the cursor. |
paused | boolean | — | Hold the surface still. |
className | string | — | |
children | ReactNode | — |