Live weather, on your dashboard.

Animated Weather Card turns a Home Assistant weather entity into a living sky. The condition and the time of day set the light. Rain, snow, fog, wind, lightning and clouds move behind the numbers, and the temperature, or the time if you'd rather, is always the first thing you read. Turn on the forecast and you can drag the card through the hours ahead. Under the conditions, your AI can write a note about them. A forecast card and a sun tracker card to match come in the same download.

It's free, open source and made for Home Assistant. You can try it live in your browser first, on sample data.

Live demo · Install · Set up · Examples · Options · Troubleshooting

Each condition has its own sky and its own motion, and both follow what your weather entity reports. Rain falls at a steady pace and splashes on the card's lower edge. Snow drifts with the wind, the smaller flakes farther away. Fog drifts in layers, leaves blow across on windy days, and lightning lights the sky from above. The live wind speed sets how fast it all moves.

The sky moves through dawn, day, dusk and night with the real sun, read from Home Assistant's sun.sun. When the light changes, one sky dissolves into the next over about three seconds.

Turn on show_note and the card hands Home Assistant's AI the hours ahead: when the rain starts and stops, the high and the low, the gusts, the UV, and when you're out, from your calendar. It writes back a line and a longer note, and the card shows whichever fits. Pick its voice: snarky, calm, friendly or dry. Serious weather always gets plain advice. Every screen you're signed in on shares the one note, rewritten as the forecast changes. It needs Home Assistant 2025.8 or later with an AI Task. Set it up, or try each voice in the live demo.

Turn on show_forecast and the card adds today's high and low, a line on what turns ("Rain from 17:00 to 19:00", "Dry all day") and the next hours in a row at its foot, drawn as a line, a soft area or bars. Drag the card sideways and its sky, its weather, the temperature and the readings go to the hour you stop at, and stay there until you come back to now. A forecast card or a sun tracker on the same weather goes there with it. A tap opens the whole forecast: the hours, the week and every reading your weather entity reports. The forecast also comes as a card of its own, the card can show the time and the date or make the time its big value, and it can be a bedside clock, red on black at night, or a panel you read across the room. Set it up.

The download includes a second card, just for the sun. It shows the sun's path across the day, with the next sunrise or sunset as the headline. Below are first light, last light, solar noon, the length of the day and the moon phase. Its sky follows the sun in the same palette as the weather card. South of the equator, the sun crosses it from right to left, as it crosses your sky.

Stack a compact sun tracker under the weather card and the two read as one piece. They share your weather entity's sky, their text lines up, and rain falling out of the weather card passes behind the tracker. With the forecast on, drag the weather card through the hours and the tracker's sun goes there too. Set it up.

The card works in a narrow phone column, a sections grid or on a wall tablet across the room:

• Metrics: they share one row when they fit and fold into a grid when they don't, measured against the actual labels in your language.
• Wide cards: the metrics move beside a larger temperature.
• Wall panels: with the forecast on, a frame of 640 × 540 px or more lays itself out for reading across the room, every size following the panel's.
• Short sections rows: the card steps down to tighter layouts instead of clipping.
• The forecast: in a shorter frame, its chips, icons and row give way before the temperature shrinks.
• One line: compact: true gives you a single strip.

Connect the Flightradar24 integration and each flight that enters your area crosses the card once. It flies at its real heading, altitude and speed, with its flight number and aircraft type beside it, or where it's going. Each is drawn as its aircraft, from its type: an airliner, a wide-body, a 747, a regional or business jet, a turboprop, a light aircraft or a helicopter, longer for a longer aircraft. Cruising traffic flies small and high, and arrivals come in lower and larger. After dark, a plane is its lights: green or red at the wingtip facing you, flashing white strobes and a red beacon.

Prefer your dashboard's own look? The theme palette drops the sky and draws the weather in your theme's colours, light or dark. Or keep the sky and recolour it: pick per-condition colours in the editor, or define whole gradients in your theme.

• Speaks your language. Conditions, the humidity, wind and pressure labels, and the moon phase come from Home Assistant's own translations. The cards' own words, like "Feels like", "Sunset" and the forecast's lines, are in nine languages, and fall back to English in others. Times follow your profile's 12- or 24-hour setting and its time zone.
• Your own sensors. Point the card at your weather station and it shows what they measure: temperature, feels like, humidity, wind and pressure, indoors and out. The sky still follows the forecast.
• Updates in place. New readings fade in without a re-render. When the condition changes, the old weather fades out as the new one arrives.
• Rests when unseen. Motion pauses while the tab is hidden or the card is scrolled out of view. It can also pause while the window is in the background.
• Respects reduced motion. If reduced motion is on in your system settings, the sky stays still: the same colour and light, with no moving weather.
• Readable in every sky. Text sits above the weather, and every built-in sky is tested to meet WCAG AA contrast for the card's text. Screen readers hear temperature and condition changes, and decorative layers are hidden from them.
• Light to load. The card is about 84 KB gzipped, with GSAP, its animation library, inside, so it moves without internet access. The visual editor, the forecast, the note writer, the planes and the developer panel load only when they're needed.
• Set up visually. Every weather card option is in the visual editor. YAML is there when you want it.

AI helped build this card. Its code, tests and documentation were developed with an AI assistant, under my direction. I review every change, and each one has to pass the test suite before I merge it. The card runs every day on my own dashboard. If you'd rather not use software made with AI, you know before you install.

