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 koi pond seen from above: kohaku, sanke, showa and golden koi swim with a flowing S-curve, trailing their fins and fluttering tails over a mottled green floor lit by drifting sunlight caustics, each casting a soft shadow below, while lily pads with a flower or two bob on the surface. The fish grow curious and circle the cursor, a click scatters food and sends ripple rings across the water, and now and then a koi breaks the surface for a breath. Fish count, varieties, water color, lily pads, caustics, ripples, curiosity and pace are props. It pauses offscreen, holds a still pond for reduced motion and keeps swimming on a flat floor without WebGL.
The import and the props worth knowing about, in one place.
import { KoiPond } from "@/components/beste/component/koi-pond";
// As a layer behind content
<section className="relative min-h-[40rem]">
<KoiPond className="absolute inset-0" />
<div className="relative">...</div>
</section>
<KoiPond
className="min-h-[32rem]"
fish={9} // 1 to 12 koi
palette="golden" // "mixed" (default) | "kohaku" | "golden"
waterColor="#12312d" // the pond floor, any CSS color
curiosity={0.9} // how readily they gather at the cursor, 0 to 1
lilyPads={false}
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
fish | number | — | Number of koi in the pond, 1 to 12 |
palette | "mixed" | "kohaku" | "golden" | — | Which varieties swim: a mix, red and white kohaku, or golden fish |
waterColor | string | — | Color of the pond floor. Any CSS color |
lilyPads | boolean | — | Floating lily pads and a flower or two |
caustics | number | — | Strength of the sunlight caustics on the floor, 0 to 1 |
ripples | number | — | Strength of the ripple rings on the surface, 0 to 1 |
curiosity | number | — | How readily the koi gather toward the cursor, 0 to 1 |
speed | number | — | Swimming pace, 1 is the default |
interactive | boolean | — | Koi follow the cursor, and a click drops food |
paused | boolean | — | Hold the pond still |
className | string | — | |
children | ReactNode | — |