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 living constructivist poster in crisp SVG: circles, half and quarter circles, squares, a triangle, bars and hairline rules snapped to a modular grid rearrange into a new balanced composition every few seconds. Each form springs to its new place with a slight stagger, quarter circles turning in quarter steps and bars sliding along their axis, one muted form printing over the rest like overlapping inks. Forms lean away from the cursor and a click moves on at once. Palette, form count, seed, rhythm, spring, stagger, repel and grid are all props; the forms grow in one after another on load, it pauses offscreen and holds one arrangement for reduced motion.
The import and the props worth knowing about, in one place.
import { BauhausComposition } from "@/components/beste/component/bauhaus-composition";
// As a panel or a layer behind content
<BauhausComposition className="aspect-[4/5]" />
<BauhausComposition
className="min-h-[32rem]"
inkColor="var(--foreground)" // any CSS color, tokens included
accentColor="#d9412b" // the loud color, usually the big circle
secondaryColor="#e3b23c"
tertiaryColor="#2c5aa0"
shapes={18} // 6 to 24 forms
seed={3} // a different cast and sequence
interval={6} // seconds per arrangement
bounce={0.8} // livelier arrival
columns={8} // a coarser grid
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
inkColor | string | — | Color of the bars, rules and dark forms. Any CSS color, tokens included. |
paperColor | string | — | Color of the ground behind the composition. |
accentColor | string | — | The loud color, usually the big circle. |
secondaryColor | string | — | First muted color for quarter circles and squares. |
tertiaryColor | string | — | Second muted color. |
shapes | number | — | Number of forms in the composition, 6 to 24. |
seed | number | — | Seed for the cast of forms and every arrangement they move through. |
interval | number | — | Seconds each arrangement holds before the next one. |
stiffness | number | — | How briskly forms travel to their new place, 0 to 1. |
bounce | number | — | Overshoot as they arrive, 0 (settled) to 1 (lively). |
stagger | number | — | Seconds between one form leaving and the next. |
repel | number | — | How far forms lean away from the cursor, 0 to 1. |
columns | number | — | Columns of the modular grid the forms snap to. |
overprint | boolean | — | One muted form prints over the others with multiply, like overlapping inks. |
interactive | boolean | — | Forms lean away from the cursor and a click moves to the next arrangement. |
paused | boolean | — | Hold the current arrangement. |
className | string | — | |
children | ReactNode | — |