The setup guide walks through every step, from the Marketplace to the weather note, with troubleshooting.

• A weather entity. Any weather integration works: Met.no, OpenWeatherMap, AccuWeather, Pirate Weather, the National Weather Service and others. The card's forecast reads the one your integration already provides: its row of hours needs an hourly forecast, and a daily or twice-daily one gives the rest. The forecast needs Home Assistant 2023.9 or later.
• Optional: an AI integration with an AI Task (Home Assistant 2025.8 or later) for the weather note, the Moon integration for the tracker's moon phase, and the Flightradar24 integration for planes.

The card ships as six files that sit in the same folder:

1. Select the button above, or go to Settings → Marketplace and search for Animated Weather Card.
2. Select Install, check the version, and select Install again.
3. Refresh your browser.

If the search doesn't find it, select Add from link (top right), enter alexsto1an/ha-ani-weather-card and select Add. Adding from a link needs a GitHub connection, which the Marketplace asks for.

The Marketplace adds the dashboard resource for you when your dashboards are managed in the UI. For YAML-mode dashboards, its install dialog shows the exact line to add, with a ?v= for the version. It looks like this:

resources:
  - url: /local/community/ha-ani-weather-card/animated-weather-card.js
    type: module

New versions show up under Settings → Updates.

On older versions, install it with HACS: search HACS for Animated Weather Card and select Download. If the search doesn't find it, add https://github.com/alexsto1an/ha-ani-weather-card under ⋮ → Custom repositories, as a Dashboard. For YAML-mode dashboards, the resource is /hacsfiles/ha-ani-weather-card/animated-weather-card.js.

When you update Home Assistant to 2026.11 or later, the card moves to the Marketplace by itself and keeps getting updates. If your resources are in YAML, a repair asks you to change /hacsfiles/ to /local/community/; the old path keeps working until you do.

1. Download animated-weather-card.js, animated-weather-card-editor.js and animated-weather-card-note.js from the latest release. Add animated-weather-card-forecast.js if you use the forecast, the clock, the forecast card or the nightstand, animated-weather-card-planes.js if you fly planes, and animated-weather-card-dev.js if you want developer mode. You can also build them from source with npm install && npm run build.

2. Copy the files to your config/www/ folder. If you had to create www/, restart Home Assistant once so /local/ is served.

3. Go to Settings → Dashboards → ⋮ → Resources → Add resource and add:

   • URL: /local/animated-weather-card.js?v=1
   • Type: JavaScript module

   If Resources isn't shown, turn on Advanced mode in your user profile. For YAML-mode dashboards:

   resources:
     - url: /local/animated-weather-card.js?v=1
       type: module

4. Refresh your browser.

To update a manual install, overwrite the files and raise the ?v= number in the resource URL so browsers fetch the new version. The editor, the forecast, the note writer, the planes and the developer panel pick up the same ?v= automatically.

Load the card from one place only. If you switch between the Marketplace (/local/community/) and a manual install (/local/), remove the old resource. Otherwise the second copy can't register, and you keep running whichever version loaded first.

1. Edit your dashboard, select Add card and search for Animated Weather Card. It starts on your weather entity and sun.sun.
2. If you have more than one weather entity, pick the one you want. That's enough to start.
3. Adjust the rest in the editor's sections:
   • Entities
   • Display
   • Forecast and clock
   • Interactions
   • Weather note
   • Day and night
   • Advanced
   • Weather engine
   • Colors

For the sun tracker, search for Animated Sun Tracker. It starts on sun.sun, with your moon sensor if you have one. For the forecast card, search for Animated Forecast. It starts on your weather entity.

In Home Assistant 2026.6 and later, the By entity tab suggests the cards too: pick your weather entity, or sun.sun, and they're under Community. A weather entity gets the weather card, regular and compact, and the forecast card and its strip; sun.sun gets the sun tracker, regular and compact.

Or in YAML:

type: custom:animated-weather-card
entity: weather.forecast_home

Every example below is a complete card configuration. Replace the entity IDs with your own.

The sky follows sun.sun on its own. Add sun_entity to also show the next sunset (or, at night, sunrise) beside the other metrics.

type: custom:animated-weather-card
entity: weather.forecast_home
sun_entity: sun.sun

Your sensors take the place of the weather entity's values, and a wind speed sensor also sets how fast the weather moves. A wind direction sensor can report degrees or a compass point like NW. Any sensor that's unavailable falls back to the weather entity. Without feels_like_entity, the card uses the entity's apparent temperature if it reports one. Indoor readings sit under the condition.

type: custom:animated-weather-card
entity: weather.forecast_home
name: Garden
sun_entity: sun.sun
outdoor_sensor_entity: sensor.garden_temperature
feels_like_entity: sensor.garden_apparent_temperature
humidity_sensor_entity: sensor.garden_humidity
wind_speed_sensor_entity: sensor.garden_wind_speed
wind_direction_sensor_entity: sensor.garden_wind_direction
pressure_sensor_entity: sensor.barometer
indoor_temperature_entity: sensor.living_room_temperature
indoor_humidity_entity: sensor.living_room_humidity

This is the pairing in the screenshot above. show_sun: false leaves the next sunset to the tracker, which frees a slot so the weather card's three remaining metrics can share one row. weather_entity gives the tracker the weather card's sky. With the forecast on, drag the weather card through the hours and the tracker's sun goes there too.

