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 that raymarches a 3D form and prints it with 1-bit ordered dithering at a chunky pixel size, turning toward the cursor. Ink and paper colors, pixel size, the form (torus, blobs or linked rings), the dither matrix, exposure, backdrop glow, speed and tilt are all props. Ink and paper follow the theme by default, the image dissolves softly in from bare paper on load, slower devices get chunkier pixels instead of dropped frames, it pauses offscreen and holds a still frame for reduced motion.
The import and the props worth knowing about, in one place.
import { DitherForm } from "@/components/beste/component/dither-form";
// As a panel or a layer behind content
<DitherForm className="aspect-square" />
<DitherForm
className="min-h-[32rem]"
inkColor="var(--primary)" // any CSS color, tokens included
paperColor="var(--background)"
pixelSize={4} // CSS pixels per dither dot
shape="rings" // "torus" (default) | "blobs" | "rings"
pattern="bayer4" // "bayer8" (default) | "bayer4"
exposure={0.7} // brighter form, 0 to 1
tilt={0.8} // turns further toward the cursor
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
inkColor | string | — | Color of the lit dots. Any CSS color, tokens included. |
paperColor | string | — | Color behind the dots. |
pixelSize | number | — | Size of one dithered pixel in CSS pixels. |
shape | "torus" | "blobs" | "rings" | — | The form being rendered. |
pattern | "bayer4" | "bayer8" | — | Ordered dither matrix: bayer4 reads coarse and graphic, bayer8 finer. |
exposure | number | — | Brightness of the form, 0 (dark) to 1 (bright). |
backdrop | number | — | Faint dotted glow behind the form, 0 to 1. |
speed | number | — | Motion speed, 1 is the default pace. |
interactive | boolean | — | Turn toward the cursor. |
tilt | number | — | How far the form turns toward the cursor, 0 to 1. |
paused | boolean | — | Freeze the form on its current frame. |
className | string | — | |
children | ReactNode | — |