Set up the Animated Weather Card

Install

What you need

A weather entity. Any weather integration works: Met.no (a new Home Assistant sets it up), OpenWeatherMap, AccuWeather, Pirate Weather, the National Weather Service and others.
For the weather note, Home Assistant 2025.8 or later and an AI integration. The note's section has the details.

With HACS

The quick start covers it. HACS adds the dashboard resource for you when your dashboards are managed in the UI. For a dashboard in YAML mode, add it yourself:

Dashboard resources

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

When a new version is out, HACS shows an update. Download it and reload your browser.

By hand

The card is five files that sit in the same folder. Only the first is a dashboard resource; it loads the others when it needs them.

It's split so each screen downloads only what it uses. Every phone and wall tablet that shows your dashboard loads the card, but few of them ever open the editor, and only some cards write a note, fly planes or run in developer mode. Those parts wait in files of their own until a card needs one. Each is fetched from the folder the first file came from, so keep all five together.

File	What it is
`animated-weather-card.js`	Both cards. The only resource you add.
`animated-weather-card-editor.js`	The visual editors for both cards, loaded the first time you open a card's settings.
`animated-weather-card-note.js`	The note writer, loaded only by cards that write their own note.
`animated-weather-card-planes.js`	The planes, loaded only by cards with a flights sensor.
`animated-weather-card-dev.js`	The developer panel, loaded only with `dev_mode: true`. You can leave it out.

Download the files from the latest release.
Copy them to your config/www/ folder. If you had to create www/, restart Home Assistant once so it serves /local/.
Go to Settings → Dashboards → ⋮ → Resources → Add resource, and add /local/animated-weather-card.js?v=1 as a JavaScript module. If Resources isn't there, turn on Advanced mode in your user profile.
Reload your browser.

Dashboard resources, YAML mode

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

To update, overwrite the files and raise the ?v= number, so browsers fetch the new version. The other files follow it.

Load the card from one place only. If you move between HACS (/hacsfiles/) and a copy of your own (/local/), remove the old resource. The second copy can't register, and the first one keeps running.

Your first card

In the editor

Add the card and it's working: it starts on your weather entity. If you have more than one, pick the one you want. Everything else is in the editor's sections: Entities, Display, Interactions, Weather note, Day and night, Advanced, Weather engine and Colors.

In Home Assistant 2026.6 and later, the By entity tab suggests the card too. Pick your weather entity, and it's under Community, regular and compact.

In YAML

A weather entity is the one thing the card needs. The sun entity is optional: it adds the next sunset, or sunrise, to the metrics. The sky follows sun.sun either way.

Card YAML

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

How big

In a sections view the card sizes itself, and you can resize it. It lays itself out for the room it gets, and gives up the least it can when the room is short.

Card	Size	On a phone
Default	12 × 4	The temperature, the condition and the metrics, with their labels. The location and the line under the condition give way.
With a note	12 × 5	All of it, with a smaller temperature and the note on one line. Give it six rows for the whole note.
Compact	12 × 2	One line: the temperature and the condition.

In a masonry view, the card grows to fit its content. On a wall tablet, a panel view gives it the whole screen, and from 640 px wide the metrics move beside a larger temperature.

A panel view, for a wall tablet

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

The weather note

A sentence under the conditions: a remark on the weather, what's coming in the next hours and what to wear. Home Assistant's AI Task writes it from your forecast, with whichever AI you've set up there. Your API key stays in Home Assistant; the card never sees it.

What it needs

Home Assistant 2025.8 or later.
An AI integration that provides an AI Task: OpenAI, Google, Ollama, OpenRouter, Anthropic (2025.12 or later) or Home Assistant Cloud.

Set up the AI

Add the integration. Go to Settings → Devices & services → Add integration and pick one, such as Anthropic or OpenAI, with your API key. A new setup creates an AI Task for you, named Claude AI Task or OpenAI AI Task.
Choose its settings. Open the AI Task's settings, not the conversation agent's. The card works out the facts itself, so the AI only writes two short sentences: a small, fast model does it best, with as little thinking as it allows.
Make it the default. Pick it under Settings → System → AI (Settings → System → General before 2026.10). Or name it in the card, as note_ai_task_entity.

Settings for the AI Task
Provider	Choose
Anthropic	Turn Recommended off. Model `claude-haiku-5-5`, newer and about a tenth of Haiku 4.5's price. Maximum tokens 3000, the default: it's only a ceiling, and lower risks a note cut off. Thinking effort Low. Code execution, web search and web fetch off. On Haiku 4.5, set Thinking budget to 0 instead.
OpenAI	Turn Recommended off; it would pick `gpt-4o-mini`, which OpenAI retires in January 2027. Choose `gpt-6-luna`, with Reasoning effort set to None. Web search and the code interpreter off. The image model doesn't matter for the note.
Others	Google, Ollama, OpenRouter, Home Assistant Cloud: their smallest current model, with thinking or reasoning turned down as far as it goes. A local model through Ollama costs nothing per note, but has to follow a JSON schema: the card asks for structured output.

