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 generative Canvas 2D background where thousands of fine ink strokes follow a slowly turning current, fade back into the paper and are drawn again, gathering into heavier brush lines around the cursor. Ink and paper colors, density, speed, swirl, trail, weight, opacity, the side the ink gathers on and the brush are all props. Ink and paper follow the theme by default, the stroke count adapts to the device, it pauses offscreen and holds a still drawing for reduced motion.
The import and the props worth knowing about, in one place.
import { InkFlow } from "@/components/beste/component/ink-flow";
// As a layer behind content
<section className="relative min-h-[40rem]">
<InkFlow className="absolute inset-0" />
<div className="relative">...</div>
</section>
<InkFlow
className="min-h-[32rem]"
inkColor="var(--primary)" // any CSS color, tokens included
paperColor="var(--background)"
density={0.7} // how many strokes, 0 to 1
swirl={0.8} // tight eddies instead of long sweeps
trail={0.3} // strokes fade sooner
gather="left" // "right" (default) | "left" | "center" | "none"
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
inkColor | string | — | Color of the strokes. Any CSS color, tokens included. |
paperColor | string | — | Color of the paper the strokes fade into. |
density | number | — | How many strokes are drawn at once, 0 to 1. |
speed | number | — | Motion speed, 1 is the default pace. |
swirl | number | — | How tightly the currents curl, 0 (long sweeps) to 1 (tight eddies). |
trail | number | — | How long strokes linger before the paper takes them back, 0 to 1. |
weight | number | — | Stroke weight, 0 (hairline) to 1 (heavy brush). |
opacity | number | — | Ink strength of each stroke, 0 to 1. |
gather | "left" | "center" | "right" | "none" | — | Side of the surface the ink gathers on, leaving the rest quiet for text. |
interactive | boolean | — | Heavier brush strokes gather around the cursor. |
brush | number | — | How strongly the cursor bends and thickens the ink, 0 to 1. |
paused | boolean | — | Freeze the drawing where it is. |
className | string | — | |
children | ReactNode | — |