⛅ Dynamic Weather Card

Dynamic weather card for Home Assistant with realistic animations

English | Русский

🎮 Try Live Demo • 📖 Documentation • 🐛 Report Issue

🌟 Preview

✨ Features

🎨 Visual Experience

Realistic Canvas Animations
- Rain with different intensities
- Snowfall with various particle effects
- Fog and mist
- Hail and sleet
- Lightning and thunderstorms
Dynamic Time-Based Backgrounds
- Sunrise gradient (6:00 - 8:00)
- Bright day sky (8:00 - 18:00)
- Sunset gradient (18:00 - 20:00)
- Night sky (20:00 - 6:00)

⚙️ Functionality

Smart Data Display
- Hourly & daily forecasts
- Feels-like temperature
- Wind speed, gusts & direction
- Humidity levels
- Sunrise & sunset times
- Real-time clock (12h/24h)
User-Friendly
- Visual editor in Home Assistant UI
- Auto-detection of language & units
- Fully responsive design
- Works with all weather integrations

📦 Installation

Option 1: HACS (Recommended)

Click the button below to open HACS:
Or manually:
- Open HACS in Home Assistant
- Go to Frontend section
- Click "+" button
- Search for "Dynamic Weather Card"
- Click Install

Option 2: Manual Installation

Download dynamic-weather-card.js from the latest release
Copy it to config/www/community/dynamic-weather-card/ directory

Add resource in Home Assistant:

Settings → Dashboards → Resources → Add Resource

URL: /local/community/dynamic-weather-card/dynamic-weather-card.js
Type: JavaScript Module

🚀 Quick Start

Minimal Configuration

type: custom:dynamic-weather-card
entity: weather.home

That's it! The card will automatically detect your language and display settings.

Using Visual Editor

Add a card to your dashboard
Search for "Dynamic Weather Card"
Select your weather entity
Customize options in the visual editor

⚙️ Configuration

📋 Complete Configuration Example (click to expand)

type: custom:dynamic-weather-card
entity: weather.home
name: My Weather Station
height: 300
language: auto                    # auto, en, ru, de, fr, nl, es, it, hu, sk
overlay_opacity: 0.15             # 0-1 (dark overlay for better readability)
wind_speed_unit: ms               # ms or kmh (for legacy integrations)

# Temperature & Humidity
show_feels_like: true
show_min_temp: true
show_humidity: true

# Wind Information
show_wind: true
show_wind_direction: true
show_wind_gust: true

# Forecasts
show_hourly_forecast: true
hourly_forecast_hours: 8
show_daily_forecast: true
daily_forecast_days: 5

# Sun & Clock
show_sunrise_sunset: true
sunrise_entity: sensor.sun_next_rising    # optional
sunset_entity: sensor.sun_next_setting    # optional
show_clock: true
clock_position: top                       # top or details
clock_format: 24h                         # 12h or 24h

📊 Configuration Parameters

Parameter	Type	Default	Description
Required
`entity`	string	-	Weather entity ID (e.g., `weather.home`)
Display
`name`	string	-	Custom card title (leave empty to hide)
`height`	number	`200`	Card height in pixels
`language`	string	`auto`	`auto`, `en`, `ru`, `de`, `fr`, `nl`, `es`, `it`, `hu`, `sk`
`overlay_opacity`	number	`0.1`	Dark overlay opacity (0-1) for text readability
Temperature
`show_feels_like`	boolean	`true`	Display "feels like" temperature
`show_min_temp`	boolean	`true`	Display minimum temperature
Weather Details
`show_humidity`	boolean	`false`	Display humidity percentage
`show_wind`	boolean	`false`	Display wind speed
`show_wind_direction`	boolean	`false`	Display wind direction
`show_wind_gust`	boolean	`false`	Display wind gust speed
`wind_speed_unit`	string	`ms`	`ms` or `kmh` (for legacy integrations)
Forecasts
`show_hourly_forecast`	boolean	`false`	Show hourly forecast
`hourly_forecast_hours`	number	`5`	Number of hours to display (1-24)
`show_daily_forecast`	boolean	`false`	Show daily forecast
`daily_forecast_days`	number	`5`	Number of days to display (1-14)
Sun & Clock
`show_sunrise_sunset`	boolean	`false`	Display sunrise/sunset times
`sunrise_entity`	string	-	Custom sunrise sensor (optional)
`sunset_entity`	string	-	Custom sunset sensor (optional)
`show_clock`	boolean	`false`	Display current time
`clock_position`	string	`top`	`top` (top-right) or `details` (info row)
`clock_format`	string	`24h`	`12h` (AM/PM) or `24h`

