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 night sky with folding northern-lights curtains, vertical rays, a sparse twinkling starfield and two mountain ridges along the bottom. The curtains lean with the cursor like wind. Sky, curtain and mountain colors, brightness, curtain count and height, ray detail, stars, twinkle, speed and wind are all props. Grows softly out of the sky color on load, renders at a reduced scale, adapts to the device, pauses offscreen, holds a still sky for reduced motion and falls back to a CSS gradient without WebGL.
The import and the props worth knowing about, in one place.
import { AuroraSky } from "@/components/beste/component/aurora-sky";
// As a layer behind content
<section className="relative min-h-[40rem]">
<AuroraSky className="absolute inset-0" />
<div className="relative">...</div>
</section>
<AuroraSky
className="min-h-[32rem]"
lowColor="#7df9ff" // any CSS color, tokens included
highColor="#6d5bff"
intensity={0.7} // brightness, 0 to 1
curtains={3} // 1 to 4
rays={0.8} // sharper vertical rays
mountains={false} // open horizon
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
skyColor | string | — | Color of the sky high overhead. Any CSS color. |
horizonColor | string | — | Color of the sky low at the horizon. |
lowColor | string | — | Color at the lower edge of the curtains. |
highColor | string | — | Color the curtains fade into higher up. |
fringeColor | string | — | Color of the highest, farthest curtain. |
edgeColor | string | — | Color of the thin fringe along the curtains' lower edge. |
intensity | number | — | Brightness of the aurora, 0 to 1. |
curtains | number | — | Number of curtains, 1 to 4. |
height | number | — | How high the curtains hang in the sky, 0 to 1. |
rays | number | — | Definition of the vertical rays, 0 (a soft glow) to 1 (sharp rays). |
stars | number | — | How many stars show, 0 to 1. |
twinkle | number | — | How much the stars twinkle, 0 to 1. |
mountains | boolean | — | Draw two mountain ridges along the bottom. |
mountainColor | string | — | Color of the near ridge; the far ridge blends it toward the horizon. |
speed | number | — | Motion speed, 1 is the default pace. |
interactive | boolean | — | The curtains lean with the cursor like wind. |
wind | number | — | How far the curtains lean, 0 to 1. |
paused | boolean | — | Freeze the sky on its current frame. |
className | string | — | |
children | ReactNode | — |