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 survey map: crisp contour lines drift slowly across hill-shaded ground, with heavier index contours every fifth level, summits touched with the accent color and lines that swell softly around the cursor. Tilt runs from the map seen straight from above to a map laid back into the distance, where the lines thin out and fade into the paper. Rises softly out of the paper on load, adapts its resolution, pauses offscreen, holds a still view for reduced motion and falls back to CSS rings without WebGL.
The import and the props worth knowing about, in one place.
import { ContourTerrain } from "@/components/beste/component/contour-terrain";
// As a layer behind content
<section className="relative min-h-[40rem]">
<ContourTerrain className="absolute inset-0" />
<div className="relative">...</div>
</section>
<ContourTerrain
className="min-h-[32rem]"
inkColor="var(--foreground)" // any CSS color, tokens included
accentColor="var(--primary)" // summits
tilt={0.9} // 0 flat map from above, 1 low view across the land
relief={0.8} // deeper light and shade on the slopes
lines={30} // more contour levels
haze={0.3} // see further before the land fades
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
inkColor | string | — | Color of the contour lines. Any CSS color, tokens included. |
paperColor | string | — | Color of the ground between the lines and of the distance haze. |
accentColor | string | — | Color the highest ground takes on. |
summits | number | — | How strongly the summits take the accent color, 0 to 1. |
lines | number | — | Number of contour levels from valley floor to peak. |
indexLines | boolean | — | Draw every fifth line heavier, the way survey maps mark index contours. |
tilt | number | — | Camera angle, 0 (the map seen straight from above) to 1 (the map tilted away into the distance). |
relief | number | — | How strongly the slopes are modeled in light and shade, 0 to 1. |
haze | number | — | How quickly distant ground fades into the paper, 0 to 1. |
shading | number | — | Light and shadow on the slopes, 0 to 1. |
speed | number | — | Speed of the slow flight over the land, 1 is the default pace. |
interactive | boolean | — | The lines swell softly around the cursor, as if under a lens. |
pull | number | — | Strength of that swell, 0 to 1. |
paused | boolean | — | Freeze the land where it is. |
className | string | — | |
children | ReactNode | — |