A Guide for New Arrivals

An interactive field guide to Seattle's 14 unofficial seasons. The original is a deadpan civic-style poster that gets passed around when someone moves here. This is the poster with weather.

Live → seattle.onk.io

The poster is funny because it's serious. Bone-dry municipal layout, civic "EXPECT:" mood notes, and 14 named seasons that range from the obvious (The Dark Wet) to the absurd (Paralyzing Snow, ¼ inch). Static, on a fridge, it makes you laugh once. Animated, the joke gets to keep working as Seattle moves through the year.

Drag the year wheel along the bottom and the canvas drenches into each season's mood: Smoke goes apocalypse orange, Glorious Sun blasts gold, Flowering Wet rains cherry-blossom petals, Spiders has a couple of them descend on threads, Jünuary stays grey (the joke is nothing happens). The civic chrome — masthead, "Right Now" advisory, Today marker — never reflows; the atmosphere underneath does.

Lifted from the original design brief:

• Civic chrome, drenched scenes. Two color strategies at odds: a restrained navy + cream frame on top, a fully drenched seasonal palette below. The tension is the design.
• The poster's voice is preserved verbatim. Every "EXPECT:" line, every asterisked footnote — those are the joke. The copy didn't get rewritten.
• The year wheel scrubber IS the interaction. Drag, scroll, swipe, or use the arrow keys. The fact that the year ends with The Dark Wet returning at week 45 — the visual loop point on the scrubber — is the punchline made interactive.
• No card grids, no slop. Typography sidesteps the AI-default fonts (Inter, Plex, Fraunces, et al) in favor of Khand, Fragment Mono, and Nippo. Color is OKLCH. Motion is ease-out-quart, no bounce.
• Production-polished single page. One HTML file, atmospheric per-season scenes, smooth motion, real role="slider" with full keyboard parity, mobile swipe, and a reduced-motion path.

0. Backdrop drench (#drench) — OKLCH gradient set per season, transitions over 900ms with ease-out-quart.
1. Canvas particles (#scene) — 12 named particle systems sharing a single canvas. Seasons compose multiple layers (Molding Wet = fog + corner mold patches + spores; Spiders = corner webs + descending spiders; Flowering Wet = pollen haze + cherry-blossom petals).
2. Civic chrome + content — masthead, "Right Now" advisory button (click it to jump to today), persistent Today marker on the scrubber, big season name + body + civic-red EXPECT kicker. The civic-red itself adapts per season (--season-red): lifts on dark scenes, deepens on bright ones, so contrast holds across all 14 drenches.

Sampled field recordings from Freesound, all CC0. One OGG per season in public/audio/ (~25s each at 80kbps Vorbis, ~3 MB total, ~250 KB per clip). Lazy-loaded: nothing is fetched until you toggle audio on, then the current season plus its two neighbors are decoded. Crossfading between seasons uses two AudioBufferSourceNodes ping-ponging through a shared master gain (1.4s linear ramps).

Jünuary stays silent on purpose. The fetch is suppressed entirely — no 404, no decode, just gain → 0.

Off by default; toggle with M or the speaker icon. Full attribution lives in the About modal (? icon) under "Sound credits."

The site lives in public/ so the deploy target can git pull straight into the document root with no rsync step. Serve that directory:

python3 -m http.server -d public 8765
# then visit http://localhost:8765

file:// won't work because app.js is loaded as an ES module.

Arrow keys, M, and R work anywhere on the page. Home, End, PageUp, and PageDown require the scrubber handle to have focus (standard slider conventions).

* Not a typo.

• Concept: the original "Seattle Seasons" advisory poster (anonymous civic humorist) — source PNG in docs/seattle-seasons-poster.png.
• Site by Dave.
• Built with Claude Code and the impeccable design skill.