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 background of the open sea at dusk, rendered like a calm cinematic photograph: summed swell and ripple waves with sharpened crests, Fresnel sky reflections, a sun glitter path that widens toward the horizon, light glowing through the crests, aerial haze on the distance, thin high clouds and a camera that rides the swell and turns gently toward the cursor. Sky, sun and water colors, sun height and position, wave size, crest sharpness, glitter, haze, clouds and speed are all props. The scene rises softly out of a plain sky on load; it adapts its resolution and wave detail, pauses offscreen, holds a still frame for reduced motion and shows the same scene as a CSS gradient without WebGL.
The import and the props worth knowing about, in one place.
import { OceanHorizon } from "@/components/beste/component/ocean-horizon";
// As a layer behind content
<section className="relative min-h-[40rem]">
<OceanHorizon className="absolute inset-0" />
<div className="relative">...</div>
</section>
// Bright late afternoon on a livelier sea
<OceanHorizon
className="min-h-[32rem]"
skyTop="#3d6fa8" // any CSS color, tokens included
skyHorizon="#dfe6ea"
sunColor="#fff4dc"
waterColor="#0d3348"
sunHeight={0.6} // 0 is just set, 1 is high afternoon
sunX={0.4}
waves={0.8}
choppiness={0.7}
clouds={0.2}
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
skyTop | string | — | Sky color high overhead. |
skyHorizon | string | — | Sky color at the horizon line; the far water and the haze take it on too. |
sunColor | string | — | Color of the sun, its glow and the glitter path on the water. |
waterColor | string | — | Deep color of the water body under the reflections. |
sunHeight | number | — | Height of the sun, 0 (just set) to 1 (high afternoon). |
sunX | number | — | Horizontal position of the sun, 0 (left) to 1 (right). |
waves | number | — | Size of the swell, 0 (glassy) to 1 (a lively sea). |
choppiness | number | — | Sharpness of the crests, 0 (rolling) to 1 (peaked). |
glitter | number | — | Strength of the sun's glitter path, 0 to 1. |
haze | number | — | Aerial haze that softens the distance, 0 to 1. |
clouds | number | — | Thin high clouds, 0 (clear) to 1. |
speed | number | — | Motion speed, 1 is the default pace. |
interactive | boolean | — | The camera turns gently toward the cursor. |
paused | boolean | — | Freeze the sea where it is. |
className | string | — | |
children | ReactNode | — |