type: vertical-stack
cards:
  - type: custom:animated-weather-card
    entity: weather.forecast_home
    sun_entity: sun.sun
    show_sun: false
  - type: custom:animated-sun-tracker-card
    sun_entity: sun.sun
    moon_entity: sensor.moon_phase
    weather_entity: weather.forecast_home
    compact: true

Both cards in compact form. Together they take about 200 px: the temperature, the condition and the next sunrise or sunset.

type: vertical-stack
cards:
  - type: custom:animated-weather-card
    entity: weather.forecast_home
    compact: true
  - type: custom:animated-sun-tracker-card
    sun_entity: sun.sun
    weather_entity: weather.forecast_home
    compact: true

The cards size themselves in the sections view, and you can resize them freely:

• Weather card: 12 columns × 4 rows by default, 12 × 5 with a note, or 12 × 2 compact. With the forecast, 12 × 8, or 12 × 5 when your weather entity has no hourly forecast, and one more with a note. As a nightstand, 12 × 6. The clock adds no rows.
• Forecast card: 12 × 7, 12 × 5 with three days or fewer, or 12 × 2 as a strip. Without the hours, as many rows as its days need: five for a week.
• Sun tracker: 12 × 6 by default, or 12 × 2 compact.

If you give a card fewer rows, it steps down to fit, and stops at the first layout that does:

1. The line under the condition goes first.
2. Then the temperature shrinks.
3. Then the location goes.
4. Then the metric labels go, and the temperature shrinks again.

A note gives way before any of these: the spacing tightens to keep it whole, then it shortens to one line, then the temperature shrinks to keep that, then it goes. The forecast gives way before the temperature too: its chips, then its icons, then its row, then the line on what turns. The forecast and the clock has the details.

On a phone, the default four rows show the card without its location and without the line under the condition, with the metrics and their labels in a grid. With a note, its five rows keep everything, with a smaller temperature and the note on one line.

type: custom:animated-weather-card
entity: weather.forecast_home
sun_entity: sun.sun
grid_options:
  columns: 12
  rows: 3

A panel view gives the card the whole screen. Above 640 px wide, the metrics move to the right of a larger temperature. With show_forecast, a frame this size lays out the wall instead. This is a view configuration: paste it in the dashboard's raw configuration editor, under views:.

title: Weather
type: panel
cards:
  - type: custom:animated-weather-card
    entity: weather.forecast_home
    sun_entity: sun.sun
    indoor_temperature_entity: sensor.living_room_temperature
    indoor_humidity_entity: sensor.living_room_humidity

The theme palette uses your dashboard's card background and text colours, in light and dark themes. The temperature and the rain take your theme's accent colour; to keep them white, or any colour, set temperature_color and rain_color under custom_colors, or pick them under Colors in the editor.

type: custom:animated-weather-card
entity: weather.forecast_home
color_palette: theme

This needs the Flightradar24 integration. Each plane is tagged with its flight number and aircraft. Set flight_label: route to tag it with where it's going instead, "Lisbon → Paris", or both for the route with the flight under it. On a narrow card, a long route shows the airport codes, "FRA → GIG", so it's readable before the plane leaves. A flight with no route, like most light aircraft, keeps its number. Set show_flight_labels: false to fly the planes without tags. Planes cross at a pace that follows their real speed and height; set plane_speed: 0.5 for half that pace, or as low as 0.25, to follow a plane and read its tag. Only planes that arrive while the dashboard is open fly by; set planes_on_load: true to also fly the ones already overhead when it opens.

Each flight is drawn from the side as its aircraft, picked from the ICAO type code Flightradar24 reports: a narrow-body airliner (A320, 737, E190), a wide-body (787, 777, A350), a four-engine jet (747, A380), a jet with its engines at the tail (CRJ, MD-80, and business jets at their own length), a turboprop (ATR, Dash 8), a light aircraft (Cessna, Piper) or a helicopter. An unknown type flies as an airliner. Longer aircraft look longer, though less than in life, so a low 747 never covers the temperature. After dark, with the sky palette, a plane is its lights: steady green at the near wingtip of a plane flying right and red flying left, white strobes that flash twice, a red beacon and a white tail light. With color_palette: theme it stays a silhouette in your theme's colour.

type: custom:animated-weather-card
entity: weather.forecast_home
sun_entity: sun.sun
flights_entity: sensor.flightradar24_current_in_area

The clock puts the time at the start of the location line: "13:10 Home", with the date after it if you like. Or make the time the big value in the temperature's place. The forecast adds today's high and low beside the condition, a line on what turns under it, and the hours ahead in a row at the card's foot, under the readings. Both read the forecast your weather integration already provides.

type: custom:animated-weather-card
entity: weather.forecast_home
sun_entity: sun.sun
show_clock: true
show_forecast: true
# Optional
show_date: true          # the date after the time
hero: clock              # the time as the big value
forecast_metric: chance  # temp, feels, chance or amount
forecast_graph: bars     # line, area, bars or none

What it shows.

