An animated weather card (the widget that ages well)

The weather card is the visual primitive that every smart-home device, every commuter dashboard, every news-app widget reaches for. The Apple Weather aesthetic — glassy card, soft gradient, gentle iconography — has eaten the entire category. It also happens to be extremely cheap to build in HTML.

Here is a version with sun → cloud → rain morphs, a temperature count-up, and a clean MP4 export path.

The composition

A single card on a gradient background. Inside the card:

• A small location label, tracked-out, all caps.
• A big temperature number.
• A condition line ("Sunny", "Cloudy", "Light rain").
• A meta row (wind, humidity).
• An icon area on the right that morphs through sun, cloud, rain.

The whole thing is ~120 lines of HTML and CSS. The glass effect is a single backdrop-filter: blur(20px) plus a 10% white background.

The icon morph

The trick: don't draw three separate icons and crossfade them. Morph — keep the sun visible as the cloud slides in front, then drop rain through the cloud. The eye reads it as one continuous weather change, not three separate states.

.sun { transition: transform .4s; }
.cloud { opacity: 0; transition: opacity .4s, transform .4s; }
.rain i { opacity: 0; }

function render(t) {
  const cloudy = clamp01((t - 2.4) / 0.8);
  const rainy = clamp01((t - 5.4) / 0.8);
  sun.style.transform = `scale(${1 - cloudy * 0.4}) translateX(${-cloudy * 40}px)`;
  cloud.style.opacity = cloudy;
  drops.forEach((d, i) => {
    const phase = (t * 2 + i * 0.18) % 1;
    d.style.opacity = rainy * (1 - phase);
    d.style.transform = `translateY(${phase * 40}px)`;
  });
}

That's the whole icon system. Three states (sunny, cloudy, rainy) emerge from two scalar drivers (cloud cover, rain probability), both linearly interpolated from t.

The temperature count-up

Same primitive as animated number counter in HTML. Tabular nums, ease-out, integer formatter:

const u = 1 - Math.pow(1 - Math.min(1, t / 1.4), 3);
tempEl.textContent = Math.round(targetTemp * u);

The temperature lands within the first 1.4 seconds; the rest of the time goes to the weather morph.

The gradient

The background is what sells the card. Don't use a flat color. Two-stop linear gradient at ~160°, with the top color slightly more saturated than the bottom. For sunny: #3a8fd6 → #9bc7f0. For a stormy variant, swap to #3e4b66 → #6c7589.

The gradient angle is what makes the card feel like sky-above-horizon rather than a flat panel. 160° is approximately the angle of natural light coming through a window.

Use cases

• Daily forecast video. Open the app, render the day's weather as a 6-second card.
• OG image for a weather post. Use the morphing card as the OG video.
• Smart-display loop. A 30-second loop of three days, each as a 10-second card.
• Twitter video for a weather alert. A 4-second card with the headline ("Heavy rain in SF this afternoon").

For the broader OG-card-from-HTML pattern see animated Open Graph images. For the count-up primitive see animated number counter in HTML.

A close

The Apple Weather aesthetic is so well-loved because it makes weather feel calm. The card doesn't shout; it whispers a number and a vibe. The HTML version inherits that for free — backdrop blur, soft gradient, large quiet type. The animation is gentle on purpose. If your version is shoutier than this, the design has probably wandered off the brief.