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 layered paper-cut landscape: six hills with clumps of cypress, pine and round paper trees, soft mist between the layers, a low sun that sets behind the far hills on scroll, drifting clouds and a small flock of birds that flap, glide and bob. Layers spread in depth with pointer and scroll parallax. Palette, paper, sun, clouds, birds, mist, tree density and parallax depth are all props, and reduced motion keeps the scene still.
The import and the props worth knowing about, in one place.
import { PaperLandscape } from "@/components/beste/component/paper-landscape";
// As a layer behind content
<section className="relative min-h-[40rem]">
<PaperLandscape className="absolute inset-0" />
<div className="relative">...</div>
</section>
<PaperLandscape
className="min-h-[32rem]"
palette={["#dfe7ea", "#c3d3d8", "#9db6bf", "#6f919e", "#48707f", "#284b58"]} // far to near
paperColor="#eef3f4"
sunColor="#f2c14e"
birds={3} // 0 to 5
trees={0.8} // denser woods
parallax={0.7} // deeper pointer and scroll parallax
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
palette | string[] | — | Six hill colors from the farthest layer to the nearest |
paperColor | string | — | Color of the paper behind the hills and of the mist between them. Any CSS color, tokens included. |
sun | boolean | — | Show the low sun that sets behind the far hills on scroll |
sunColor | string | — | Color of the sun; its highlight and rim are mixed from it |
clouds | boolean | — | Show the drifting paper clouds |
cloudColor | string | — | Color of the clouds |
birds | number | — | Birds in the flock, 0 to 5 |
birdColor | string | — | Color of the birds; the nearest hill color when omitted |
mist | boolean | — | Soft mist between the hill layers |
trees | number | — | How many trees grow on the hills, 0 (bare) to 1 (dense woods) |
parallax | number | — | Depth of the pointer and scroll parallax, 0 (flat) to 1 |
interactive | boolean | — | Layers follow the cursor |
paused | boolean | — | Freeze birds, clouds and parallax |
className | string | — | |
children | ReactNode | — |