• The clock. It changes only on the minute, and only the figures that change fade. It follows your profile's 12- or 24-hour setting and its time zone, the server's or the device's, and adds no rows. In a short frame it goes with the location line; on the compact strip it leads the quiet line.
• The date. show_date puts it after the time, "13:10 Fri 13 Nov Home", in your language's own order. Where the line runs out of room the date drops its month, then the place steps out; neither is ever cut short.
• The time as the big value. hero: clock swaps them: the time stands in the temperature's place and size, and the temperature leads the condition's line, "21° Partly cloudy", as on the nightstand. The date, if it's on, leads the location line. While you drag through the hours, the big time shows the hour you're looking at. It keeps short of the sun's light, one size all day, and on the wall the date takes the clock's place.
• The condition reads as a word you'd say, "Rain" or "Clear", never "Rainy" or "Clear, night". Beside it, today's high and low: "H 22° L 12°".
• What turns. One line under the condition: "Rain from 17:00 to 19:00", "Rain until 19:00", "Dry all day", "Dry tonight". It's shown whole, in a shorter form, or not at all. With a note shown, the note tells what's coming, so this line steps aside and the line under the condition is the usual one, feels like and indoors.
• The row. At the card's foot, under the readings, with the divider between them: now above the line, the hours ahead below it. An hour to a column, about 54 px each, so a phone shows six hours and a wider card more, with an icon every hour and the value on one line.
• The chips. Centred under the row: Temp, Feels like, Rain chance and Rain amount, in full where they fit. The noun follows what falls, so snow gets "Snow chance". A metric your integration doesn't report has no chip, and with fewer than two there are none. Switching moves the white capsule and re-forms the graph, the same kind for every metric: a line (forecast_graph: line, the default), the line over a soft fill (area), bars (bars), or the values alone (none). Left and Right move between them, and forecast_metric picks the one the row starts on.
• The icons. One filled set, with a sun, a moon, clouds, rain, snow, a bolt and wind, each condition in its own drawing, and the same set draws the weather card's and the sun tracker's icons. On the sky palette each stands in the light of its own hour: white by day, rose at dawn, peach at dusk, slate at night, with the sun gold and rain pale blue. Only the colour changes, and each colour is lightened until it holds 3.2:1 against the brightest sky it can sit over. On the theme palette they take Home Assistant's icon colour.

Drag through the hours.

