Will it rain? The family weather board learned to just say so

The old board was honest but quiet. A big current temperature, a grid of tiles — humidity, wind, gusts — a five-day strip, and a twenty-four-hour chart with little grey precipitation bars tucked under the temperature line. One of those tiles was labelled Precip, and on a dry morning it read 0″, which is almost always, which means it almost never told you anything.

So to find out whether you needed an umbrella this afternoon, you read the chart. You found the bars, eyeballed where they got tall, cross-checked the hourly percentages, and made a guess. That is exactly the wrong amount of work to ask of the people this board is actually for. My grandparents should not have to do chart analysis to learn that it's going to rain at three.

The board now leads with the answer. A rain outlook card sits right under the temperature and writes a sentence: “Rain likely this afternoon (around 3 PM) · 82% chance · clearing by 9 pm.” Behind it is a small pure function that scans the next twenty-four hours of probabilities and weather codes, finds the next wet window, and turns it into plain language — and when the next day is dry, it reaches into the five-day forecast to name the next rain day instead.

Three smaller moves back it up. The twenty-four-hour strip now shades the whole rain window, from when it starts to when it clears, instead of marking the start with a lonely arrow — so “rain from mid-afternoon, gone by evening” reads at a glance. The dead Precip tile became Rain Today: the day's expected total, so it carries real information (0.42″) and complements the card — amount next to timing — rather than echoing a zero. And the warning banner got decluttered: on a stormy day the same event used to appear three times over. Now each band has exactly one job. The hero shows what it's doing right now, the rain card owns the timing, and the banner is reserved for the hazards those two don't convey — fog, high wind, dangerous heat or cold, or severe weather genuinely moving in while it's currently calm.

Here is the thing about an honest before-and-after: if the weather is different in the two shots, you've proven nothing. The only fair comparison holds the forecast still and changes only the code.

So I built one rainy-day fixture by hand — dry, overcast morning, a band of rain rolling in at three and clearing by nine — and served that same payload to both the old dashboard and the new one. I froze the browser clock to a known morning so the timeline is drawn around a fixed “now,” pinned the timezone so the hours line up, and captured each version with headless Chromium running SwiftShader software WebGL — the same no-GPU rendering path the games' nightly playtest already uses. Capture the new card; swap that one file back to its pre-change version; capture again. Identical pixels of weather, two different answers.

That's where the second first crept in. I have never put motion on this site — it's a quiet, typographic place by design. But the before-and-after wanted to move, and I realized I didn't need a video tool to make it: the site already has a whole visual language sitting in a tokens file. The red triangle, the yellow circle, the blue square. The paper background and the faint grid. Playfair Display and IBM Plex Mono. That kit could animate itself.

So the fifteen-second reel up top is the brand drawing its own commercial. A WebGL shader paints a slow, drifting field of the three brand colors behind everything. A second canvas composites the real screenshots, rings the exact tiles that changed, and runs a three-band diagonal wipe — red, yellow, blue — to hand off from before to after. It's rendered one deterministic frame at a time and muxed straight to video. No design app, no stock motion; just the same tokens that paint the pages, painting themselves. The whole pipeline — fixture, capture, comparison still, reel — is a handful of scripts living next to the page, so the next before-and-after is one command away.