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 sky gradient: up to six colors run from the zenith down to a hazy horizon, blended in Oklab, with a soft sun or moon sitting on the horizon line, a warm bloom around it and along the horizon, a shimmering trail below and thin cloud streaks that catch its light as they drift. A slow time-of-day drift eases the sky up and down its colors. Colors, sun color, size and position, horizon height, glow, haze, streaks, drift, speed, saturation and film grain are all props, and a new palette fades through over a set time; the sun leans a little toward the cursor. On load the sun rises out of the flat zenith color over 2.4 seconds. It adapts its resolution to the device, pauses offscreen, holds a still frame for reduced motion and falls back to a CSS sky without WebGL.
The import and the props worth knowing about, in one place.
import { HorizonGradient } from "@/components/beste/component/horizon-gradient";
// As a layer behind content
<section className="relative min-h-[40rem]">
<HorizonGradient className="absolute inset-0" />
<div className="relative">...</div>
</section>
// A pale blue morning with a small low sun on the right
<HorizonGradient
className="min-h-[32rem]"
colors={["#8fb8e8", "#bcd6f0", "#f3e6d8", "#ffe9c7"]}
sunColor="#fffaf0"
sunSize={0.2}
sunX={0.72}
horizon={0.22}
streaks={0.6}
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
colors | string[] | — | Sky colors from the zenith down to the horizon, 1 to 6. Any CSS color, tokens included. |
sunColor | string | — | Color of the sun or moon and its glow. |
sunSize | number | — | Size of the sun, 0 (a small moon) to 1 (a large setting sun). |
sunX | number | — | Where the sun sits across the frame, 0 (left) to 1 (right). |
horizon | number | — | Height of the horizon line from the bottom, 0 to 1. |
glow | number | — | Bloom around the sun and along the horizon, 0 to 1. |
haze | number | — | Atmospheric haze that softens the horizon, 0 to 1. |
streaks | number | — | Thin cloud streaks drifting across the sky, 0 to 1. |
drift | number | — | A slow time-of-day drift that eases the sky up and down its colors, 0 to 1. |
speed | number | — | How fast the clouds and the drift move, 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 sky, 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 `sunColor` takes to fade through. 0 swaps at once. |
seed | number | — | Picks a different arrangement of the clouds. |
interactive | boolean | — | The sun leans a little toward the cursor. |
paused | boolean | — | Hold the sky still. |
className | string | — | |
children | ReactNode | — |