The making of
A chart that reaches its dew point and starts to weep.
Dewpoint renders one invisible threshold — the exact temperature at which air can hold no more water — as a live psychrometric field you can watch, cool, and saturate.
Concept
Dewpoint is a fictional instrument brand for building scientists and HVAC engineers — the people who chase condensation inside walls and windows. The page has one job: make the dew point felt. A marker for the current air state drifts across a psychrometric chart; as it cools at constant humidity it slides toward the teal saturation curve, and the instant it crosses, dew condenses at the meeting point and runs down the glass. Everything on screen is computed from the air's actual thermodynamics, not animated by hand.
Palette
Cool, clinical, condensing. The bright teal is reserved for the saturation curve and marks; body copy runs in a derived light gauge-ink so nothing small sits in the accent.
Type
A humanist grotesque with a calm, instrument-panel neutrality. Tight tracking on the headline; it never competes with the chart.
Every number is monospaced with tabular figures so readouts don't jitter as the air breathes toward saturation.
How the signature works
The chart is pure inline SVG, drawn from thermodynamics at load. The saturation curve is the Magnus relation — eₛ(T) = 6.112·exp(17.62T/(243.12+T)) — converted to a humidity ratio in g/kg. The three faint nested curves are the 25 / 50 / 75% relative-humidity family, giving the field real depth and a second-read for anyone who knows the chart.
The air state is a single point at (T, w). Cooling holds w constant, so the marker moves horizontally — a physically honest constraint. The dew point is found by inverting the curve for the current water content; the crossing sits exactly where the constant-humidity line meets saturation. Once the marker's temperature drops to that crossing, a condensation term rises with the degree of overshoot and seeds a pooled set of SVG droplets that bead at the meeting point and along the glass edge, grow, gain gravity, and slide down. A hold-to-cool button drives the air below the dew point on demand; the humidity slider raises or lowers the whole line, moving the dew point in real time.
Iteration log
- Contrast: confirmed the teal accent fails as small text on the panel; demoted it to lines/marks and set all copy in the derived gauge-inks (#C7D4D1 / #95A8A4), both above 4.5:1.
- Rhythm: unified card radii (11–14px), border tokens and the readout type scale; aligned the readout rail baselines with the chart panel top.
- Copy: rewrote the "read the chart" band into three concrete steps (horizontal / curve / crossing) instead of abstract labels.
- Signature enriched: added the crossing dew-glow and split droplet spawning between the exact meeting point and the glass edge, with specular highlights and gravity — the panel reads as physically wet.
- Second-read: the 25/50/75% RH curve family, quietly labelled, rewards anyone who recognises a real psychrometric chart.
- Micro-interaction: the State box glows and its dot blooms the instant the air crosses into condensation.
- 375px: stage collapses to one column, the readout rail becomes a wrapping row, controls stack full-width — no overflow, wordmark and nav stay inside the viewport.
- Reduced motion: the rAF loop never starts; the chart settles to a static frame with the marker just above saturation and a few drops formed — never blank.
- Robustness: DPR-free SVG scales cleanly; the loop pauses on
document.hiddenand clamps delta on resume; hold-to-cool releases on blur and touchend so it can't stick. - Chanel: removed a redundant vertical crosshair that duplicated the marker line.
Techniques
Inline SVG psychrometric chart · Magnus saturation model in vanilla JS · pooled SVG droplet system with gravity and specular highlights · requestAnimationFrame with visibility pausing and delta clamping · prefers-reduced-motion static settle · no external libraries. Everything is procedural and self-contained.