🌡️ Integration-Specific Examples

OpenWeatherMap / Met.no

type: custom:dynamic-weather-card
entity: weather.home
show_hourly_forecast: true
show_daily_forecast: true

Yandex Weather

Yandex Weather requires separate sensors for sunrise/sunset:

type: custom:dynamic-weather-card
entity: weather.yandex_pogoda
name: Moscow
show_sunrise_sunset: true
sunrise_entity: sensor.yandex_pogoda_next_sunrise
sunset_entity: sensor.yandex_pogoda_next_sunset

AccuWeather

type: custom:dynamic-weather-card
entity: weather.home
show_feels_like: true
show_wind: true
show_humidity: true

🌍 Language Support

The card automatically detects your Home Assistant language or you can set it manually:

Language	Code	Status
English	`en`	✅ Complete
Русский	`ru`	✅ Complete
Deutsch	`de`	✅ Complete
Français	`fr`	✅ Complete
Nederlands	`nl`	✅ Complete
Español	`es`	✅ Complete
Italiano	`it`	✅ Complete
Magyar	`hu`	✅ Complete
Slovenčina	`sk`	✅ Complete

Want to add your language? Contribute here!

🌤️ Supported Weather Conditions

☀️ Sunny / Clear	🌙 Clear Night	⛅ Partly Cloudy
☁️ Cloudy / Overcast	🌧️ Rainy	⛈️ Heavy Rain / Pouring
❄️ Snowy	🌨️ Sleet / Snowy-Rainy	🌫️ Foggy
⚡ Lightning	⛈️ Thunderstorm	🧊 Hail

💡 Smart Features

Automatic Wind Speed Units

The card automatically detects wind speed units from your weather integration:

Modern Integrations (Met.no, OpenWeatherMap, Yandex): Units detected automatically
Legacy Integrations: Set wind_speed_unit parameter manually

Supported units: m/s, km/h, mph, knots, ft/s

Automatic Sunrise/Sunset Detection

The card looks for sunrise/sunset data in this order:

Custom sensors (sunrise_entity, sunset_entity)
Weather entity attributes
Home Assistant's sun.sun entity (built-in)

In most cases, no configuration needed!

🎨 Time of Day Backgrounds

Time	Period	Visual Effect
6:00 - 8:00	🌅 Sunrise	Warm orange-pink gradient
8:00 - 18:00	☀️ Day	Bright blue sky
18:00 - 20:00	🌇 Sunset	Orange-purple gradient
20:00 - 6:00	🌙 Night	Deep blue/purple night sky

🔧 Development

Prerequisites

Bun or Node.js 18+
Modern browser with Canvas support

Setup

# Install dependencies
bun install
# or
npm install

# Development mode (auto-rebuild)
bun run dev

# Production build
bun run build

# Lint code
bun run lint

# Fix linting issues
bun run lint:fix

Project Structure

src/
├── animations/          # Canvas animation engines
│   ├── rain.ts
│   ├── snow.ts
│   ├── fog.ts
│   └── ...
├── components/          # Web components
│   ├── card.ts         # Main card component
│   └── editor.ts       # Visual editor
├── internationalization/ # i18n translations
│   └── locales/
│       ├── en/
│       ├── ru/
│       └── ...
├── constants.ts         # Configuration defaults
├── types.ts            # TypeScript definitions
└── utils.ts            # Helper functions

Contributing & Support

Contributions are welcome! If you find this card useful, here's how you can help:

Add translations for new languages
Report bugs and issues
Suggest new features
Submit pull requests
Star the repository
Share your feedback

License

MIT © teuchezh

Credits

Weather Icons: Basmilius Weather Icons by @basmilius (MIT License)
Built for: Home Assistant community

Made with ❤️ for the Home Assistant community

⬆ Back to Top

Name		Name	Last commit message	Last commit date
Latest commit History 56 Commits
.github		.github
docs		docs
src		src
.editorconfig		.editorconfig
.gitignore		.gitignore
AGENTS.md		AGENTS.md
CHANGELOG.md		CHANGELOG.md
CLAUDE.md		CLAUDE.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
README.ru.md		README.ru.md
build.ts		build.ts
bun.lock		bun.lock
demo.html		demo.html
dynamic-weather-card.js		dynamic-weather-card.js
eslint.config.js		eslint.config.js
hacs.json		hacs.json
info.md		info.md
package.json		package.json
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation

⛅ Dynamic Weather Card