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 Canvas 2D starfield streaming from a vanishing point that leans toward the cursor. Raise the warp prop and the stars ease into long hyperspace streaks while a soft tunnel glow opens; lower it and they settle back to a slow cruise. Space, star and glow colors, density, speed, streak length, glow, horizon and follow are all props. The stars fade in softly on load, the star count adapts to the device, it pauses offscreen and holds a still field for reduced motion.
The import and the props worth knowing about, in one place.
import { WarpField } from "@/components/beste/component/warp-field";
import { useState } from "react";
// Drive the warp from anything: a button hover, a scroll position, a timer
const [warp, setWarp] = useState(0);
<section className="relative min-h-[40rem]">
<WarpField className="absolute inset-0" warp={warp} />
<button
onPointerEnter={() => setWarp(1)}
onPointerLeave={() => setWarp(0)}
className="relative"
>
Reserve a seat
</button>
</section>
<WarpField
className="min-h-[32rem]"
spaceColor="#04050a" // any CSS color, tokens included
glowColor="#96afff"
density={0.8} // more stars, 0 to 1
streaks={0.7} // longer streaks at warp
horizon={0.5} // vanishing point height
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
spaceColor | string | — | Color of empty space behind the stars. Any CSS color, tokens included. |
starColor | string | — | Color of the nearest, brightest stars. |
midColor | string | — | Color of the middle distance. |
farColor | string | — | Color of the faintest, farthest stars. |
glowColor | string | — | Color of the tunnel glow that opens at warp. |
density | number | — | How many stars fill the field, 0 to 1. |
speed | number | — | Cruising speed, 1 is the default pace. |
warp | number | — | Throttle toward hyperspace, 0 (cruise) to 1 (full warp). Eased, so it can be toggled freely. |
streaks | number | — | Length of the streaks at warp, 0 to 1. |
glow | number | — | Strength of the tunnel glow at warp, 0 to 1. |
horizon | number | — | Height of the vanishing point, 0 (top) to 1 (bottom). |
interactive | boolean | — | The vanishing point leans toward the cursor. |
follow | number | — | How far it leans, 0 to 1. |
paused | boolean | — | Freeze the field where it is. |
className | string | — | |
children | ReactNode | — |