How one page becomes weather.

Concept

The site treats the browser as an observation window. index.html supplies five weather stations in the day: dawn, clear noon, gathering storm, rain dusk and starry night. The writing is operational rather than decorative: watch officers, archived rain notes, pressure falls, sky quality and named instruments make the fiction feel logged by people who work there. Pass 3 adds an alidade, the little glass sight that makes the reader feel like they are aiming the observatory at the weather.

Visual Techniques

The living sky is the FRAG shader in main.js, rendered on one fixed full-screen triangle. It layers an atmospheric-scattering gradient, sun disc, halo, moon, hashed starfield and domain-warped fbm() clouds built from noise() and hash(). A low ridgeline is computed in the fragment shader so the station remains physically on a mountain, and dither is added before output to soften banding.

Scroll becomes time through measure(), phaseAt(scrollY) and lerpState(phase). The SKY array stores the five uniform sets: sky colours, haze, sun position, cloud cover, cloud darkness, cloud speed, star amount and moon amount. body[data-phase] in styles.css swaps ink, glass and accent variables so noon can use dark text while storm and night stay luminous.

The storm is event-driven. tickLightning() schedules flashes near phase 2, buildBoltPath() creates a brief jagged strike on the 2D overlay, and tickParticles() adds wind streaks or rain only when their bell-curve phase weights are high. teleValue() blends per-phase instrument keyframes with sine drift; drawSpark() redraws tiny charts; stationClock() scrubs 06:14 to 23:31.

The memorable pass-3 interaction is .sky-lens. lensState() interpolates bearing, label and resting position from the same phase as the shader; updateLens() writes CSS variables for position and rotation every frame; lockLensTo() borrows the lens for hovered or keyboard-focused instruments. The animation loop pauses on document.hidden and simplifies under prefers-reduced-motion.

Palette & Type Tokens

The display and UI family is Outfit: 100-200 for open atmospheric headings, 300 for body, 600 with wide tracking for labels. Newsreader italic carries the poetic field notes. Pass 3 tunes optical sizing, tabular numerals, prettier rags, custom selection, scrollbar colour and sharper focus states. The palette is phase-derived rather than evenly balanced: dawn amber, noon blue-white, storm charcoal with yellow electrical beats, rain dusk rose and night cold cyan.

Reproduce This

1. Prompt for a full-page WebGL fragment shader with fbm clouds, scattering gradient, sun, moon, stars, lightning response, ridgeline and dither.
2. Ask for five scroll-keyframed uniform states and a continuous phase function that eases between section midpoints.
3. Place real-sounding observatory content in backdrop-filter instrument cards, with phase-aware CSS variables for contrast.
4. Add a scroll-phase optical interaction: a glass lens that tracks pointer and focus, then reports the current bearing without explaining itself.
5. Make every value alive: telemetry keyframes, drifting sine noise, sparklines, a scrubbed station clock and phase-local weather events.