Sharp where it touches the glass.
A WebGPU frosted-glass shader for React: a monstera or falling autumn leaves behind an etched pane, crisp where they touch the glass and dissolving with distance.
Part of Aperveil Pro · Coming soon. The live demo, editor and downloads will open in a later release. Free shaders and blocks are available now.
THE SYSTEM BEHIND THE SURFACE
Inside Frost Glass.
An etched pane scatters every ray that crosses it into a narrow cone, so what it shows of an object is blurred in proportion to the object's distance behind the glass: a leaf pressed against it is crisp to the veins, a leaf a hand's width back is a soft shadow, and the open light beyond has no edges at all. The shader gives every leaf and stem its own depth and convolves each shape with a Gaussian of that depth's width in closed form (the normal CDF of its signed distance), so blur is exact per shape rather than a post-process. Thin parts lose contrast first as the kernel outgrows them, which is why the monstera's slits and windows vanish long before the blade. Wind rocks each stem at its own rate and tips the blade toward and away from the pane, so leaves drift in and out of focus. The etched face also returns some room light as a milky veil and catches light in its pits; unetched clear lines cut through the frost, and through them the same leaves are seen sharp. The pointer presses what is beneath it flat to the glass. Behind the pane can stand the monstera, or autumn leaves falling past the glass in a loop: maple, oak and birch, each coloured as it turns, gliding side to side like a pendulum and tilting into each swing, some turning over so their width comes and goes, and drifting toward or away from the pane so that one crossing close to the glass sharpens for a moment.
It does not blur the page behind the canvas or any HTML: the plant and the light are procedural. Shapes are drawn back to front in a fixed order, so two leaves crossing in depth do not swap. There is no condensation, no ice crystal growth and no refraction of the frame; patterned (pebbled or reeded) obscure glass is a different surface.
No published timing sample. Profile this effect on your target devices.
Frost
How widely the etched face scatters; blur grows with it and with distance behind the pane.
Grain
Visible sparkle of the etched pits.
Veil
Milky light scattered back from the room side.
Clear lines
Unetched lines through which the plant is seen sharp.
Color Looks preserve these settings. Open the editor for all 17 controls.
THE SURFACE IN CONTEXT
Made for a real interface.
Use it for a spa, a bathroom or interiors brand, an architect, a skincare line or a calm product page. The pane stays bright and quiet where type sits; place the plant in a corner with Plant position and let the clear lines run under a headline or turn them off.
Steam rooms · Cold plunge
Slow mornings, soft light.
An illustrative page for a bath house with etched-glass cabins and a garden behind them.
An illustrative layout. Your content stays in HTML; the shader sets the atmosphere.
APERVEIL PRO
Coming soon.
This Pro surface's demo, editor and downloads will open in a later release. Free shaders and blocks are available now.
Explore shadersA FEW USEFUL DETAILS
Before you ship.
What this surface does, where it fits, and where it stops.
ANOTHER WAY TO SEE IT
Keep exploring.
YOUR COLORS. YOUR CONTEXT.

