Tuning in…
London
Temperature
10°C
→ Key of F dorian
Wind
20 km/h
→ 98 bpm + whoosh
Cloud
90%
→ Muffled, soft
Rain
1.1 mm
→ Droplet notes on
Sound on. Starts quiet.
The spark
Two sparks. Matt Schroeter's Weather Synthesizer won “Most creative” at Figma's Makeathon by turning Vancouver's weather into music. And Daniil Chebotarev's Quack, a tiny farm that lives on your desktop: a real 3D world with proper lighting, finished to look like pixel art, where day turns into night and seasons change.
6 winning Figma Makes, Figma blog ↗The problem
I've lived in Moscow, Argentina, South Africa, France and now London. Weather apps tell me it's 11° and cloudy somewhere I used to live, and it means nothing. I wanted a way to sense what it's like there right now, without reading a single number.
The idea
Give each place a tiny floating world: a slice of ground with a few things that say where you are, lit by the real local time and weather. Then turn the same weather into ambient music. Every reading gets exactly one job, so once you know the rules you can see and hear that Cape Town is windy tonight.
Taking it further
From a toy to something you'd keep: widgets, a menu bar app and a phone app.
// 01 · On your desktop
Sky Radio as a macOS widget, in three sizes. Small shows one place and its key, medium adds wind and tempo with a play button, and large keeps all five places in view. Press “Edit widgets…” to open the gallery: pick a place, add a size, and remove the ones you don't want.
// 02 · In the menu bar
For people who just want it playing. The menu bar shows the current place and temperature; the panel has the island, what's playing, a waveform, and every place with its local time, one click to switch.
// 03 · In your pocket
On iPhone it becomes a proper app: home-screen widgets in two sizes, a full-screen player you swipe through place by place (the colours follow each sky), and a Live Activity on the lock screen while it plays.
London
10°
South Africa
19°
G major
Home screen widgets
Sky Radio
London
22:00 · Rain · 10°
F dorian
98 bpm · droplets on
The app · tap the dots
Thursday 5 November
22:04
London is playing
Rain · 10° · F dorian
Live Activity
// 04 · One island, every sky
The same scene under different conditions, which is the whole system in one row: light follows the hour, clouds and rain follow the forecast, and snow settles when it's freezing.
// Clear noon
London · 18° · G major
// Golden hour
London · 15° · G major
// Rainy night
London · 9° · F dorian
// First snow
Moscow · -3° · D minor
Design decisions
One reading, one job
Temperature picks the key and register, wind the tempo, cloud cover a low-pass filter, rain the high droplet notes. Each card shows its mapping (“10°C → key of F dorian”), so the system explains itself.
Never loud by surprise
Nothing plays until you press the button. Sound fades in, sits at a gentle level and fades out on pause. Ambient music only works if it's polite.
Honest about the data
A small status says “Live from London”, “Tuning in…” or “Sample weather” if the forecast can't be reached. The piece still works offline, but it never pretends.
A world, not a wallpaper
Each place is a small 3D island with a hint of its landmarks: a clock tower and terraces, onion domes and birches, an obelisk and jacarandas, a flat-topped mountain. It's lit by a sun or moon placed for the local hour, so London at 10pm really is dark, with lit windows.
Weather you can watch
Clouds drift and trees sway in the real wind direction and speed, rain or snow falls when it's actually raining, and chimney smoke leans with the wind. Every note the music plays sends a little spark up from the island.
Pixel finish, on purpose
The scene renders at low resolution and scales up crisply, like Quack. It hides the simple geometry, adds warmth, and keeps it light enough to run on a laptop. A switch turns it smooth if you prefer.
How it's built
- Weather from the free Open-Meteo API, fetched in the browser for the selected place.
- A small Web Audio synth: a detuned pad, a random walk through the scale, filtered white noise for wind and a feedback echo for space.
- A Three.js scene (through React Three Fiber): an orthographic camera, real-time shadows from a directional light placed by the local hour, small speckled textures on the ground, and instanced particles for rain, snow, smoke and note sparks.
What I'd try next
- “Play tomorrow”, using the forecast instead of current weather.
- Record a 20-second clip to send to a friend who lives there.
- A text description of the sound for people who can't hear it.