Lee Martin (@leemartin) on X

While the experience might feel like a video broadcast, it is still all HTML, CSS, and Javascript. It was developed with

3 and

4.

Each "screen" is it's own component in

and actually had it's own page which allowed for easier debugging during development.

All of the data comes from the

API. I had A LOT of fun finding the best endpoint setup to build out the screens efficiently. There's something so nice when reverse engineering and knowing the API you're using has everything you need. developer.weather.com

My original version had a lot of smart caching built in but then the

reminded me it was their API and we could hit it as hard as we needed. 🥲 I was like, oh yeah... I think we still do a little browser caching though.

In order to adapt the classic 4:3 design to be responsive for mobile, I relied on pencil, paper, and very strong coffee. I tried my best to respect the original design but aim for something more usable on mobile devices.

I brought that work into

and very carefully laid out the screen evolutions alongside screenshots from the original broadcast.

You truly don't understand the power of

until you try and tackle a problem like this. The way it is able to adapt to the interface's needs it just outstanding.

This really became obvious when I added RTL support for Arabic.

has incredible RTL support and when I saw those shadows shift from the left to right, I shed one tear. 🥲

In order to pull off the vintage CRT aesthetic, I simply added a blur to the entire page and then overlaid a retro TV video texture. I'm always trying to accomplish the most with the least if possible.

My original idea was to render the entire experience in WebGL (using

or

) in order to make those effects more dynamic but I just couldn't part with HTML and CSS ability to lay out things responsively. I have so many interesting experiments though.

I developed a sort of broadcast engine powered by

which handles the entire broadcast playback timeline. Each screen can have it's own duration and cue up its own voiceover intros.

But the real interesting bit is how

allowed me to recreate the "Local on the 8s" scheduling. The experience autoplays on the 8s of the hour (08, 18, 28, 38, 48, 58) and if you arrive at say 6:19, you would be put 1 minute into a broadcast.

This allows the HTML site to feel a bit more like a live TV broadcast when in reality we're just carefully managing time. At one point, I allowed the user to touch and hold to pause the

timeline like an

story but that feature did not make the cut.

Since date and time are so important to the interface, I found the

library also very helpful.

Both of the maps are powered by

and I designed new styles in Mapbox Studio for both the regional forecast and current radar screens.

To choose which regional locations were shown on the regional forecast and the latest observations screens, I actually created a local database of major cities. This allowed for a more controlled visualization. Then I just used

to find the best locations near the user.

The TV turn on effect is just come careful CSS animating. And, the countdown screen was inspired by classic

bumper/intro graphics.

The countdown visualization is actually a

powered element because I knew I wanted it to be fullscreen and it allowed handling the animation a bit easier.

All of the music and voiceovers are powered by

Howler.js. It's just easier that way.

I was able to add 20 languages (so far) using the

i18n module, which ended up being a lot of fun.

Special shout out to

for their Martian Mono font. It ended up being the perfect alternative to the original typeface and had the benefits of variability.

An early architecture diagram of the build for the curious types.

If you made it this far, you might be wondering how this project came to be. I wrote more words about that.