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 sun print: procedurally drawn ferns, grasses, seed heads, veined leaves and flowers lie on brushed watercolor paper while the coating develops from pale chemistry to deep Prussian blue, leaving the plants as white silhouettes with soft lifted edges. The cursor casts shade that holds back the blue and leaves a fading ghost, and every few seconds a wash of water rinses the print and a new arrangement develops. Colors, specimen count, seed, exposure time, wash interval, brushed edge, grain and shade are all props. Fades up softly out of the bare paper on load, adapts its resolution, pauses offscreen, shows a finished print for reduced motion and falls back to a CSS gradient without WebGL.
The import and the props worth knowing about, in one place.
import { Cyanotype } from "@/components/beste/component/cyanotype";
// As a layer behind content
<section className="relative min-h-[40rem]">
<Cyanotype className="absolute inset-0" />
<div className="relative text-white">...</div>
</section>
<Cyanotype
className="min-h-[32rem]"
blueColor="#1c3f6e" // any CSS color
specimens={7} // plants per print, 1 to 9
seed={42} // same seed, same arrangement
focus="center" // "right" (default) | "center" | "full"
exposureTime={4} // seconds to develop
washInterval={0} // never rinse and redevelop
shade={0.8} // how strongly the cursor holds back the blue
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
blueColor | string | — | Deep color the exposed chemistry turns. Any CSS color. |
paperColor | string | — | Color of the watercolor paper around and under the specimens. |
chemistryColor | string | — | Color of the fresh, unexposed coating. |
specimens | number | — | How many specimens lie on each print, 1 to 9. |
seed | number | — | Seed for the specimen arrangement; the same seed always lays out the same print. |
focus | "right" | "center" | "full" | — | Where the specimens gather, leaving the rest of the print open for text. |
exposureTime | number | — | Seconds until the print is almost fully developed. |
washInterval | number | — | Seconds between washes; each wash rinses the print and a new arrangement develops. 0 turns washing off. |
brushEdge | boolean | — | Ragged, brushed edges where the coating stops and bare paper begins. |
grain | number | — | Paper grain and fiber, 0 to 1. |
shade | number | — | How much the cursor's shade holds back the exposure, 0 to 1. |
interactive | boolean | — | The cursor casts shade like a hand over the print. |
paused | boolean | — | Freeze the print where it is. |
className | string | — | |
children | ReactNode | — |