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 window on a rainy evening: the photo behind the glass sits out of focus, a fine mist clings to the pane, small droplets gather and larger drops break free and run down in stop-start paths, clearing trails that slowly mist over again. Every drop is a tiny lens showing a sharp, flipped view of the scene with a dark rim and a highlight, and the cursor wipes the mist like a finger. Blur, mist, droplet density, drop rate and size, refraction, tint and the wipe are all props. Adapts its resolution, pauses offscreen, holds a still pane for reduced motion and falls back to a blurred photo without WebGL.
The import and the props worth knowing about, in one place.
import { RainGlass } from "@/components/beste/component/rain-glass";
// As a layer behind content
<section className="relative min-h-[40rem]">
<RainGlass
className="absolute inset-0"
src="https://images.unsplash.com/photo-1519501025264-65ba15a82390?w=2000&q=80"
alt="A city street at dusk"
/>
<div className="relative">...</div>
</section>
<RainGlass
className="min-h-[32rem]"
src="https://images.unsplash.com/photo-1519501025264-65ba15a82390?w=2000&q=80"
blur={0.8} // further out of focus, 0 to 1
fog={0.4} // lighter mist
rate={0.8} // more drops running down
dropSize={0.7} // larger drops
tintColor="#e8c9a0" // warm mist, any CSS color
recovery={0.2} // wiped glass stays clear longer
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
src* | string | — | Photo seen through the glass. Loaded with CORS so WebGL can read it. |
alt | string | — | Description of the photo for screen readers. |
blur | number | — | How far out of focus the view behind the glass is, 0 to 1. |
fog | number | — | Density of the mist on the glass, 0 to 1. |
density | number | — | How many small droplets cling to the glass, 0 to 1. |
rate | number | — | How often larger drops gather and run down, 0 to 1. |
dropSize | number | — | Size of every drop, 0 to 1. |
refraction | number | — | How strongly each drop bends the view behind it, 0 to 1. |
tintColor | string | — | Color the mist takes on. Any CSS color. |
wipe | boolean | — | The cursor wipes the mist like a finger on the glass. |
recovery | number | — | How quickly the glass mists over again, 0 to 1. |
interactive | boolean | — | Respond to the cursor. |
paused | boolean | — | Freeze the rain where it is. |
className | string | — | |
children | ReactNode | — |