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 photoreal desert at golden hour, raymarched in a WebGL shader. Dunes rise on a long windward slope to a sharp crest and fall away on a steep lee face, their crest lines curving across a broad swell of land. A low sun rakes across them: lee faces fall into soft shadow tinted by the sky, fine wind ripples catch the light, quartz grains glint, and the distance fades into a warm haze that carries the sun's glow. The camera glides slowly over the dunes and turns gently with the cursor, and on arrival the light comes up out of the dusk. Sand, sky, haze and sun colors, sun height and angle, dune size and ripples are all props. Pauses offscreen and adapts its resolution to keep the glide smooth. Reduced motion shows a still view.
The import and the props worth knowing about, in one place.
import { DuneField } from "@/components/beste/component/dune-field";
<DuneField className="h-[40rem]" />
<DuneField
sandColor="#c98f5a"
skyColor="#5f7fb0"
sunHeight={0.12} // a lower sun, longer shadows
sunAngle={40} // light from the right
scale={1.3} // bigger dunes
className="absolute inset-0"
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
sandColor | string | — | Color of the sand in full sun. Any CSS color. |
skyColor | string | — | Sky overhead; it also tints the shadows. |
hazeColor | string | — | Haze at the horizon, where the distance fades. |
sunColor | string | — | Color of the low sun and its glow. |
sunHeight | number | — | How high the sun stands, 0 (on the horizon) to 1 (well up). Low suns throw long shadows. |
sunAngle | number | — | Where the sun stands relative to the view, in degrees (-90 left, 0 ahead, 90 right). |
scale | number | — | Size of the dunes, 0.6 (small) to 1.6 (vast). |
ripples | number | — | Fine wind ripples on the sand, 0 to 1. |
speed | number | — | Speed of the camera's glide, 1 is the default pace. |
grain | number | — | Film grain, 0 to 1. |
interactive | boolean | — | The view turns gently with the cursor. |
paused | boolean | — | Hold the camera where it is. |
className | string | — | |
children | ReactNode | — |