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 field of ripe wheat at golden hour on Canvas 2D: thousands of stalks planted in perspective rows run from dark, backlit stems in the foreground to pale haze at the horizon under a low sun. Gusts roll across the field as traveling bands and every stalk bends on a springy lag; the cursor brushes through the field like a hand, parting the stalks, and a quick sweep sends a ripple running out. Sky, sun, grain, density, wind, gust speed, sway and brush are all props. The stalks grow in softly on load, the stalk count adapts to the device, it pauses offscreen and holds a still field for reduced motion.
The import and the props worth knowing about, in one place.
import { WheatField } from "@/components/beste/component/wheat-field";
// As a layer behind content
<section className="relative min-h-[40rem]">
<WheatField className="absolute inset-0" />
<div className="relative">...</div>
</section>
<WheatField
className="min-h-[32rem]"
skyTop="#3b4a6b" // any CSS color
skyHorizon="#f7c98b"
sunColor="#ffb86b"
grainColor="#c98f2e"
wind={0.8} // stronger gusts, 0 to 1
gustSpeed={1.4} // gusts travel faster
brush={0.9} // the cursor parts the stalks further
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
density | number | — | How thickly the field is planted, 0 to 1 |
skyTop | string | — | Sky color at the top. Any CSS color. |
skyHorizon | string | — | Sky color at the horizon; distant stalks fade into it |
sunColor | string | — | Glow of the low sun on the horizon |
grainColor | string | — | Color of the ripe grain in the foreground |
wind | number | — | Strength of the gusts rolling across the field, 0 to 1 |
gustSpeed | number | — | How fast the gusts travel, 1 is the default pace |
sway | number | — | Gentle sway of every stalk between gusts, 0 to 1 |
brush | number | — | How strongly the cursor parts the stalks, 0 to 1 |
interactive | boolean | — | The cursor brushes through the field like a hand |
paused | boolean | — | Hold the field still |
className | string | — | |
children | ReactNode | — |