# Huecast

A weather app made from temperature and time of day.

## The context

Most weather apps show the same thing: a number, an icon, a list of hours. In 2016 I wanted to see if the weather could be a picture instead. One circle for the sun or the moon, a sky coloured by how warm it is and what time it is, and the weather drawn on top.

That first version was called Timecast. The idea held up. The build didn't: jQuery, hundreds of `<div>`s for the rain, an API key sitting in the code, and wind left as a `@todo`.

Ten years later I rebuilt it from the same idea and the same colours, and renamed it Huecast. The colour was always the point.

## _

<!-- layout:grid -->

![Timecast, the 2016 version — the same circle and gradient, built with jQuery and OpenWeatherMap](/img/projects/huecast/2016-mockup.jpg)

![Huecast in 2026 — partly cloudy at dusk in Valencia, with the 24-hour timeline at the bottom](/img/projects/huecast/desktop.png)

## The sky

The background is a diagonal gradient between two colours: one for the time of day where the city is, one for the temperature. Night is black, dawn is plum, noon is amber, dusk is a deep wine. Below zero the temperature scale goes into ice blue; above 25° it turns red.

The 2016 version jumped between colour buckets. Now the stops blend in OKLCH, so purple to yellow passes through pink instead of a muddy olive.

Three things adjust the result. Night darkens the sky but keeps its hue, so a −10° night is deep blue and a mild one stays warm. Clouds, fog and rain drain the colour. Snow lifts it toward white, because snowy skies are bright, not grey.

## _

<!-- layout:fullwidth bg-soft-grey -->

![The two colour scales: time of day from 00 to 24, temperature from −20° to 40°](/img/projects/huecast/colour-scales.png)

*Time of day × temperature. Every sky in the app is a mix of one colour from each scale.*

## The weather

There are no weather icons. Rain, snow, fog, storms and wind are drawn as particles on one canvas, and each has intensity steps set by the measured amount in the forecast, not by the weather code. Heavier rain falls faster and longer. Heavier snow has bigger flakes. Thicker fog rises higher. Stronger wind adds streaks and slants the rain.

The circle reacts too. The sun pulses harder the hotter it gets, goes soft behind fog, and at night becomes a ring. Below −5° a faint ice halo appears around it.

## _

<!-- layout:grid-fullwidth -->

![Clear sky at 31° in Valencia, 14:00 — a hot orange sky and a glowing sun](/img/projects/huecast/noon-hot.png)

![Mainly clear at 11° in Lisbon at dawn — the plum of early morning](/img/projects/huecast/dawn.png)

![Rain at 9° in Bergen — grey-pink sky, slanted rain from a 32 km/h wind](/img/projects/huecast/rain.png)

![Snow at −9° in Oslo at night — deep blue sky, the moon as a ring, falling flakes](/img/projects/huecast/snow-night.png)

![Dense fog at 5° in London — bands of fog rising over a softened sun](/img/projects/huecast/fog.png)

![Thunderstorm at 24° in Bangkok at night — warm dark sky, wind streaks and rain](/img/projects/huecast/storm.png)

## The timeline

The bars at the bottom are the next 24 hours, and each one is a small copy of that hour's sky. Height is the temperature, from the day's low to its high. Ticks above a bar mean rain, dots mean snow, and a moon and a sun mark where the night starts and ends.

Drag across them, or use the arrow keys, and the whole screen moves to that hour. The bars under the pointer swell like a dock, and the numbers roll up going forward and down going back.

## _

<!-- layout:grid -->

![Huecast on a phone — scrubbing a day in Valencia from dawn through a hailstorm, then 51° in Kuwait City, a blizzard in Oslo, a thunderstorm in Manila, −44° in Yakutsk, fog in London and 49° in Phoenix](/img/projects/huecast/mobile-short-portrait.mp4)

![Clear sky at −44° in Yakutsk at noon — a teal sky and a thick ice halo around the sun](/img/projects/huecast/yakutsk.png)
## Why it's a playground project

The rebuild took 28 commits, and the idea needed almost none of them. Most went into the things a first working version never shows: the installed iOS app cutting off its bottom edge four different ways, a service worker serving the old app after every deploy, a search field that went from Cancel button to X icon to pill, and a "no signal" message that now says why loading failed.

The colour needed the most care where the 2016 palette had nothing to say. Everything below 3° used to fall into two dark greys. Now cold has its own scale, from frost blue at 0° to polar navy at −20°, nights keep their colour, and snow makes the sky brighter.

## The result

A weather app you read by colour first and numbers second. Open it in the morning and the sky already tells you roughly how warm it is and what's falling. No server, no account, no tracking. It installs to the home screen, works offline with the last forecast, and any sky can be saved as a picture or shared as a link.