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 pool floor: pale hand-laid tiles and a lane mark bent by the water, sun-dappled caustic light drifting across them with a faint rainbow edge, and ripple rings that spread from the cursor, taps and the occasional drop. Tile, grout, lane, water and light colors, tile size, caustic strength and scale, refraction, color split, speed, ripples and rain are all props. It grows softly out of its tile color on load, the resolution adapts to the device, it pauses offscreen, holds a still frame for reduced motion and falls back to a tiled CSS grid without WebGL.
The import and the props worth knowing about, in one place.
import { PoolCaustics } from "@/components/beste/component/pool-caustics";
// As a layer behind content
<section className="relative min-h-[40rem]">
<PoolCaustics className="absolute inset-0" />
<div className="relative">...</div>
</section>
<PoolCaustics
className="min-h-[32rem]"
tileColor="#f4efe6" // any CSS color
laneColor="#b8452c"
tileSize={12} // tiles across the height
caustics={0.9} // brighter light, 0 to 1
refraction={0.8} // the water bends the grid more
rain={0} // no ripples on their own
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
tileColor | string | — | Color of the pale floor tiles. Any CSS color. |
groutColor | string | — | Color of the grout lines between tiles. |
laneColor | string | — | Color of the lane mark tiles. |
waterColor | string | — | Color of the water laid over the floor. |
lightColor | string | — | Color of the caustic light. |
tint | number | — | How strongly the water tints the floor, 0 to 1. |
tileSize | number | — | Tiles across the height of the surface. |
lane | boolean | — | Draw the lane mark on the floor. |
caustics | number | — | Brightness of the caustic light, 0 to 1. |
causticScale | number | — | Size of the caustic network, 0 (large cells) to 1 (fine mesh). |
refraction | number | — | How much the water bends the tile grid, 0 to 1. |
colorSplit | number | — | Rainbow split on the caustic edges, 0 to 1. |
speed | number | — | Motion speed, 1 is the default pace. |
ripples | number | — | Strength of every ripple ring, 0 to 1. |
rain | number | — | How often ripples start on their own, 0 (never) to 1 (often). |
interactive | boolean | — | Ripples follow the cursor and taps. |
paused | boolean | — | Freeze the water on its current frame. |
className | string | — | |
children | ReactNode | — |