Every curve, every ripple, every dissolution — governed by mathematics that fits on a single page.
The boundary line that divides ink from vapor is not a simple sine wave. It is a composite of three sine waves at different frequencies, amplitudes, and speeds — creating an organic, ever-shifting curve that feels alive.
Each wave component contributes a different scale of motion. The primary wave creates the broad hills and valleys. The secondary adds medium ripples. The tertiary provides fine texture — like wind on water. Together they produce a curve that never repeats exactly, mimicking natural fluid motion.
When you click on the boundary, a ripple propagates outward from the click point. This is modeled as a Gaussian wavefront — a pulse that travels while decaying in both space and time.
The three factors multiply together: the Gaussian envelope shapes the packet in space (peaked at the wavefront, falling off on both sides), the exponential decay reduces amplitude over time, and the sine oscillation creates the alternating crest-and-trough pattern within the packet. Multiple ripples can coexist and superimpose linearly.
The cursor ring uses the same superposition principle as the boundary, but wrapped around a circle. Instead of displacement along Y, the wave displaces the radius at each angle.
On click, an additional pulse term is added: a burst of 8px amplitude with 4 angular peaks, decaying as e^(−t·6) over ~0.6 seconds. An expanding ripple ring simultaneously radiates outward from the ring, creating a visible shockwave.
The vapor particles are driven by a multi-octave fractal Brownian motion — layered value noise at decreasing scales, creating organic swirling patterns.
The flow field produces two components: vₓ from noise at (x/s, y/s + 5.2 + z) and vᵧ from noise at (x/s + 5.2 + z, y/s + 0.5z). The offset decorrelates the two components, creating rotational flow rather than simple translation. Particles integrate these velocities with damping, creating the mesmerizing drift patterns.
Each character has an inkness value ι ∈ [0, 1] that determines whether it's rendered as solid ink or dissolved vapor. The transition is governed by the character's position relative to the boundary.
When a character dissolves (ι → 0), it drifts upward with velocity and spawns vapor particles at its position. When it crystallizes (ι → 1), it springs back to its home position with damped spring physics: F = −k·Δx, damping 0.88 per frame.
Holding the mouse button creates a gravitational well — particles experience both inward pull and tangential spin, spiraling toward the cursor.
The linear falloff (1 − d/R) ensures a smooth transition at the edge — particles at the boundary barely feel the pull, while those near the center are drawn in sharply. The tangential component θ̂ is perpendicular to the radial direction, creating the spiral trajectory that makes the vortex visually compelling.
Each vapor particle renders a typographic character selected by matching the local smoke density to the character's measured brightness.
The palette spans 70+ characters across 3 weights (300, 500, 800) and 2 styles (normal, italic) in Georgia — ~180 entries total. Binary search on brightness finds the nearest match, then a ±15 neighborhood search optimizes for width fit. Dense smoke selects dark, heavy characters (@, #, %). Wispy smoke selects light marks (., ,, :).