Turn it on

In the editor's Weather note section, switch on Write it with your AI. It's snarky by default; pick another voice if you like, and your calendar, so it can say what to wear when you're out.

Card YAML

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 you'll see

A status, then the note. While a new note is written, its place says what's happening: Reading the forecast, then Writing the note. The note then types itself in. With reduced motion, it's simply there.
Facts first. The card works out what the forecast says (when it rains and stops, the warmest and coldest hours, gusts, UV) and the AI only puts that into words. Storms, hail, heavy rain, gale-force gusts and dangerous cold or heat get plain advice, whatever the voice.
Your calendar. With one, the note says what to wear for each stretch you're out in the next 12 hours. Timed events count; all-day, cancelled and online ones (a location that's a link) don't. Only the times reach the AI, never an event's name, place or description.
One note for all your screens. It's shared through your Home Assistant user, rewritten after an hour or when the forecast changes, and only while a screen is showing the card.
Five rows. With a note the card asks the sections view for a fifth row. In a shorter frame the note gives way before anything else does.

The AI can slip. The card hands it the facts and tells it never to invent a time or a temperature, but now and then a model still gets one wrong: a time that isn't in the forecast, or the rain mixed up with your hours out. The note is a nudge, not the forecast. When the two disagree, trust your weather integration's forecast.

What it costs

Each note is one small request, about 1,000 tokens in and 60 out. With the settings above, a card on screen all day comes to about $0.20 a month.

From an entity instead

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. Its state is the one-line version, a note attribute the longer one, and a generated_at attribute lets the card hide it three hours after it was written (note_max_age). An entity is used instead of the AI.

Card YAML

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

Extras

Your own sensors

Your sensors take the place of the weather entity's values; indoor readings sit under the condition. A wind speed sensor also sets how fast the weather moves, and a wind direction sensor can report degrees or a compass point like NW. Without a feels-like sensor, the card uses the weather entity's apparent temperature if it has one.

Card YAML

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

The sun tracker

It comes in the same download: the sun's path through your day, and the next sunrise or sunset as its headline. Stacked under the weather card it takes the card's sky, and the weather card can leave the sunset to it.

A vertical stack

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

The moon

The tracker names the moon's phase among its details. Add Home Assistant's Moon integration under Settings → Devices & services, and give the tracker its sensor as moon_entity, as above.

Planes

With the Flightradar24 integration (from HACS), each flight that enters your area crosses the card once, at its real heading, height and speed, drawn as its aircraft: an airliner, a 747, a turboprop, a business jet, a helicopter. Set show_flight_labels: false to fly them without their tags.

Card YAML

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

Your theme

The theme palette drops the sky and draws the weather in your dashboard's own colours, light or dark.

Card YAML

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

Every option, with its default, is in the README's options tables.

Troubleshooting

“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 has a cached copy. For a copy of your own, raise the ?v= number in the resource. Either way, reload the page.
“name has already been used” in the browser console: The card is loaded twice, usually from both /hacsfiles/ and /local/. Remove one of the resources.
No note: The editor's Weather note section says what's missing: a Home Assistant older than 2025.8, or no default AI Task. The browser console says it too, once, starting Animated Weather Card: no note. The card only writes while it's on screen, and after a failure it tries again ten minutes later.
The note takes a while: Reading the forecast waits up to ten seconds for your weather integration's forecast, then writes from the current conditions alone. Writing the note waits up to thirty seconds for the AI, then gives up until the next try. A small model with thinking turned down answers in a second or two.
The sky shows, but nothing moves: Reduced motion is on in your system settings, or animate is false.
The settings panel stays empty: animated-weather-card-editor.js has to be in the same folder as animated-weather-card.js.
No sunset in the metrics: Add sun_entity: sun.sun.
Planes don't appear: Only flights that enter your area after the dashboard loads fly, planes on the ground wait until they take off, flights that arrive while the card is paused are skipped, and at most three cross at once. In dev_mode, the developer panel's Fly a plane button sends one across to check the setup.

Something else? Open an issue with what you see and your card's YAML.

Set it up. Then make it yours.

Quick start. Four steps, all in Home Assistant.

Find it in HACS

Download it

Add the card

Make it yours

Install

What you need

With HACS

By hand

Your first card

In the editor

In YAML

How big

The weather note

What it needs

Set up the AI

Turn it on

What you'll see

What it costs

From an entity instead

Extras

Your own sensors

The sun tracker

The moon

Planes

Your theme

Troubleshooting