The Thermal Ghost: Simulating Bragg Diffraction on a Digital Surface
Inspired by Thermochromism on Wikipedia
Built with Raw WebGL2 · GLSL Fragment Shaders · Ping-Pong Framebuffers
Techniques Bragg Diffraction Color Mapping · CIE 1931 Spectral Approximation · GPU Heat Simulation
Direction Simulate thermochromic liquid crystals as a GPU heat field where cursor movement injects thermal energy that diffuses, decays, and maps to the visible spectrum through Bragg’s law
Result A dark surface where your cursor paints spectral rainbows that linger as thermal ghosts, cooling through the full visible spectrum before fading to black
The Story
In 1975, a jeweller named Marvin Wernick watched a physician take a patient’s temperature with a liquid crystal strip pressed to the forehead. The crystals shifted color with body heat — blue to green to red, a visible thermometer. Wernick thought: what if you could wear that?
The mood ring was born. Thermochromic liquid crystals bonded to a silver band, supposedly revealing your emotional state through color. The science was real, even if the mood-reading was nonsense: the crystals contained stacked molecular layers that reflected different wavelengths of light depending on their spacing. Heat compressed the layers. Compressed layers reflected shorter wavelengths. Your body temperature literally tuned the crystal like a prism.
Sixteen years later, Generra Sportswear put the same principle on T-shirts. Hypercolor: clothing that changed color where you touched it. Where your arm pressed against your body. Where someone’s hand rested on your shoulder. $105 million in revenue the first year. Bankruptcy the next.
The public craved the intimacy of visible warmth — then couldn’t sustain it. Turns out, people don’t actually want the evidence of where they’ve been touched.
The Take
A dark surface. Near-black, with a faint blue undertone — the deep indigo of a liquid crystal layer at rest. Cold crystals with wide molecular spacing, reflecting only infrared. Invisible heat.
Move your cursor, and the surface responds. Not with a simple glow — with physics. Your cursor injects heat into a simulated temperature field. That heat spreads through diffusion, following the same equations that govern real thermal conduction. Where temperature rises, the crystal layer spacing compresses, and the reflected wavelength shifts into the visible spectrum.
Red first. Then orange, yellow, green, cyan, blue, violet — the full Bragg diffraction rainbow, sweeping through as temperature climbs. The hottest point, where your cursor dwells, goes white — all wavelengths, saturated. The edges of each thermal bloom shimmer with iridescence as steep temperature gradients create rapid wavelength shifts.
Then you move on. And the ghost lingers. The heat diffuses outward, decays exponentially, and the colors reverse — violet fading through the spectrum back to red, then to infrared, then to darkness. Your mark erases itself. The surface forgets you.
The Tech
The experience is built entirely in raw WebGL2 — no Three.js, no libraries. Three shader programs and two framebuffer objects.
The Heat Field. Temperature is stored as a floating-point texture at half viewport resolution — a 2D scalar field where each texel holds a value from 0 (cold) to 1 (hot). Two framebuffers ping-pong: one reads, the other writes, then they swap. This is the same technique used in GPU fluid simulations, applied here to the simpler problem of heat conduction.
Heat Injection. When the cursor is active, a Gaussian heat kernel is stamped onto the temperature field at the cursor position. The kernel’s sigma is ~35 pixels (at 1080p), creating a soft thermal bloom. Injection intensity scales with cursor velocity: still cursor = deep slow pool; fast sweep = bright streak. The velocity mapping is intensity = 0.045 + 0.035 * min(speed / 800, 1.0).
Diffusion + Decay. Each frame, a Jacobi iteration step diffuses heat: each texel averages with its four neighbors, weighted by a diffusion coefficient of 0.22. Then the entire field decays multiplicatively by 0.993, giving a half-life of ~1.65 seconds. This creates the characteristic behavior: heat blooms outward organically, then fades. The interplay of injection rate, diffusion speed, and decay rate determines the visual character — too much diffusion and marks blur instantly; too little and they sit in place like paint.
Spectral Display. The display shader maps temperature to color through actual physics. Temperature determines crystal layer spacing via Bragg’s law, which gives a reflected wavelength. That wavelength is converted to RGB using a CIE 1931 spectral approximation — the same math used in scientific spectral rendering. The result: colors that feel physically correct because they are. The rainbow isn’t a gradient — it’s a spectrum.
Micro-Behaviors. At steep temperature gradients (edges of thermal blooms), an animated noise displacement creates iridescent shimmer — the GLSL equivalent of liquid crystals catching light at shifting angles. Closed cursor paths create thermal pooling, an emergent behavior of the heat equation where diffusion feeds inward from all sides. Fast cursor strokes create negative trails — the center cools faster than the diffused edges, briefly inverting.
The Experience
A dark screen. “Touch the surface.” The text is barely there — white at 35% opacity, system font, no design ambition. It’s a prompt, not content.
You move. The text vanishes. Color blooms from your cursor — vivid, spectral, surprising. Not the gentle glow you expected. A full rainbow halo, red at the edges, white-hot at the center if you hold still.
You paint. Sweeping curves leave thermal streaks that linger and fade. Dwell spots build deep wells of heat that take seconds to cool. The spiral you trace creates overlapping interference where thermal halos meet.
Then you stop. And you watch. The ghosts shift through the spectrum in reverse — hot colors cooling through warm, through cool, through blue, through nothing. Five seconds, and the surface has forgotten. Eight seconds, and it’s dark again.
Every mark you make erases itself. The surface remembers you — then it doesn’t.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.