Europe weather
How this template was made
- Model
- Claude Opus 5.5
- Generation time
- About 1 hour 30 minutes
Prompts, in order
Build a broadcast weather report graphics example. Make it Europe, and live: the full sequence plus a strap. A clean, flat look, but with see-through shaders for the rain, snow and so on. First draw a concept storyboard, then build it.
When the outlook city changes, zoom out a little and back in to the new city, so the map feels interactive. Animate the small icons in the city view, update the statistics for the new city, and add an automatic tour of the cities.
Make the move from city to city one smooth move: no zoom out for a nearby city, and only for a long trip if at all. Make it clear to viewers that they are seeing the real weather, live.
Add three touch buttons: Today, Tomorrow, and the day after with its name, such as Tuesday. Slow the rain down. When the map moves from a foggy or rainy city to a clear one, clear the effect before it moves.
Prompts edited for clarity. The time is estimated from the session records and covers writing and building only, not waiting, checks or tests.
The weather slot of a news programme, playing today's real forecast. It's live: your browser asked Open-Meteo for the twelve cities' weather when this page opened, and asks again every quarter of an hour. The skies and temperatures you see are the ones forecast right now, and the line under the player says when they came.
The presenter stands on the left and steps through the show: the map with today's highs, tomorrow's, the day after's, and five days for one city. Three buttons on the map, Today, Tomorrow and the day after by its name, let the presenter tap straight to any of its days. Rain, drizzle, thunder, snow and fog fall only where they're forecast, drawn by a shader you can see the map through.
The left third stays clear for the presenter. Here it's see-through, so choose Webcam under the player and stand there yourself.
Try it
The player runs the show by itself as the page opens, round and round: the map's three days, the outlook, a tour of the cities, and out. Press any button or the picture and it stops there, and the controls are yours. Autoplay starts it again from the top.
To step through it yourself, press Replay, then:
- Press Next step. Each city gets its sky and the day's high, west to east, and the icons move: rain falls, clouds drift, the sun turns.
- Tap Tomorrow on the graphic, or the day after it. The numbers roll and the skies change, west to east, and the rain and snow move to where they'll fall that day. Next step goes through the same days in order.
- Press Next step until five days in one city show. The map pushes in to it.
- Pick another Outlook city. The rain, snow or fog there clears and the five days dip, then the map glides over to the new city in one move, a little longer for a longer trip. When it lands, the new city's numbers come back up and its weather comes in.
- Tick Tour cities. The outlook moves on to the next city every eight seconds or so, round the map. The city menu waits until you untick it.
- Press Take out at any step. Everything plays off together.
What you get
- Live data: the page you're on is the controller. It asks Open-Meteo for the twelve cities' forecast and sends it to the graphic as one update, then again every quarter of an hour.
- Steps: Open, Today, Tomorrow, Day after and Outlook. Take out works from any of them.
- Touch buttons: the map's three days are all in place at once, and rules show the one picked. A tap and a step both just name the day, so they always agree, and the buttons do nothing once the outlook is up. The third button takes its weekday from the forecast.
- A see-through shader: one layer draws the weather over the whole map. The forecast tells it what falls where, and it stays off the presenter's side.
- Functions: one function, Weather, turns the forecast into every icon, number, colour and date on screen, and into the shader's weather. It also keeps time: it wakes itself when the camera lands to change the outlook's numbers, and to move a tour on to the next city.
- Rules: a new outlook city clears the weather, dips the numbers and then moves the camera, all
inside the graphic, so any controller that changes
featured, and the tour, gets the same move. There's one for each pair of cities, so a longer trip can take longer. - Moving icons: each icon is a small picture that moves by itself, so the graphic draws nothing more for it. The function only names the sky, and the icon layer finds its picture.
- Data updates: a new forecast changes the numbers and icons in place, without starting the show again.
- A saved sample: the template holds a real forecast from the day it was built, so it never starts empty.
The weather strap plays the same forecast in a news bulletin.
How the data gets there
A graphic doesn't fetch anything itself. Whoever plays it sends it data, so any controller that sends these fields can drive the same package:
| Field | What it holds |
|---|---|
cities | One entry per city: the temperature now, how it feels, the wind and humidity, tonight's low and sky, and five days of highs, lows, sky and chance of rain. Skies are WMO weather codes, as most forecast services send them |
featured | The city of the five-day outlook |
tour | Whether the outlook visits every city in turn. While it's on, the graphic changes featured itself |
credit | Where the forecast comes from, at the bottom right |
Each city keeps its place on the map by its name, so the order of cities doesn't matter. The forecast
comes from Open-Meteo, and your browser asks for it directly while the
graphic is on screen.
Make it yours
- Send your own forecast in
cities. Any service with WMO codes fits as it is. - Change the temperature colours in
chipOfat the top of the Weather function. - Change how hard it rains or snows in the shader's
amounts, and its colours at the end ofmainImage.