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 flight through golden-hour cumulus: up to four layers of billowy clouds drift past at different speeds, sunlit on the side facing a low sun, soft gray beneath, with a silver lining where thin edges catch the light and far layers fading into the horizon haze. The cursor steers the view a little. Sky colors, sun color and position, coverage, softness, speed and layers are all props. Clouds condense softly out of clear sky on load, it renders at a reduced, adaptive resolution, pauses offscreen, holds a still sky for reduced motion and falls back to a CSS sky without WebGL.
The import and the props worth knowing about, in one place.
import { CloudSky } from "@/components/beste/component/cloud-sky";
// As a layer behind content
<section className="relative min-h-[40rem]">
<CloudSky className="absolute inset-0" />
<div className="relative">...</div>
</section>
<CloudSky
className="min-h-[32rem]"
skyTop="#3d4f7a" // any CSS color, tokens included
skyHorizon="#f7b88a"
sunX={0.3} // sun position, 0 to 1
sunY={0.25}
coverage={0.7} // more of the sky under cloud
softness={0.8} // mistier edges
layers={3} // depth layers, 1 to 4
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
skyTop | string | — | Sky color overhead. Any CSS color. |
skyHorizon | string | — | Sky color at the horizon, where the sun sits low. |
sunColor | string | — | Color of the sunlight on the cloud edges and the sun glow. |
sunX | number | — | Horizontal position of the sun, 0 (left) to 1 (right). |
sunY | number | — | Height of the sun, 0 (bottom) to 1 (top). |
coverage | number | — | How much of the sky the clouds cover, 0 to 1. |
softness | number | — | Softness of the cloud edges, 0 (crisp) to 1 (misty). |
speed | number | — | Drift speed, 1 is the default pace. |
layers | number | — | Cloud layers at different depths, 1 to 4. |
interactive | boolean | — | The view steers slightly with the cursor. |
paused | boolean | — | Freeze the sky where it is. |
className | string | — | |
children | ReactNode | — |