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 wall of warm afternoon light falling through venetian blinds: slat shadows that soften with distance and sway in a slow breeze, a window mullion, the blurred shadow of a potted plant, dust drifting through a faint beam and plaster grain, with the sun shifting a little toward the cursor. Wall and light colors, slat count, softness, sway, leaves, dust, follow and speed are props. Grows softly out of the wall color on load, adapts its resolution, pauses offscreen, holds a still frame for reduced motion and falls back to a striped CSS gradient without WebGL.
The import and the props worth knowing about, in one place.
import { SunBlinds } from "@/components/beste/component/sun-blinds";
// As a layer behind content
<section className="relative min-h-[40rem]">
<SunBlinds className="absolute inset-0" />
<div className="relative">...</div>
</section>
<SunBlinds
className="min-h-[32rem]"
wallColor="#c9d3cf" // any CSS color, tokens included
lightColor="#fff1d6"
slats={16} // more, thinner slats
softness={0.8} // softer slat edges
sway={0.2} // a quieter breeze
leaves={false} // no plant shadow
dust={0.8} // more dust in the beam
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
wallColor | string | — | Plaster wall the light falls on. Any CSS color. |
lightColor | string | — | Color of the afternoon light. |
slats | number | — | Number of blind slats inside the window of light. |
softness | number | — | How soft the slat edges are, 0 (crisp) to 1 (diffuse). |
sway | number | — | How much the slats sway in the breeze, 0 to 1. |
leaves | boolean | — | A potted plant casts its leaves into the light. |
dust | number | — | Dust drifting through the beam, 0 (none) to 1. |
interactive | boolean | — | The sun shifts a little toward the cursor. |
follow | number | — | How far the sun follows the cursor, 0 to 1. |
speed | number | — | Motion speed, 1 is the default pace. |
paused | boolean | — | Freeze the light where it is. |
className | string | — | |
children | ReactNode | — |