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 live WebGL surface that sets any landscape photo above a still lake and mirrors it in the water: a rolling swell drawn in perspective, glints on the crests, drops that land on their own and ripple rings that follow the cursor. Waterline, crop, water color, reflectivity, swell, speed, glints, rain and ripples are all props. Grows softly out of the water color on load, adapts its resolution to the device, pauses offscreen, holds a calm frame for reduced motion and falls back to the plain photo without WebGL.
The import and the props worth knowing about, in one place.
import { WaterReflection } from "@/components/beste/component/water-reflection";
// As a panel or a layer behind content
<WaterReflection
className="aspect-[16/8] rounded-md"
src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=2400&q=80"
alt="Snowy peaks under the Milky Way"
horizon={0.42} // waterline height, 0 to 1 from the bottom
crop={0.12} // trims the photo's foreground above the waterline
waterColor="#070b14" // any CSS color, tokens included
waves={0.6} // swell strength, 0 to 1
rain={0.4} // drops landing on their own, 0 to 1
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
src* | string | — | Photo shown above the water and mirrored in it. Loaded with CORS so WebGL can read it. |
alt | string | — | Description of the photo for screen readers. |
horizon | number | — | Height of the waterline from the bottom, 0 to 1. |
crop | number | — | Share of the photo's bottom cut away before it meets the water, 0 to 0.9. |
waterColor | string | — | Color of the water itself, seen where it reflects less. Any CSS color. |
reflectivity | number | — | How much of the landscape the water mirrors, 0 to 1. |
waves | number | — | Strength of the rolling swell, 0 to 1. |
speed | number | — | Motion speed, 1 is the default pace. |
glints | number | — | Sparkle of light on the wave crests, 0 to 1. |
rain | number | — | How often drops land on their own, 0 (never) to 1 (a light shower). |
interactive | boolean | — | Ripples follow the cursor across the water. |
ripples | number | — | Strength of every ripple ring, 0 to 1. |
paused | boolean | — | Freeze the water on its current frame. |
className | string | — | |
children | ReactNode | — |