Skip to content

Repository files navigation

Little Weather · Pixel Weather Card for Home Assistant

Validate Latest release MIT license

A little window outside, right in your Home Assistant dashboard.

Little Weather is a custom Lovelace weather card with animated pixel-art scenery. Watch the weather change across woods, farms, suburbs and cities; tap the temperature for the forecast, check incoming rain, or wave hello to a tiny passerby.

Little Weather farm scene with current temperature, upcoming rain and a small three-bar menu

Download the latest install ZIP · Installation · Configuration · Report a bug

Early public release. The manual install has been trialed in Home Assistant, with desktop/mobile browser checks. HACS custom-repository packaging is provided; broad version/device compatibility is still being tested. This project is not in the default HACS catalog.

What it does

  • Four living scenes: woods, farm, suburbs and city, with seasonal foliage and gradual dawn/dusk lighting when sun times are available.
  • Interactive pixel life: walkers wave, birds hop or swoop, cars blink, and squirrels, chickens or cats react to a tap. Suitable nights bring fireflies and occasional shooting stars.
  • Weather-aware animation: rain, snow, mist and clouds; umbrellas in rain; headlights at night, in heavy rain or fog; puddle ripples and tire splashes.
  • Forecasts inside the scene: tap the temperature for seven calendar days plus hourly views. Missing provider days remain clearly marked.
  • Rain timing and amounts: hourly precipitation windows, approximate start/clearing times, chance when available and liquid-equivalent totals.
  • Official US weather alerts: NWS severity, source, instructions, event end and bulletin expiry. Failed checks are not shown as an all-clear.
  • Today’s details: feels-like, wind/gusts, humidity, sunrise/sunset and peak UV when supplied.
  • Locations and local character: save towns/cities, use approximate device location with permission, choose scenery per place, and optionally look up nearby land use and stylized landmarks.
  • Four card layouts: full, compact, scene and forecast. Preferences persist in the same browser; a shared card_id links cards on that browser.
  • Accessible motion controls: keyboard alternatives for sprite interactions, reduced-motion support, and animation pause when offscreen or in a background tab.

All runtime artwork, JavaScript and WebAssembly are served by your Home Assistant. No Rive account, API key, custom integration or separate server is needed to install the card. Weather and optional map features still use the providers described below.

Screenshots

These are actual renders of the card using fictional sample weather, not forecasts or a private dashboard. Seasonal and lighting previews are labeled in the UI.

Woods at night Rain in the city
Woods with night lighting and pixel animals City scene with umbrellas, rain and traffic
Spring in the suburbs Winter woods
Spring blossoms in the suburbs Snow and bare deciduous branches in winter woods
Mobile scene Seven-day forecast
Little Weather on a narrow mobile screen Seven-day sample forecast with high, low, condition and precipitation

Install in Home Assistant

Manual install

  1. Open Releases and download pixel-weather-card-0.6.1.zip from Assets. Use the install ZIP, not GitHub’s automatic source-code ZIP.
  2. Unpack it and copy every file into www/pixel-weather/ inside your Home Assistant configuration directory. On HAOS this is commonly /config/www/pixel-weather/; the File editor app may show /homeassistant/www/pixel-weather/.
  3. Open Settings → Dashboards → Resources. Enable Advanced Mode in your profile if Resources is not visible. Add:
    • URL: /local/pixel-weather/pixel-weather-card.js?v=0.6.1
    • Type: JavaScript module
  4. Reload Home Assistant in the browser/app.
  5. Edit your dashboard → Add card → search for Little Weather → select your weather.* entity.

The JavaScript, rive.wasm and pixel-weather.riv must stay in the same folder. The release also includes the install guide, license, notices and checksums.

HACS custom repository

  1. Open HACS → ⋮ → Custom repositories.
  2. Enter https://github.com/gnuattitude/pixel-weather-card and choose Dashboard as the type.
  3. Add it, find Little Weather, and download it.
  4. Reload Home Assistant. If HACS did not register the resource automatically, add /hacsfiles/pixel-weather-card/pixel-weather-card.js as a JavaScript module.
  5. Add a Little Weather card and select a weather entity.

