# Drawing the sky

*How my weather widget works.* Casey Cavanagh, 2026-11-11. https://caseycavanagh.com/notes/drawing-the-sky

This site has a lot of easter eggs and this one is my favorite.

When you hover over Annapolis in the footer, it reveals a dynamic weather widget. I like it because it gives a little nod to where I’m writing and working from and lets me play with shaders and real-time data. It’s the closest representation to what I’m literally looking at outside my window at any time. 

![The weather card that opens when you hover over Annapolis, MD in the footer](https://cdn.sanity.io/images/cu8prjhg/production/332505dc48b1a80355aa7fe09719b5c5682550e9-1274x616.png)

Here’s how it all came together:

## The data source

Every site visit grabs data from [Open-Meteo](https://open-meteo.com) for the weather in Annapolis right now. It pulls temperature, what the sky is doing, the highs and lows, and today’s sunrise/sunset. Claude chose it as the source and I love it. It’s accurate and best of all, it doesn’t require an API, account, or key.

## The sky

The weather and the clock choose from a set of fourteen options: clear, cloudy, rain, snow, fog and storm with day/night variants and dawn/dusk for the 50ish minutes around sunrise and sunset.

![All fourteen skies: clear, cloudy, rain, snow, fog and storm by day and by night, plus dawn and dusk](https://cdn.sanity.io/images/cu8prjhg/production/a5c484ef49479f0a5aafc01ac1eca67bcc7f8992-3000x1078.png)
*Sky variations*

## The shader

WebGL shaders have always been a little bit of a white whale to me. I haven’t found an opportunity to use it in a work project and it always felt like sparkles to throw in my personal projects.

But here, it really made sense because I wanted the widget to feel alive like the weather and the sky around us. I worked with Claude Code to design small WebGL shader that paints soft bands against the sky, like an aurora. It moves and bends with slow noise.

Like a lot of my micro-interactions and design details, I had Claude draw a sticker sheet and let me hone and refine the one(s) I liked. For these dynamic ones, I always make sure it gives me granular control for everything: motion, grain, speed, etc. After fine-tuning, I had the sticker sheet provide exact specs back to Claude to implement. 

![The shader lab sticker sheet: six starting looks for the widget, with sliders for speed, softness, warp, saturation, contrast and grain](https://cdn.sanity.io/images/cu8prjhg/production/960cdc2542cebc02bc3fb3157523dc70315387bd-2640x1340.png)

## The details

The little circle in the footer next to Annapolis, MD matches the current color. So it works like a dynamic status icon. 

![The footer line, with the small dot next to Annapolis, MD in the color of the current sky](https://cdn.sanity.io/images/cu8prjhg/production/080f838ecfd011c88ffee4cae5b28852dce2d15f-1074x204.png)

As you mouse over the widget, the bands move and swirl toward you. Mousing away settles them as you leave.

As the sky changes, the colors ease over a split second so it isn’t jumpy.

The text on the widget switches between dark and light color depending on the background so it’s always accessible and legible, no matter condition or time of day.

![Two weather cards side by side: dark text on a bright day sky, white text on a dark night sky](https://cdn.sanity.io/images/cu8prjhg/production/2d1bf3e6d42109bd4bd491d747940277dbb0e7df-1520x600.png)
*Day and night views*

Finally, with reduced motion on, it stays still and appears like a plain gradient.

---

I had fun nerding out about this and it gets me excited about things do build in the future.

Hover over Annapolis, MD in the footer and check it out for yourself. Click on it and you can pull your location or any other place in the world.

*Proof of human: Human Written (100% human) according to Pangram 4.1, checked 2026-11-11. Report: https://www.pangram.com/history/e316e69e-9f27-4640-ab5b-926b8df43ec7*