TimeFlow Card - Beautiful countdown timers For Home Assistant

Share your Projects!
,
1

:wave: Hi everyone!

I’m excited to share a card I’ve been working on that brings beautiful countdown timers to Home Assistant: :alarm_clock: TimeFlow Card

TimeFlow Card Preview
TimeFlow Card Preview2703×1825 383 KB

A beautiful countdown timer for Home Assistant that features animated progress circles and smart, easy-to-read time formatting. Whether you’re tracking birthdays, deadlines, events, or anniversaries, this card makes it look great and keeps you updated in real time! :alarm_clock:

:wrench: Features

  • :dart: Entity Support for dynamic countdowns from sensors
  • :zap: Real-time updates with 1-second precision
  • :brain: Smart Time Display with natural language formatting
  • :performing_arts: Fully customizable colors, sizes, and time units
  • :rainbow: Template Support for dynamic content and colors

:dart: Use Cases

  • Project deadlines and milestones
  • Event countdowns (birthdays, vacations, holidays)
  • Maintenance schedules (backups, updates, renewals)
  • Goal timelines (exams, competitions, launches)
  • Server monitoring and automation tracking

:bulb: Why TimeFlow Card?

The idea behind TimeFlow Card is to bring an elegant and animated way to visualize time-based events right on your Home Assistant dashboard something more expressive than plain numbers or static countdowns.

The visual design takes inspiration from modern iOS-style widgets and minimal dashboard aesthetics, focusing on smooth animations, intuitive layouts, and clean typography.

But what makes TimeFlow Card different?

  • Other countdown cards show time in just numbers — TimeFlow Card shows progress visually through animated rings and smart formatting.
  • It’s perfect for users who want a sleek, no-fuss way to track events like meetings, trips, or routines.
  • The card supports full customization through YAML, but also works out-of-the-box with default styles if you prefer simplicity.
  • The card supports Homeassistant Templates for all the important configs so it is heavliy customizable.

TimeFlow Card is still evolving, so you can expect improvements and possibly a few breaking changes as new features roll out. If you enjoy visual dashboards and care about how time is displayed, give it a try!

:rocket: Ready to try it?

You can install TimeFlow Card easily via HACS by searching for TimeFlow Card under the Frontend section.

I’d love to hear your feedback or ideas to make it even better! :hugs:

Made with :heart: for the Home Assistant community

11 Likes
2

First off, fantastic cards, great job! Unfortunately, I ran into one problem. On the Tab A8 tablet, when I enter the page where I have added TimeFlowe cards, the cards start animation appears, followed by the time remaining on card, but it immediately resets and the animation appears again.

3

Hey @Shinigami777 , thanks so much for the kind words.

I’d love to help figure this out. To see what’s going on, would you be able to share two things ?

  1. The code snippet showing how you’ve added the Time Flow cards.
  2. A quick screen recording of the issue happening on your Tab A8.
4

Hi, sorry for replying so late, but I’ve been really busy lately.
The problem occurs on two of my tablets (Galaxy Tab A8 and A9+) when I use Fully kiosk browser.

square: false
type: grid
cards:
  - type: custom:timeflow-card
    title: AC Filter
    creation_date: "{{ states('input_datetime.ac_filters_last_change') }}"
    target_date: "{{ now().isoformat() }}"
    color: "#FFFFFF"
    progress_color: >-
      {% set filter_timestamp =
      as_timestamp(states('input_datetime.ac_filters_last_change')) %} {% set
      days_elapsed = (now().timestamp() - filter_timestamp) / 86400 %} {{
      '#1976D2' if days_elapsed < 30 else '#F57C00' if days_elapsed < 60 else
      '#D32F2F' }}
    background_color: >-
      {% set filter_timestamp =
      as_timestamp(states('input_datetime.ac_filters_last_change')) %} {% set
      days_elapsed = (now().timestamp() - filter_timestamp) / 86400 %} {{
      '#0D1A2E' if days_elapsed < 30 else '#2D1F0A' if days_elapsed < 60 else
      '#2C1810' }}
    show_days: true
    show_hours: false
    show_minutes: false
    show_seconds: false
    stroke_width: 1
    expired_text: >-
      🔧 {{ ( (now().timestamp() -
      as_timestamp(states('input_datetime.ac_filters_last_change'))) / 86400 ) |
      round(0) }} days ago!
  - type: custom:timeflow-card
    title: Vallox Filter
    creation_date: "{{ states('input_datetime.vallox_filters_last_change') }}"
    target_date: "{{ now().isoformat() }}"
    color: "#FFFFFF"
    progress_color: >-
      {% set filter_timestamp =
      as_timestamp(states('input_datetime.vallox_filters_last_change')) %} {%
      set days_elapsed = (now().timestamp() - filter_timestamp) / 86400 %} {{
      '#1976D2' if days_elapsed < 30 else '#F57C00' if days_elapsed < 60 else
      '#D32F2F' }}
    background_color: >-
      {% set filter_timestamp =
      as_timestamp(states('input_datetime.vallox_filters_last_change')) %} {%
      set days_elapsed = (now().timestamp() - filter_timestamp) / 86400 %} {{
      '#0D1A2E' if days_elapsed < 30 else '#2D1F0A' if days_elapsed < 60 else
      '#2C1810' }}
    show_days: true
    show_hours: false
    show_minutes: false
    show_seconds: false
    stroke_width: 1
    expired_text: >-
      🔧 {{ ( (now().timestamp() -
      as_timestamp(states('input_datetime.vallox_filters_last_change'))) / 86400
      ) | round(0) }} days ago!
columns: 2
![1000636730|640x395](upload://qPHEV7cDfEGd00JRmnxOVTP1v5U.gif)

1000636730

5

Hi, is there a chance you could take a look at my problem? I will be very grateful.