The repository keeps all runtime files together in dist/, following the HACS dashboard requirements. A HACS installation should include both the .riv and .wasm assets alongside the JavaScript. If your setup does not download them, use the manual install and report the HACS version. Do not load both manual and HACS resources at the same time.

Example card

# Generated by ha-yaml@aurora-smart-home v1.1.0
# https://github.com/tonylofgren/aurora-smart-home
# Dashboard card; replace the example weather entity with yours.
type: custom:pixel-weather-card
entity: weather.home
name: Home
scene: woods
view: full
card_id: little-weather-main

The visual editor handles the common settings. See all options and multi-card examples.

Make it yours

  • Temperature: seven-day and hourly forecasts.
  • Rain tile: incoming conditions, precipitation totals and approximate clearing windows.
  • Location tile: search, save or switch towns; use device location when supported.
  • ☰ menu: scenery/landmarks, animation previews, today’s details, alerts and installation.
  • Tap a sprite: wave, hop, blink or greet. The animation menu provides equivalent buttons.

Use Animation & preview to try seasons, sunrise/sunset or weather conditions. Return to live clears the previews. The readings and official alerts stay tied to the selected location throughout.

Updates and rollback

For manual installs, back up the existing www/pixel-weather/ folder, replace all files together, and update the version suffix on the existing resource URL. Reload every browser/app using the card. Keep the same card_id to retain browser preferences. To roll back, restore the old files and change the resource query suffix again to bypass caching.

For HACS installs, use HACS to update or redownload the desired version. See troubleshooting if an old bundle remains cached.

Data, privacy and limits

Feature Source / behavior
Home conditions and forecasts Your selected Home Assistant weather entity; forecast support varies by integration.
Saved-city weather and extra Home details Open-Meteo; receives selected/approximate coordinates. Home supplemental values are labeled as estimates.
City search Open-Meteo geocoding; receives the text you search.
Official alerts US National Weather Service; receives rounded coordinates and checks coverage. Other countries are not currently supported.
Optional local features OpenFreeMap / OpenStreetMap map tiles; requested only when you choose nearby-feature lookup. Landmarks are stylized, not exact property reconstructions.
Saved preferences Browser localStorage; no account, server sync or cross-device synchronization.

The card does not send your Home Assistant token to weather or map providers. It does not change your Home zone, automations or device states. Device geolocation needs a secure context such as HTTPS and permission; otherwise Home weather and city search still work. Home-based external lookups use HA’s configured Home coordinates, so choose a saved city when viewing a different place.

Rain timing is hourly forecast guidance, not radar or exact-minute nowcasting. Weather refreshes as providers report it. Official alert checks run about every five minutes while the page is visible; the card does not deliver push notifications. Missing or stale data is labeled. Seasonal trees, wildlife and puddles are illustrative.

Open-Meteo’s public free API is intended for non-commercial use, including personal home automation. Commercial use of the software does not remove provider licensing or service requirements. See third-party notices.

Development and contributing

npm ci
npm test
npm run build
npm run package
npm run serve

Use Node.js 22+, Python 3 and zip/tar. Open http://127.0.0.1:8765 for the sample development harness. The test suite covers provider parsing, missing data, alerts, map decoding, seasonal lighting, actor interactions and ZIP integrity. CI runs tests, builds and validates release checksums. Browser checks cover visual behavior; they are documented in CONTRIBUTING.md.

The compiled artwork is included. To edit the Rive scene, use the official Rive CLI; see the artwork workflow. No CLI login is needed for ordinary installation.

Bug reports and feature ideas are welcome. Please remove personal coordinates, tokens and private dashboard content before sharing diagnostics.

License

MIT for this project’s source, authored artwork and screenshots. Dependencies and map/weather data retain their own licenses. This is an independent community project, not an official Home Assistant, Rive or NWS product.

About

Animated pixel-art weather card for Home Assistant: seasonal scenes, interactive characters, forecasts, rain timing, official US alerts and saved places.

Topics

Resources

Contributing

Security policy

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages