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 light seen through reeded glass: a procedural field with a glow pooled at the source corner, a broad haze and a narrow accent band slowly bends behind a row of rounded glass reeds, each magnifying and tipping its own slice, with soft seams, shaded flanks, a fine glint and static film grain. A warm lamp behind the glass follows the cursor. Colors, light direction, band position, reed width, magnification, shading, grain, speed, lamp and a readability veil are all props. Adapts its resolution, pauses offscreen, holds a still frame for reduced motion and shows the same light as a CSS gradient before the canvas is ready or without WebGL.
The import and the props worth knowing about, in one place.
import { ReededLight } from "@/components/beste/component/reeded-light";
// As a layer behind content
<section className="relative min-h-[40rem]">
<ReededLight className="absolute inset-0" veilX={0.3} veilY={0.7} veil={0.4} />
<div className="relative">...</div>
</section>
<ReededLight
className="min-h-[32rem]"
groundColor="#0b0a08" // any CSS color, tokens included
glowColor="#f4e6c8"
hazeColor="#2f5a4a"
accentColor="#f2a33a"
angle={120} // the light runs from the top right toward the bottom left
band={0.58} // where the bright band crosses
reedWidth={24} // narrower reeds, in CSS pixels
magnify={0.8} // stronger lenses
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
groundColor | string | — | Darkest tone of the field, also used for the veil and vignette. |
glowColor | string | — | Soft glow pooled in the corner the light comes from. |
hazeColor | string | — | Broad haze band across the field. |
accentColor | string | — | Narrow bright band, crisp on its leading edge. |
angle | number | — | Direction the light runs across the field, in degrees (0 is left to right, 90 is top to bottom). |
band | number | — | Where the accent band crosses the field, 0 to 1. |
reedWidth | number | — | Width of one glass reed, in CSS pixels. |
magnify | number | — | How much each reed magnifies the light behind it, 0 to 1. |
ripple | number | — | Slow sway in the reeds, like hand-cast glass, 0 (straight) to 1. |
shading | number | — | Shadow on each reed's flank and glint on its edge, 0 to 1. |
grain | number | — | Film grain, 0 to 1. It also keeps long gradients from banding. |
speed | number | — | Motion speed, 1 is the default pace. |
interactive | boolean | — | A warm lamp behind the glass follows the cursor. |
lamp | number | — | Strength of that lamp, 0 to 1. |
veilX | number | — | Center of a darker veil that keeps copy readable, 0 to 1 on each axis (y runs down). |
veilY | number | — | |
veil | number | — | Strength of the veil, 0 (off) to 1. |
paused | boolean | — | Freeze the light where it is. |
className | string | — | |
children | ReactNode | — |