TITLE: TEMPER
PROMPT: Design 'TEMPER', a weather instrument: a luminous glass sphere (layered radial gradients, inner caustics, backdrop blur) containing a miniature animated sky with switchable conditions — clear sun with rotating rays, drifting clouds, rain with ripples, drifting snow with depth, or a thunderstorm with random flashes. Around it: a draggable temperature arc dial and a five-day strip of mini-orbs, all on a frosted instrument panel over a deep-space studio backdrop. Interactions: condition chips cross-fade the weather inside the glass; the dial drags with detents; thunder mode flashes with an optional WebAudio rumble (gesture-gated).
DESCRIPTION: A laboratory-grade weather instrument floating in a deep-space studio: a twinkling starfield behind, a glass sphere whose walls are layered radial gradients, inner caustic rings and a bright specular streak, with a live canvas sky inside. The miniature atmosphere renders five switchable conditions — a clear sun with twelve rotating gradient rays, drifting multi-lobe clouds, falling rain that grows elliptical ripples at the dome floor, depth-sorted snow on sinusoidal paths, and a thunderstorm whose sky darkens and fires random white flashes that bloom through the glass. Below, a frosted backdrop-blur instrument panel carries an SVG arc temperature dial (−12°C to 42°C, graduated ticks, gradient-filled arc, drag with 1° detent pops, full keyboard support), live dew point/wind/pressure readouts, five condition chips, a five-day strip of mini-orbs each tinted to its forecast, and a gesture-gated thunder-audio toggle.
TECHNIQUES: Canvas 2D atmosphere: condition-switched linear-gradient sky that re-tints with temperature via hex interpolation, additive (lighter) composite sun rays, multi-lobe radial-gradient clouds, deterministic particle pools for drops/flakes/ripples, and a radial vignette that melts the canvas into the glass shell. The dial is SVG with stroke-dasharray arc fill, atan2 pointer-to-angle mapping, integer snapping detents with a flashing ring cue, and ARIA slider semantics. Glass is pure CSS: stacked radial gradients, conic caustic ring in screen blend mode, inset shadows and a blurred specular highlight; the panel uses backdrop-filter blur. Thunder is a procedurally generated brown-noise buffer through a 160 Hz lowpass with decay envelope — WebAudio created only on the sound-toggle gesture, try/catch guarded, off by default. prefers-reduced-motion slows all stepping and disables lightning; fully offline, responsive 360px→4K.
INTERACTION: Drag the arc dial (or arrow keys; Shift for 5° steps) to set temperature with detent pops — the sky re-tints warm or cold; click condition chips to cross-fade the atmosphere inside the orb; click any forecast mini-orb to load that day's condition and high into the instrument; in STORM, random flashes bloom the glass; arm THUNDER AUDIO (gesture-gated) to hear a low rumble with each strike.