• The card goes there. Drag the card sideways, on the row, on a chip or anywhere else on it, and the row moves under a fixed needle. The card's real sky, its light, sun, clouds, fog, wind, rain, snow and lightning, the temperature, the condition, the line on what turns, and the humidity, wind and pressure go to the hour under it. Where the row has given way, a thin rail on the divider is the ruler.
• It stays where you leave it. A slow lift settles on the nearest hour. A flick carries on, the way a list does, and lands on the hour it was heading for. The next drag continues from there, so a few swipes reach two days ahead.
• The needle names the hour. When you take hold of the hours, "Now" lifts into a white capsule over the first column. It holds still while the hours slide under it, naming the one beneath it, and the hours fade as they reach it, so none shows twice. On the way home it counts the hours back, then settles into "Now" again.
• It says so. While the card shows another hour, the location line becomes "‹ Now 16:00 in 3 hr.": the Now control, the hour, and how far ahead it is. Today's high and low step out, and the hour's chance of rain takes their place.
• Coming home. The card comes back to now when you tap Now, press Home or Escape, leave it alone for half a minute, scroll it off screen or hide the page, and when a new forecast arrives. It comes home on one quick spring: the row, the sky and every layer of weather go straight from the hour you left to now.
• You can catch it. A press while it moves stops it where it is. Nothing changes when your finger first lands.
• The other cards follow. A forecast card on the same weather goes to the hour with it: its row, its sky and its days, which show the day the hour falls in (its name in bold, a dot on its bar at that hour's temperature, the other days stepping back). It works both ways: drag the forecast card and the weather card goes along, and whichever you touch leads. A forecast card without hours shows the day and takes the hour's sky. A sun tracker on the same sun moves its sun to the hour you're on and takes the card's sky, when it has the same weather_entity or none of its own. Those take only the sky's colour, never its weather. They come back to now together.
• The page still scrolls. A drag up or down scrolls the dashboard; the card takes only a drag that's clearly sideways. On a trackpad, swipe sideways with two fingers.
• Keyboard and screen readers. The hours are a slider you can Tab to: the arrows step an hour, Page Up and Page Down three, and Home or Escape come back to now. A screen reader hears "16:00, in 3 hr.: Cloudy, 22°, 40% chance". The row also has a list of the next 24 hours for screen readers, and the chips are a group of choices with their full names, such as "Chance of rain".
• Reduced motion. With reduced motion, or animate: false, the sky stays still and steps with the hour, the row still follows your finger, the chips swap without moving, and the way home is a short fade.

On the compact strip (compact: true), there's no row: drag the strip and a rail shows under it while its sky and numbers go to the hour.

How it fits. With an hourly forecast, the card asks the sections view for eight rows. In fewer, the forecast gives way before the temperature ever shrinks:

1. The chips go first (seven rows).
2. Then the icons (six).
3. Then the row, which leaves the line on what turns and the rail (five rows). At four, the line's short form sits beside the condition instead.
4. Then the line itself.

Only then does the card step down as it always has. With a note, the note first shortens to its one line. The row is kept only where its first line sits low enough in the card for its text to stay readable over the sky's light. From 640 px wide, the row sits in the temperature's column and shows eight hours.

Your forecast. The row needs an hourly forecast. With only a twice-daily or daily forecast there's no row: the card asks for five rows, and the rail steps through half days or days. With no forecast at all, the card is today's card. Temperatures in °F, rain in millimetres or inches, and wind and pressure in the entity's units all work. The page subscribes to each entity's forecast once, and the weather card, the forecast card, the view on tap and the note writer share it.

With the forecast on, a tap opens the whole forecast. The card's own sky grows from the card into the screen, and the temperature, the condition, the line, the row and the chips travel with it. It holds:

• the clock and the place (with the date if it's on), the temperature, the condition with today's high and low, and the line on what turns; with hero: clock, the time is the big value here too, and the temperature leads the condition
• the row and its chips, which drag and stay where you leave them, as on the card
• seven days with their ranges, eight on a tablet. As you drag the row, the days show the day the hour falls in, and the chips change what the days show too, as on the forecast card
• every reading your weather entity reports: feels like, wind with its gusts, humidity, dew point, UV, cloud cover, precipitation, visibility and pressure. While you're at another hour, they're that hour's ("At 17:00").
• History and settings, which opens Home Assistant's own dialog for the entity

Close it with ×, Escape, Back, a tap outside it, or a swipe down on a phone, where it starts just below the status bar. It's a dialog: focus moves into it, the page behind it can't be reached, and focus comes back to the card when it closes. On a tablet, 900 px and wider, it has two columns and nothing scrolls. It's built ahead of time, hidden and with its weather paused, so it opens on the next frame. The row in the view doesn't come home on its own; it does when the view closes.

To have a tap do something else, set tap_action, or pick it under Interactions in the editor.

With the forecast on, a card of at least 640 × 540 px, such as two sections columns by ten rows on a wall tablet, a panel view or a TV, lays itself out for reading across the room. Every size follows the panel's, so a bigger screen is the same picture seen from further away.

What it shows:

• top left, on one edge: the time and the date, the temperature (about a third of the panel's height), and the condition with the high, the low and feels like
• open sky, where the sun and the clouds are
• at the foot, the line on what turns over the hours: two-hour columns of time, icon and temperature on one line each, with the temperature's line under them (eight on a 1280 × 800 tablet, from three or four on the smallest wall to ten on a TV)
• beside the hours, set apart, five days of ranges, each row on one of the hours' lines; they show the day the hour falls in as you drag
• on a portrait tablet, the week goes under the hours, seven days where there's room

There are no chips, and the slide works the same: let go and the row settles on a labelled hour.

title: Weather
type: panel
cards:
  - type: custom:animated-weather-card
    entity: weather.forecast_home
    sun_entity: sun.sun
    show_forecast: true

layout: nightstand makes the weather card a bedside clock. The time is the hero, "3:12" with no leading zero, and the weather says what the hour needs. It asks the sections view for six rows, and a tap does nothing unless you set tap_action.

type: custom:animated-weather-card
entity: weather.forecast_home
layout: nightstand
# Optional
alarm_entity: sensor.phone_next_alarm
night_sensor: sensor.bedroom_illuminance
wake_time: "07:00"

• By day: the date, the temperature, the condition, the line on what turns, and today's range with a dot for now. From an hour before bed time, with an alarm set, the alarm takes the date's place.
• At night: the card goes red on black, like a bedside clock's night mode: no sky, and a deep red for the time, the alarm ("Alarm 6:45") and one line, which keeps a dark room's night vision. The weather still moves behind them, very faintly, in the same red: rain, snow, clouds, the moon and the stars. With night_red: false it turns its real sky down under a veil instead, and the words keep two warm colours with no transparency. Dawn, day and dusk are untouched either way. That line is the temperature and the condition, then what's coming ("16° Partly cloudy · Dry tonight", "9° Rain until 7 AM"), or what's wrong before you're up: severe weather, rain at 60% or more, gusts of 60 km/h (37 mph) or more, or frost at the alarm. A warning is set a step heavier, and screen readers hear it as a status. Nothing changes under the veil but the minute. Night comes and goes over eight seconds.
• When night falls. With night: auto, the default, a light sensor beside it decides: night under 5 lx held for a minute, day again over 15 lx held for 10 seconds, so a phone screen or a passing car doesn't flip it. If the screen's own glow or a street light keeps the room above 5 lx at night, raise night_lux: day comes back at three times it. Without one, night runs from bed_time to the alarm, or to wake_time without an alarm. bed_time defaults to 8 hours 30 minutes before that. night: on and night: off fix it.
• The alarm. alarm_entity is a timestamp sensor with your next alarm: the Android Companion app's next alarm sensor, or an input_datetime that an iOS Shortcut sets. The card uses it when it's within 18 hours.
• Screen care. The words move by a pixel every 15 minutes, against burn-in.
• Narrow frames put the weather under the time.

type: custom:animated-forecast-card

The hours and the week on a card of their own, on your weather entity's sky: the line on what turns as its lead, the row with its chips, and the days. It's the weather card's own engine, so its row works the same way: leave it at 17:00 and the card's real rain falls behind the numbers, with a "‹ Now" control at the end of the lead to come back. It has no sun, clouds or stars of its own, so stacked under the weather card there's one sun, and it has its own light in the corner. Its row and a weather card's on the same entity move together: drag either and the other goes to the same hour, its sky too, and dragging it moves a sun tracker on the same sun. A tap opens the view that opens on tap. Search for Animated Forecast in the card list, or pick Forecast or Forecast strip under By entity.

type: custom:animated-forecast-card
entity: weather.forecast_home

Each day has its name, its icon, the low, a bar and the high; the bar takes the width that's left, so the low sits by the icon. The bars share one scale for the week, from the coldest low to the warmest high, and their colour is set by the temperature: the sky's blue-white for cold, white in the middle and the sun's gold for warm. Today's bar has a dot for now, and as you drag the row the days show the day the hour falls in, with the dot on its bar at that hour's temperature. The chips change what the days show, on this card only: Feels like shows each day's feels-like range (from the hours, and the day's own figure where your integration gives one), the chance and the amount show as bars from zero, the chance on a scale to 100% and the amount to the week's wettest day. The bars draw in with one sweep across the scale. On the theme palette, they're one solid colour. From 640 px wide, the hours sit on the left and the week on the right. In a frame shorter than it asks for, the days give way from the end. An entity without a forecast says so: "This weather entity has no forecast".

As a strip, it sits under the compact weather card: the hours' labels, icons and line, with no words or chips, its first and last labels on the weather card's text edges.

type: vertical-stack
cards:
  - type: custom:animated-weather-card
    entity: weather.forecast_home
    compact: true
  - type: custom:animated-forecast-card
    entity: weather.forecast_home
    compact: true

The weather card's animate, spill_particles, engine_settings and custom_colors work on it too, and with outdoor_sensor_entity its reading for now comes from your own sensor.

In the sections view it asks for 12 × 7, or 12 × 5 with three days or fewer. Without the hours, it asks for as many rows as its days need: five for a week.

The card can write a sentence under the conditions: a remark on the weather, what's coming in the next hours and what to wear. It's snarky by default.

type: custom:animated-weather-card
entity: weather.forecast_home
sun_entity: sun.sun
show_note: true
# Optional
note_tone: calm                 # snarky, calm, friendly or dry
note_calendar: calendar.family  # when you're out, for what to wear

What it needs. Home Assistant writes the note with its AI Task, so it works with whichever AI you've set up there. You need Home Assistant 2025.8 or later and an AI integration that provides an AI Task: OpenAI, Google, Ollama, OpenRouter, Anthropic (2025.12 or later) or Home Assistant Cloud. The card uses the default AI Task from Settings → System → AI, or the one you name in note_ai_task_entity. Your API key stays in Home Assistant; the card never sees it.

How it's written.

• Facts first. The card reads the hourly forecast and works out what it says: when the rain starts and stops, the high and low, gusts, UV, and how it'll feel when you're out. The AI only puts those facts into words, and is told never to invent a time or a temperature.
• Four voices. snarky, the default, is theatrical and a little unhinged, in the spirit of CARROT Weather: the weather has motives and the joke lands at the end. calm is plain and impersonal, like Apple Weather. friendly talks to you like a friend who checked the forecast for you. dry is deadpan: short, flat and mildly unimpressed.
• Your calendar. With note_calendar, the card reads the next 12 hours of events and says what to wear for each stretch you're out. Timed events count; all-day, cancelled and online ones (a location that's a link) don't, and events less than half an hour apart count as one stretch. Only the times reach the AI, never an event's name, place or description.
• Serious weather gets no jokes. Thunderstorms, hail, heavy rain, gale-force gusts and dangerous cold or heat switch any voice to plain advice.
• Your language. It writes in your profile's language, with your units and your 12- or 24-hour clock.
• Two lengths. It writes a one-line version for short frames and a longer one where there's room, and shows one whole or not at all.
• No stale flash. When you come back to the card and a new note is due, a short status takes its place while it's written (reading the forecast, then writing the note), and the new note types itself in, rather than the old one showing first. With reduced motion, it's simply there.

What it costs. The note is rewritten after an hour, or sooner when the forecast changes, and only while a screen is showing the card. Every screen you're signed in on shares one note, through your Home Assistant user. Each note is one small request, about 1,000 tokens in and 60 out: with the settings below, about $0.20 a month for a card on all day.

If there's no AI Task, or a note can't be written, the card shows no note and is otherwise the same. The browser console says why, and so does the editor.

The card has already worked out the facts, so the AI only writes two short sentences. A small, fast model does it best, with as little thinking as it allows: thinking adds seconds and cost to every note, and nothing to it. Set this up in the AI integration's AI Task options (Settings → Devices & services → the integration → the AI Task's settings), not its conversation agent's, then make it the default in Settings → System → AI or pick it in the card's editor.

Anthropic. Home Assistant's recommended settings use Claude Haiku 4.5 with thinking on. Turn Recommended off and choose:

On Haiku 4.5, set Thinking budget to 0 instead: anything under 1024 turns thinking off.

OpenAI. Home Assistant's recommended model is gpt-4o-mini, which OpenAI retires in January 2027. Turn Recommended off and choose gpt-6-luna, with Reasoning effort set to None, and leave web search and the code interpreter off. The image model doesn't matter for the note.

Other integrations (Google, Ollama, OpenRouter, Home Assistant Cloud): pick their smallest current model and turn thinking or reasoning down as far as it goes. A local model through Ollama costs nothing per note, but needs to follow a JSON schema: the card asks for structured output.

The card can also show a sentence from any entity whose state is text: a text helper, a template sensor, or a summary sensor from your weather integration, such as Pirate Weather's. An entity is used instead of the AI.

• The state is the one-line version. Keep it to about 40 characters, so it fits a phone.
• A note attribute, if there is one, is the longer version. The card shows it where there's room for two lines. Keep it to about 90 characters.
• A generated_at attribute marks when it was written. The card hides the note 3 hours later (note_max_age), so a note about this afternoon's rain isn't still up tonight. The AI's own notes do the same.

With a note, from either source, the card asks the sections view for five rows. On a phone, that's room for the one-line version. With four, the note gives way.

type: custom:animated-weather-card
entity: weather.forecast_home
sun_entity: sun.sun
note_entity: input_text.weather_note

This hides the metric labels and icons, and marks the indoor reading with a house icon instead of the word.

type: custom:animated-weather-card
entity: weather.forecast_home
indoor_temperature_entity: sensor.living_room_temperature
indoor_style: icon
show_attribute_labels: false
show_attribute_icons: false

This keeps all the weather inside the card, stops the jolt on lightning strikes, and also pauses while the browser window is in the background. For a sky with no motion at all, set animate: false.

type: custom:animated-weather-card
entity: weather.forecast_home
spill_particles: false
disable_lightning_shake: true
auto_pause: true

Each _bg colour becomes a full sky for that condition: lighter overhead, deeper at the horizon, with the same shading behind the metrics as the built-in skies. It replaces that condition's sky at every time of day.

type: custom:animated-weather-card
entity: weather.forecast_home
custom_colors:
  sunny_bg: "#2f80d1"
  cloudy_bg: "#6b7a8f"
  rainy_bg: "#3f5168"
  text_color: "#ffffff"
  rain_color: "rgba(220, 235, 255, 0.8)"

For full control, set a sky per condition in a Home Assistant theme. Any CSS background works. This covers all fifteen skies, including those custom_colors doesn't reach, such as pouring and storms. The variable names are listed under Conditions.

# configuration.yaml → frontend: themes:, or a file in themes/
my_theme:
  weather-sunny-background: "linear-gradient(180deg, #5aa0e6 0%, #2a6db5 60%, #1d4f87 100%)"
  weather-pouring-background: "linear-gradient(180deg, #4a5566 0%, #2d3542 100%)"
  weather-clear-night-background: "linear-gradient(180deg, #0b1026 0%, #1b2547 100%)"

The weather engine scales the animation. For the editor's slider ranges and what YAML accepts, see Weather engine.

type: custom:animated-weather-card
entity: weather.forecast_home
engine_settings:
  windSpeed: 3.5
  rainCount: 2
  cloudCount: 5
  cloudBaseSize: 1.3
  splashBounce: 110

This follows fixed hours instead of the sun, for example when your sun.sun doesn't match where the dashboard hangs.

type: custom:animated-weather-card
entity: weather.forecast_home
enable_day_night_cycle: true
sunrise_hour: 7
sunset_hour: 19

type: custom:animated-weather-card

Entities

Display

Forecast and clock

Interactions

Weather note

Motion

Day and night

Set these under engine_settings:. The editor's sliders cover the useful range, and YAML accepts more. Values outside the YAML range fall back to the default.

Set these under custom_colors:. Leave one out to keep the built-in colour.

type: custom:animated-forecast-card

Its options, with examples, are under The forecast card.

type: custom:animated-sun-tracker-card

custom_colors and theme skies apply to the weather card only.

The card reads the standard Home Assistant conditions. It also understands free-text conditions from other integrations, such as "light rain", "thunderstorm", "mist" or "heavy snow", and picks the closest sky.

Free-text conditions can also reach these skies:

The cards follow your Home Assistant profile: its language, its 12/24-hour time format and its time zone, the server's or the device's.

• From Home Assistant: the weather condition (with the forecast on, the card names it itself in its nine languages: "Rain" for Rainy), the moon phase, and the humidity, wind and pressure labels come from Home Assistant's own translations.
• The cards' own words: "Feels like", "Indoors", sunrise and sunset, the sun tracker's labels and the forecast's words, from "Rain from 17:00 to 19:00" to the chips and the days, are translated into:
  • English
  • German
  • Spanish
  • French
  • Italian
  • Dutch
  • Polish
  • Portuguese
  • Romanian

Other languages show English for those words. The strings live in src/localize.ts, and the forecast's in src/fc-words.ts and src/fc-words-more.ts. Corrections and new languages are welcome.

"Custom element doesn't exist: animated-weather-card" The resource isn't loaded. Check Settings → Dashboards → Resources, then reload the page. In the Companion app, reset the frontend cache from the app's settings.

Still the old version after an update Your browser is using a cached copy. For a manual install, raise the ?v= number in the resource URL. In both cases, reload the page.

"name has already been used" in the browser console The card is loaded twice, usually once from the Marketplace (/local/community/) and once from a manual install (/local/). Remove one of the resources.

The sky shows, but nothing moves Check these, in order:

1. Reduced motion is on in your system settings.
2. animate is false.

The settings panel stays empty animated-weather-card-editor.js must be in the same folder as animated-weather-card.js.

No sunset in the metric row Add sun_entity: sun.sun.

No forecast on the card The row needs an hourly forecast. With only a daily one, the card shows the line on what turns and a rail that steps through days; with none at all, it shows today alone, and the forecast card says "This weather entity has no forecast". On a manual install, animated-weather-card-forecast.js has to sit next to animated-weather-card.js. The browser console says so if it can't load.

The nightstand stays bright at night With night_sensor, night starts once the room stays under night_lux (5 lx) for a minute. The screen's own glow, a lamp or a street light can keep the sensor above that: check its reading at night in Home Assistant and set night_lux a little over it, such as 30. Without a sensor, night runs from bed_time to the alarm or wake_time, and night: on keeps it night.

No note under the conditions The note needs Home Assistant 2025.8 or later and an AI Task: the default one from Settings → System → AI, or note_ai_task_entity. The editor's Weather note section says what's missing, and so does the browser console. The card only writes while it's on screen, and after a failure it tries again ten minutes later. On a manual install, animated-weather-card-note.js has to sit next to animated-weather-card.js.

Planes don't appear Planes only fly in a few cases:

• Only flights that enter your area after the dashboard loads fly. Flights already overhead stay put, so reloading doesn't replay them, unless you set planes_on_load: true.
• Planes on the ground wait until they take off.
• Flights that arrive while the card is paused are skipped.
• At most three planes cross at once.
• On a manual install, animated-weather-card-planes.js has to sit next to animated-weather-card.js. The browser console says so if it can't load.

To check the setup, the developer panel's Fly a plane button sends one across in dev_mode.

Bug reports, ideas, translations and pull requests are all welcome. Start with CONTRIBUTING.md, and see the changelog for what's new.

npm install
npm run dev          # rebuild on change
npm test             # Vitest suite
npm run type-check
npm run build        # the six bundles, written to the repository root

To try a change in Home Assistant, copy the six .js files to config/www/ and add dev_mode: true to a card. You get sample data and a panel for trying every condition and time of day.

• Six bundles, built with esbuild. The card bundle loads the editor, the forecast, the note writer, the planes and the developer panel from its own folder when they're needed, so most dashboards only download the first.
• One forecast for the page. The main bundle holds the cards, their skies and one forecast subscription per weather entity; the forecast bundle draws the forecast, the clock, the forecast card, the view on tap, the nightstand and the wall.
• One animation class per kind of weather, on a shared lifecycle base and run by an animation controller. Rain, snow and sleet draw from fixed pools of recycled particles.
• Skies defined in OKLCH, with tests for contrast at every point where text sits.

src/
├── animated-weather-card.ts        # The weather card and the forecast card
├── sun-tracker-card.ts             # The sun tracker card
├── animated-weather-card-editor.ts # Entry point of the editor bundle
├── config-editor.ts                # Visual editor for the weather card
├── forecast-card-editor.ts         # Visual editor for the forecast card
├── sun-tracker-editor.ts           # Visual editor for the sun tracker
├── forecast-host.ts                # What the main bundle and the forecast bundle hand each other
├── forecast-data.ts, forecast-feed.ts, forecast-model.ts # The page's forecast subscriptions, and the days
├── hour-link.ts                    # One needle across the page: a dragged card's hour, for the others
├── animated-weather-card-forecast.ts # Entry point of the forecast bundle
├── fc-*.ts                         # The forecast, the slide, the clock, the icons, the forecast card,
│                                   # the view on tap, the nightstand and the wall
├── sun-path.ts                     # The sun tracker's path
├── icons.ts                        # The cards' own icons
├── actions.ts, action-editor.ts    # Tap, hold and double-tap actions, and their editor
├── bundles.ts                      # Loads the other bundles from beside the main one
├── animated-weather-card-dev.ts    # Entry point of the developer panel bundle
├── dev-panel.ts                    # Developer panel (dev_mode)
├── animated-weather-card-note.ts   # Entry point of the note writer bundle
├── note-generator.ts               # Writes the note with Home Assistant's AI Task
├── animation-controller.ts         # Starts and stops animations per condition
├── modular-integration-bridge.ts   # Builds each animation with its settings
├── base-animation.ts               # Lifecycle base class for animations
├── rain-animation.ts, snow-animation.ts, sleet-animation.ts, wind-animation.ts,
│   lightning-animation.ts, clouds-animation.ts, fog-animation.ts,
│   stars-animation.ts, sun-animation.ts
├── animated-weather-card-planes.ts # Entry point of the planes bundle
├── planes-animation.ts             # Plane fly-overs
├── aircraft.ts                     # Each aircraft family, drawn from its real dimensions
├── particle-pool.ts                # Recycled particles for rain, snow and sleet
├── gsap-effects.ts                 # Clouds, leaves, swooshes and fog
├── cloud-band.ts                   # Where clouds ride above the forecast
├── flight-tracker.ts               # Flightradar24 arrivals for plane fly-overs
├── sky.ts                          # Sky palettes (OKLCH), phases and contrast checks
├── localize.ts                     # The cards' own strings, times and durations
├── time-manager.ts                 # Optional clock-based day/night cycle
├── weather-data.ts                 # Reads the weather entity and sensors
├── color-utils.ts                  # custom_colors
├── constants.ts, types.ts, utils.ts
└── styles/                         # CSS for the card, editor and developer panel

• GSAP moves the weather. It's bundled into the card under its standard license.
• Material Design Icons, through Home Assistant, draw the wind and pressure arrows and the editors' icons.
• The Flightradar24 integration by AlexandrErohin supplies the planes.
• The Home Assistant community gave feedback along the way. Thank you.

MIT

If the card earns its place on your dashboard, you can buy me a coffee.