Weather app
Skyline Weather
A glassmorphism weather app whose background photo, colors and falling rain or snow follow the real sky over the city.
App Glassmorphism Light + dark Live data MIT-0 code No API key
About this template
Type a city and Skyline Weather geocodes it, pulls the current conditions, a 24-hour curve and a 7-day outlook from Open-Meteo, and then restyles itself: a clear, cloudy, rainy or night photo crossfades in, the glass panels switch between light and dark, and a canvas draws rain or snow when the weather code calls for it.
It is a small study in state-driven theming. One body class flips a set of CSS variables, so every panel, label and chart follows the time of day without a second stylesheet. The chart is hand-drawn SVG with a gradient fill and a line that draws itself in.
What is on the page
- Search bar with quick city chips
- Current conditions: big temperature, condition, four fact tiles
- 24-hour temperature chart
- 7-day outlook with temperature range bars
Motion and effects
- Background photo crossfades by weather and day or night
- Rain and snow particles on a canvas
- Chart line draws in, area fades in
- Day cards rise one after another
- Light and dark glass themes from one set of CSS variables
DESIGN.md
The whole style in one file: colors with their roles, type scale, components, layout, depth, motion and the rules on what not to do. Give it to your coding agent together with the prompt below, or keep it at the root of your project.
Read it here
# Skyline Weather — DESIGN.md A weather app that restyles itself from live data. Family: glass / soft futurism, light and dark. ## 1. Visual theme and atmosphere The sky is the interface. A full-screen photo of the current weather sits behind frosted panels; day turns the panels light, night turns them dark. Glass is deliberate here: it lets the real sky show through. Mood: airy, calm, a little cinematic. ## 2. Color palette and roles ``` /* day */ --ink: #0c1424 --mute: #4b5a72 --glass: rgba(255,255,255,.55) --edge: rgba(255,255,255,.7) --accent: #2563eb /* the only action color: button, chart line, icons */ /* night (body.night redefines the same variables) */ --ink: #eef2ff --mute: #aab5d0 --glass: rgba(16,24,48,.5) --edge: rgba(255,255,255,.12) --accent: #93c5fd ``` Data scale: the week's temperature range bars run blue → amber → orange (`#60a5fa`, `#fbbf24`, `#f97316`). That gradient means temperature and appears nowhere else. ## 3. Typography One family, **Manrope** 300–800. Temperature 150px weight 800, tracking −0.06em, ink fading to transparent at the bottom. Labels 12px uppercase with 0.06em tracking. Body 15px. ## 4. Components - **Search:** glass bar, Phosphor magnifying glass, solid accent button "Show the sky" (a verb, not "Search"). - **City chips:** small glass pills for one-tap cities. - **Now card:** pin icon + city as the page's h1, local time, the big temperature, condition with a Phosphor weather icon. - **Fact tiles:** four tiles (feels like, wind, humidity, sunset), each with a Phosphor icon. - **Hourly chart:** SVG line with an accent gradient fill, labels every 3 hours. - **Week:** seven day cards with icon, max, min and a range bar on the shared scale. Icons: Phosphor only (regular weight), tinted with `--accent`. ## 5. Layout Max width 1040px. Now card and facts side by side (1.2 : 1), stacked under 760px. Week is 7 columns on desktop, 4 on phones. Radii 26px panels, 18px tiles and buttons. ## 6. Depth `backdrop-filter: blur(22px) saturate(1.4)`, 1px `--edge` border. Depth comes from blur and the photo, not from shadows. Max nesting: panel > tile. ## 7. Motion - Photo crossfade (1 s) when the weather or day/night changes: state change. - Rain or snow on a canvas only when the weather code says so: state. - Chart line draws in once; day cards rise in a short cascade. - `prefers-reduced-motion`: no particles, no transitions. ## 8. Do and don't Do: let one body class switch the whole theme; keep the accent to actions and the chart. Don't: a second accent on buttons, emoji icons, glass on glass on glass, generic "Welcome" copy. ## 9. Agent prompt guide Bias: photo-led, frosted panels, one blue accent, one font, Phosphor icons. Reject: purple gradients, mixed icon sets, emoji weather, three-level glass stacks. ## Data and credits Open-Meteo forecast and geocoding APIs (data CC BY 4.0; the free API is non-commercial, commercial apps need an Open-Meteo plan). Four sky photos from Pixabay, files kept with the page, authors credited. Phosphor Icons MIT. Code MIT-0.
Prompt to build your own
Build a single-file weather app (HTML, CSS, vanilla JS). Search a city with the Open-Meteo geocoding API, then load current weather, 24 hourly temperatures and a 7-day forecast from the Open-Meteo forecast API. Full-screen background photo chosen by weather (clear, clouds, rain, night) that crossfades between two layers; frosted glass panels (backdrop-filter blur) that switch to a dark variant at night by toggling one body class that redefines CSS variables. Layout: search bar with city chips, a big 150 px temperature card next to four fact tiles (feels like, wind, humidity, sunset), an SVG hourly chart whose line draws itself in, and seven day cards with min-max range bars on a blue-amber-orange gradient. Draw rain or snow on a full-screen canvas when the weather code says so. Icons: Phosphor (MIT), inlined as SVG and tinted with the accent color. Font: Manrope. Credit Open-Meteo (CC BY 4.0) and the photographers.
Paste it into Claude Code, Cursor, Codex or any coding agent, then swap the data source and the words to make it yours.
Good reference for
- Weather and travel apps
- Glassmorphism UI kits
- Pages that theme themselves from live data