The Most Violent Transformation Looks Like Stillness
The story behind The Vapor
Inspired by Vaporization on Wikipedia
Built with Pure WebGL2 (no Three.js) · GLSL Fragment Shaders · CPU Fluid Simulation
Techniques 512×512 Moisture Grid · Text Nucleation Mask · Voronoi Refractive Droplets · Gravity-Driven Coalescence · Noise-Modulated Clearing · Breath Halo · Auto-Fog Idle System
Direction Your cursor is warm breath on cold glass — condensation forms into words that exist only while you’re close enough to fog the surface, then evaporate when you leave
Result A frosted window hiding poetry about latent heat, revealed through breath-like interaction, with physically-motivated droplet formation and evaporation
The Story
Boil a pot of water. Watch the thermometer. It climbs steadily — 60, 70, 80, 90, 100. Then it stops. The water is boiling violently, steam pouring off the surface, and the temperature does not change. Not by a fraction of a degree. For minutes.
This is latent heat. The energy pouring into the water is no longer raising the temperature. It is breaking bonds. Every molecule that escapes from liquid to gas absorbs 2,260 joules per gram — five times the energy it took to heat that water from freezing to boiling. The most energetically dramatic phase of the entire process is the one where the thermometer sits perfectly still.
The word “latent” comes from the Latin latēre: to lie hidden. Joseph Black named it in 1761. He couldn’t see the energy going in. He could only see that it vanished — absorbed entirely into the invisible work of transformation.
That felt like something worth building around. Not the steam. The stillness.
The Take
A frosted window. The glass is nearly opaque, covered in a fine cool-blue frost — vec3(0.87, 0.90, 0.95), the color of ice under overcast sky. Behind it, a dark charcoal world: vec3(0.13, 0.14, 0.18), barely visible through the frost.
Move your cursor. It becomes warm breath. Moisture condenses in a soft radial halo around it, and where that moisture meets text — hidden poetry rendered into a nucleation mask — the frost clears into constellations of water droplets. Not uniform transparency. Organic, noise-modulated clusters of tiny lenses, each one refracting the dark surface behind the glass. Text appears as dark near-black letters seen through clear droplets on frosted glass.
The text is five fragments about latent heat:
The thermometer reads 100°C. It has read 100°C for seven minutes.
All that energy — enough to light a city — and the number doesn’t move.
The bonds are breaking. They have been breaking since the heat began.
The most violent transformation looks exactly like stillness.
Latent: from Latin latēre. To lie hidden.
Move away, and the words evaporate. The frost heals back. The glass forgets you were there. You have to stay close — keep breathing — to hold the words in existence. Attention is condensation. Absence is evaporation.
If you do nothing for eight seconds, the glass fogs itself from the bottom up. The experience doesn’t wait forever. The words want to be read.
The Tech
CPU Moisture Simulation. A 512×512 Float32Array runs the condensation physics on the CPU every frame. Three phases per tick: injection (cursor breath deposits moisture with Gaussian falloff, boosted 4× on text-mask pixels for preferential nucleation), evaporation (exponential decay at 0.988 per frame outside the breath radius), and gravity (moisture above a 0.30 threshold transfers downward proportional to its squared density). A coalescence pass merges vertically adjacent heavy cells, concentrating moisture into fewer, fatter drops. The entire grid is packed into RGBA8 — red channel for moisture, green for text mask — and uploaded to the GPU each frame via texSubImage2D.
Text Nucleation Mask. A hidden canvas renders all five poetry blocks in Manrope 400 at simulation resolution. This bitmap is sampled as a float array: where text exists, moisture injection is multiplied by 4.0, causing condensation to preferentially form along letter paths. The text itself is never drawn to screen — it exists only as a bias field in the physics simulation. What you see is the consequence of text, not the text itself.
Noise-Modulated Clearing. Text areas don’t clear uniformly. Two octaves of value noise (80× and 160× frequency) create a stochastic droplet pattern. A moisture-dependent threshold controls density — at full saturation roughly 60% of text pixels show drops, creating the organic, incomplete look of real condensation. The frost alpha is reduced only where noise AND moisture AND text mask all coincide.
Voronoi Refractive Drops. On top of the noise clearing, a Voronoi cell pattern generates larger water droplets along text paths. Each cell’s distance field produces a smooth drop shape with moisture-dependent radius. Screen-space derivatives (dFdx, dFdy) of the cell distance give a refraction normal, which offsets UV sampling of the dark charcoal background — each drop acts as a tiny lens. Meniscus darkening at cell edges and dual-light specular highlights (powers of 35 and 65) add physical presence. Non-text fog areas get a separate, subtler Voronoi mist texture with smaller drops and gentler specular.
Breath Halo. When the cursor is active, a soft Gaussian glow marks the breath zone. Chromatic fringing at moisture boundaries — red/blue channel offsets sampled along the moisture gradient — adds optical depth at the edges where condensation meets dry glass.
Auto-Fog. After 8 seconds of inactivity, a fog line rises from the bottom of the frame, injecting moisture progressively upward. Text nucleation boost applies here too, so the idle reveal follows the same physics as cursor interaction — words condense out of the rising fog rather than simply appearing.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.