Cold Light Inside a Single Drop
Inspired by Luminol on Wikipedia
Built with Three.js · MeshPhysicalMaterial · ShaderMaterial · EffectComposer
Techniques Refractive transmission (IOR 1.33) · Procedural advection field · Particle settling physics · UnrealBloomPass
Direction Treat one droplet like a complete laboratory world with irreversible state changes
Result Four clicks escalate from subtle disturbance to precipitation, diffusion, and chemiluminescent glow
The Story
The idea started from a simple visual truth: chemistry is most dramatic at small scale. In a beaker, reactions feel broad and noisy. In a droplet, they feel surgical. You can watch transformation happen in one concentrated pocket of space, and every change feels irreversible.
Luminol was the perfect anchor. It is famous for emitting blue light under oxidation, but the glow only lands emotionally if the scene earns it first. So the experience is staged as a sequence: an almost invisible disturbance, then visible precipitate, then complex interference, then cold light. The final glow is not a jump scare; it is a consequence.
The Take
The page presents a single macro droplet on a dark lab surface. Interaction is intentionally constrained: click inside the droplet to inject the next reagent. Placement matters. Every injection writes into the internal field at that coordinate, so plumes and sediment are spatially different each run.
The first click barely registers. The second creates yellow precipitation and settling particles. The third introduces deep blue plumes that collide with the yellow residue and form muddy boundaries. The fourth triggers luminol: ambient light drops, bloom ramps, and the droplet temporarily becomes its own light source. Then the glow decays while the residue remains.
The piece is designed around consequence, not loop purity. Reset is optional and explicit. The default ending is altered state.
The Tech
Refractive shell first. The droplet uses MeshPhysicalMaterial with full transmission and water IOR (1.33). Without this, the chemistry layer looks flat and synthetic. With it, even static content behind the shell gains believable optical weight.
Hybrid reaction field. Instead of shipping a full Navier-Stokes FBO pipeline in v1, the interior uses a shader with splat history and procedural advection. Each click records timed UV splats; the fragment shader applies age-dependent spread, swirl, and noise-driven drift to produce plume behavior that reads fluid without expensive multi-pass simulation.
Precipitate as persistent evidence. A dedicated Points system handles solids. Particles spawn at injection coordinates, receive small turbulence impulses, then settle under gravity to a fixed floor band. Settled particles remain, so the visual state keeps memory.
Glow as a lighting event, not a color tweak. Luminol phase drives multiple systems together: internal emissive contribution, scene light attenuation, bloom threshold/strength shift, and post-pass vignette/grain ramp. This coupling is what makes the glow feel physically present.
Performance discipline. DPR is capped, post-processing is minimal, and particle counts are bounded. The target behavior is stable 60fps desktop and 30fps mobile with reduced-motion fallback preserving interaction and state logic.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.