Living Countdown Widget

Add a festive countdown to your website that changes as the day approaches. For Christmas a paper-cut village lights one more window every day of December; for New Year a midnight sky fills with stars, then fireworks.

Time & Date Clock & time Runs in your browser Free · no ads

Customize your widget

Theme
Auto follows the visitor's light/dark setting.
Style
Attribution on your page
The widget is free; a visible credit is how you can say thanks. It is one plain line, shown in the code below, linking to the tool with rel="nofollow". Switch it off here or delete the line - the widget works the same either way.
More options
Starting values
Leave blank to use the widget's defaults. Visitors can still change every value.

Live preview

Exactly what your visitors will see

Under the widget on your page: Living Countdown by A2Z Tools

Embed code

<div data-a2z-widget="countdown" data-height="430"></div>
<p class="a2z-attribution" style="margin:6px 0 0;font:12px/1.4 system-ui,sans-serif;opacity:.8">Living Countdown by <a href="https://a2z.tools/embed/countdown" target="_blank" rel="nofollow noopener">A2Z Tools</a></p>
<script async src="https://a2z.tools/embed.js"></script>

Recommended. A small script (what it does) sizes the widget to fit its content, loads it lazily and keeps it isolated in its own frame. Works in WordPress (Custom HTML block), Squarespace, Webflow, Shopify, Blogger, React / Next.js and plain HTML - anywhere a <script> tag is allowed.

Works with

Advertisement

How it works

Most countdowns only change their digits. This one changes its picture with the calendar. In Christmas mode a small paper-cut village sits under a folk star with twenty-four windows across six houses. Each day of December lights the next window in order, like an advent calendar, so a reader returning on the 9th sees nine glowing panes and the star burning a little brighter; on the 24th all of them are lit, and on Christmas Day itself the tiles give way to a Merry Christmas greeting. In New Year mode a city skyline waits under a midnight sky that begins December nearly empty and gathers stars until the last evening. During the final ten seconds the numerals appear huge, in polished chrome, across the scene, and on 1 January fireworks burst for the whole day. Festival dates are read on each visitor's own device, so midnight arrives in Mumbai, London and Toronto at their own midnights. After the celebration the widget quietly rolls forward to next year's date, so the code you paste in November still works the following winter. You can also give it any date of your own and choose either scene.

Method

  • Christmas = 25 December 00:00 and New Year = 1 January 00:00 in the visitor's own time zone; the festival day itself shows the greeting, the next day rolls to the following year
  • Without v_event: Christmas until the end of 25 December, then New Year until the end of 1 January
  • Advent windows lit = the day of December (1-24), all 24 from the 24th; none before 1 December
  • Stars in the New Year sky = 30 + 170 x (time elapsed in December / length of December)
  • Remaining seconds = ceiling((target - now) / 1000), recomputed from the device clock on every tick
  • Custom: v_target wall-clock time in v_zone (IANA), or an exact Z / +05:30 offset, or visitor-local without either; celebrates for 24 hours after the moment

Worked examples

Advent village on 9 December

Inputs: v_event=christmas, visitor's clock 2026-12-09 20:00 local

Result: 15 days, 4 hours, 0 minutes, 0 seconds; 9 of 24 windows lit

25 December 00:00 is 15 days and 4 hours after 9 December 20:00. Nine days of December have begun, so nine windows glow.

New Year sky halfway through December

Inputs: v_event=newyear, visitor's clock 2026-12-16 12:00 local

Result: 15 days, 12 hours left; about 115 stars

15.5 of December's 31 days have passed (0.5 of the month), so 30 + 170 x 0.5 = 115 stars.

Boxing Day

Inputs: No v_event, visitor's clock 2026-12-26 09:00 local

Result: New Year 2027: 5 days, 15 hours left

Christmas ended at midnight, so the widget switches to the New Year scene automatically.

Limitations

  • It trusts the visitor's device clock: a phone set ten minutes fast lights the window and starts the fireworks ten minutes early.
  • Christmas is 25 December; the Orthodox Christmas on 7 January and lunar new years are not built in (use a custom date).
  • The scene is always a night palette, also in the light theme.
  • Only one countdown per embed; for several dates use several embeds.

Where publishers use it

  • A school or college newsletter page counting down to the winter break with the advent village
  • A restaurant or bar announcing its New Year's Eve night, with fireworks greeting visitors on 1 January
  • A charity's December appeal page where the lit windows show how far into the giving season the campaign is
  • A shop's holiday-orders page beside last-posting-date notices, so shoppers see how many days are left

Questions

Does it show the same moment to everyone?

For Christmas and New Year, no - and that is deliberate. Each visitor counts to midnight on their own device, the way people celebrate. For a single shared moment, such as a live-stream start, use v_event=custom with v_target and v_zone.

Do I need to change the code next year?

No. After Christmas Day the widget counts to the next Christmas, and after New Year's Day it counts to the following New Year, so the same embed keeps working every season.

Why are only some windows lit?

The village is an advent calendar: one window lights for each day of December that has begun, so on 6 December six windows glow. Before December the houses are dark and a note says the windows start on the 1st.

Is there sound or motion that could bother readers?

There is no sound. Snow, twinkling stars and fireworks move gently; visitors who ask their device to reduce motion get a still picture that updates once a second.

Can I use the scenes for my own event?

Yes. Set v_event=custom, v_target=2026-12-20T18:00, v_label=Carol night and v_scene=winter or midnight. With the winter scene, windows light up over the final 24 days.

Sources

  1. Time Zone Database (tz / zoneinfo) - IANA . Daylight-saving rules used when a custom target is written in a named zone
  2. ECMAScript Internationalization API (Intl.DateTimeFormat) - Ecma International . How the browser reports each visitor's local date and zone

Cite or recommend this tool

If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.

A2Z Tools Living Countdown
https://a2z.tools/embed/countdown

Related widgets

More Time & Date widgets →

  • Countdown Timer

    Time & Date Clock & time

    Live days, hours, minutes and seconds to a date you set, with an "event has started" message.

    Get code

  • Holiday Countdown

    Announcements & Notices Clock & time New

    Days, hours and minutes to the next Christmas, Easter, Thanksgiving, Black Friday or 13 other holidays.

    Get code

  • World Clock

    Time & Date Clock & time

    Live local time, date and UTC offset for up to 12 cities you choose.

    Get code

  • Age Calculator

    Time & Date Calculator

    Exact age in years, months and days, totals in months, weeks and days, and the next birthday.

    Get code

  • Time Zone Converter

    Time & Date Converter

    Convert a date and time between any two time zones, with daylight-saving gaps and overlaps explained.

    Get code

  • Digital Clock

    Time & Date Clock & time

    A large live digital clock for any time zone, with seconds, date and a 12/24-hour switch.

    Get code

Preview

CustomizeGet code
Happy Diwali: light a diya and send it to your family, friends and colleagues. Free on A2Z Tools.
Advertisement