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 a long-exposure night photograph: thousands of stars drawn analytically as continuous, anti-aliased arcs around a celestial pole, each with its own brightness and colour temperature from blue-white to orange. The exposure builds up over the first seconds like a real shutter left open, then the sky keeps turning slowly with a soft comet fade on every trail. Airglow lifts the sky toward the horizon over layered ridges and an optional pine forest line, finished with lens vignetting and fine sensor noise. The land and the pole shift slightly with the cursor for depth. Colours, star density, trail length, pole position, horizon height, foreground, grain and speed are props, and a progress prop can drive the exposure from scroll. Grows softly out of the sky color on load, adapts its resolution, pauses offscreen, holds the full exposure for reduced motion and falls back to a CSS gradient without WebGL.
The import and the props worth knowing about, in one place.
import { StarTrails } from "@/components/beste/component/star-trails";
// As a layer behind content
<section className="relative min-h-[40rem]">
<StarTrails className="absolute inset-0" />
<div className="relative">...</div>
</section>
<StarTrails
className="min-h-[32rem]"
skyColor="#060510" // any CSS color, tokens included
glowColor="#2a1e3a"
horizonColor="#d08040"
exposure={0.8} // longer trails
poleX={0.5}
poleY={0.3} // the pole inside the frame draws full circles
silhouette="ridges" // "forest", "ridges" or "none"
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
skyColor | string | — | Night sky at the zenith. |
glowColor | string | — | Airglow that lifts the sky toward the horizon. |
horizonColor | string | — | Faint warm band right on the horizon, like a distant town. |
landColor | string | — | The land in the foreground. |
stars | number | — | Star density, 0 to 1. |
exposure | number | — | Length of the trails once the exposure has built up, 0 (short) to 1 (long). |
poleX | number | — | Where the sky turns around, 0 to 1 on each axis (y runs down, below 0 is above the frame). |
poleY | number | — | |
horizon | number | — | Height of the far ridges above the bottom edge, 0 to 1. |
silhouette | "forest" | "ridges" | "none" | — | What stands in the foreground. |
progress | number | { get(): number } | — | Drives the exposure from outside, 0 to 1. A number, or anything with a get() method such as a MotionValue. |
grain | number | — | Sensor noise, 0 to 1. It also keeps the dark gradients from banding. |
speed | number | — | Motion speed, 1 is the default pace. |
interactive | boolean | — | The land and the pole shift slightly with the cursor. |
paused | boolean | — | Freeze the sky where it is. |
className | string | — | |
children | ReactNode | — |