Countdown

1. Copy to Webflow

   Add Geist and Geist Mono to your site's fonts (Site settings, Fonts, Google Fonts) before pasting: Webflow removes any font your site has not installed.
   Copy to Webflow

2. Add custom CSS

   To keep things simple, the code ships inside the Webflow embed. You can also copy it here and add it yourself to the page or site custom code. How to choose

   The look of the preview is the countdown-* classes of the paste; the size of the figures is the font size of the box they are written in, a headline size for the box marked data-countdown-lead, a text size in a banner. The Embed draws the columns and swaps the two states, and reads three variables with a fallback, --countdown-quiet (the units), --countdown-unit-size (their size against the figure, the same by default) and --countdown-gap (the room between two units): set them on the count, or on anything above it, in a rule of your own. The preview centres the count; the figures are text in a box, so the alignment is the text alignment of that box, left, centred or right.

3. Add custom JS

   To keep things simple, the code ships inside the Webflow embed. You can also copy it here and add it yourself to the page or site custom code. How to choose

4. Use it on your own elements

   Custom attributes
   Select the element on the canvas and open the Settings panel. Under Custom attributes, add a pair: the name on the left, the value on the right.

   Custom attribute	What it does
   data-countdown	Marks the box of a count, and its value is the date, written once: an ISO 8601 date with its offset, 2026-10-30T17:00:00-04:00, the same instant for every visitor. A date without offset is read on the clocks of data-countdown-zone. A time that really comes back is written 17:00, every day, or Fri 17:00, every week, with the zone. The settings below go on the same element.
   data-countdown-lead	On a box inside the count. It takes no value. The engine writes in it the largest unit still running, with its word: 4 days, then 23 hours on the last day, 59 seconds in the last minute. Its text is what shows before the script, and on the Designer canvas: write the date in it. [ Optional ]
   data-countdown-rest	On a box inside the count. It takes no value. The engine writes in it the units under the one written large, in one line. [ Optional ]
   data-countdown-time	On a box inside the count. It takes no value. The engine writes every unit in it, in one line. With no box marked lead, rest or time, the box of the count itself is that line: a span in a sentence is enough. [ Optional ]
   data-countdown-local	On a text inside the count. It takes no value. The engine rewrites it as the date in the visitor's own time zone and language. Its text is what shows without the script: write the date and its zone in it. [ Optional ]
   data-countdown-before	On a block inside the count that leaves at zero. It takes no value. Put the boxes of the figures in it when there is a block for the end. [ Optional ]
   data-countdown-after	On a block inside the count that waits for zero and takes the place of the first one. It takes no value. A page opened after the date shows it at once. On the Designer canvas, which runs no Embed, both blocks show, one under the other. [ Optional ]
   data-countdown-rehearse	On a link, for a preview. Its value is a number of seconds: a click plays the count from that many seconds left, the count the link is in, or every count of the page when it is outside. Empty, it goes back to the date. Take these links out of a real page. [ Optional ]
   data-countdown-state	Written by the engine on a mounted count: running, then done. data-countdown-ended is added when the end happened under the visitor's eyes, and data-countdown-ready once mounted. Never written by hand; the stylesheet reads them, and so can a rule of yours. [ Optional ]

   Settings
   Every setting is a custom attribute too, added the same way and on the same element. An attribute always wins over the defaults written in the code.

   Attribute	Default	What it is
   data-countdown-units	days hours minutes seconds	The units the count shows, largest first, parted by spaces. Options: any of days, hours, minutes, seconds. The largest one shown takes everything above it: without days, three days read 72 hours. The smallest one shown sets how often the figures change: without seconds, once a minute, and the count rounds up so it never shows zero before the end.
   data-countdown-labels	short	How a unit is written beside its figure, in the language of the page. Options: long (4 days, 6 hours), short (4 days, 6 hr, 12 min), narrow (4d 6h 12m). The box marked data-countdown-lead always takes the long word.
   data-countdown-zone	empty	The time zone of a date written without an offset, and of a time that comes back. Options: empty, for a date that carries its offset; or a name of the IANA list, America/New_York, Europe/Paris. Summer time is followed.
   data-countdown-locale	empty	The language the units are written in. Options: empty, the language of the page, read from the nearest lang attribute, then from the browser; or a tag, fr, de-CH, en-GB.
   data-countdown-done	empty	A word written where the figures were, at zero. Options: empty, and the figures stay at zero unless a block marked data-countdown-after takes their place; or a few words, Closed, We are open.
   data-countdown-roll	0.6	The time a column of seconds takes to turn, in seconds. Minutes take 1.25 times as long, hours 1.5, days 1.8.

Two files, no build step. It runs in the browser only. Load it with a script tag in plain HTML, in a client-side script in Astro, never in the frontmatter. In React, call Countdown.mount(ref.current) in useEffect and destroy() in its cleanup.

1. Tune it, either way

   Per element with an attribute, or once for the whole site by editing DEFAULTS at the top of the file.

   Attribute	Default	What it is	Lower	Higher
   data-countdown-units	days hours minutes seconds	The units the count shows, largest first, parted by spaces. Options: any of days, hours, minutes, seconds. The largest one shown takes everything above it: without days, three days read 72 hours. The smallest one shown sets how often the figures change: without seconds, once a minute, and the count rounds up so it never shows zero before the end.
   data-countdown-labels	short	How a unit is written beside its figure, in the language of the page. Options: long (4 days, 6 hours), short (4 days, 6 hr, 12 min), narrow (4d 6h 12m). The box marked data-countdown-lead always takes the long word.
   data-countdown-zone	empty	The time zone of a date written without an offset, and of a time that comes back. Options: empty, for a date that carries its offset; or a name of the IANA list, America/New_York, Europe/Paris. Summer time is followed.
   data-countdown-locale	empty	The language the units are written in. Options: empty, the language of the page, read from the nearest lang attribute, then from the browser; or a tag, fr, de-CH, en-GB.
   data-countdown-done	empty	A word written where the figures were, at zero. Options: empty, and the figures stay at zero unless a block marked data-countdown-after takes their place; or a few words, Closed, We are open.
   data-countdown-roll	0.6	The time a column of seconds takes to turn, in seconds. Minutes take 1.25 times as long, hours 1.5, days 1.8.	Snappier; 0 and the figures change with nothing turning	Slower and softer; the engine stops at 0.9, so a column has landed before the next second

2. Drive it from JavaScript

   When a script sets the date, reacts to the end, or adds counts after the page has loaded.
   JavaScript Expand Copy

   const element = document.querySelector('[data-countdown]');
   element.addEventListener('countdown:done', (e) => {
     console.log(e.detail);
   });
   
   // React to the end: unlock a button, load the new prices, reload.
   element.addEventListener('countdown:done', (event) => {
     console.log(event.detail.date, event.detail.live);   // live: it ended under the visitor's eyes
   });
   
   const count = Countdown.mount(element);     // the box auto() mounted, or a new one
   count.left();                               // milliseconds left, never below 0
   count.set('2026-11-27T09:00:00+01:00');     // another date: from an API, a cart, a quote
   count.rehearse(5);                          // plays the last five seconds, to check the end
   count.rehearse();                           // back to the date
   
   // When the count leaves the page:
   count.destroy();   // every box has its own text back, the date in clear

   Show all 18 lines

3. Fit it to your page

   The stylesheet goes in the head and the script before the end of the body. The smallest count is one element in a sentence:

   html <p>The sale ends in <span data-countdown="2026-10-30T17:00:00-04:00">October 30, 5 pm Eastern</span>.</p>

   The text of the element is what shows without the script, so write the date in it. The size of the figures is the font size of the box.

   For a hero, the largest unit written large, the others under it, and a block for the end:

   html <div data-countdown="2026-10-30T17:00:00-04:00" data-countdown-units="days hours minutes seconds"> <div data-countdown-before> <div data-countdown-lead>October 30</div> <div data-countdown-rest>5 pm Eastern</div> </div> <div data-countdown-after>The sale has ended.</div> <p data-countdown-local>Friday, October 30 at 5:00 pm Eastern</p> </div>

   The page hears the end, and each change of the figures:

   `js element.addEventListener('countdown:done', (event) => { console.log(event.detail.date, event.detail.live); // live: it ended under the visitor's eyes });

   const count = Countdown.mount(element); count.left(); // milliseconds left, never below 0 count.set('2026-11-27T09:00:00+01:00'); // another date: from an API, a cart, a quote `

   A deadline of the visitor's own. A hold on a cart, a quote valid 48 hours, a trial: the deadline is decided and kept by the server, which writes it in the attribute or hands it to set(). The engine has no "so many minutes from the first visit" mode on purpose: kept in the browser, such a count starts again in a private window, and a deadline that restarts is a false one. Showing a false deadline to press a sale is an unfair commercial practice in the European Union and in the United Kingdom, and the kind of dark pattern the FTC acts against. A time that comes back, 17:00 or Fri 17:00, is for what really comes back: the last collection of the day, the weekly truck.

4. Avoid the pitfalls

   • Write the offset. 2026-10-30T17:00:00-04:00, or Z for UTC. A date without offset and without data-countdown-zone is read as UTC, and the console says so. Never rely on the visitor's own clock for the zone.
   • A weekly or daily time needs its zone, America/New_York: the engine finds the next one, summer time included. At zero the count ends like any other; the next load, or refresh(), counts to the next one.
   • The marked boxes hold text only. The engine replaces what is in a box marked data-countdown-lead, -rest, -time or -local, and puts it back on destroy(). When the count has none of the first three, the whole box is the line: keep its other content outside.
   • **Put the figures in the block marked data-countdown-before** when there is a block for the end, so they leave together.
   • Tabular figures. The engine asks the font for them (font-variant-numeric: tabular-nums). A display face without them lets the line breathe by a pixel as digits change.
   • Colours and sizes are custom properties read with a fallback: --countdown-quiet for the units, --countdown-unit-size for their size against the figure (the same size by default, 0.2em sets a small unit beside a large figure), --countdown-gap for the room between two units.
   • Alignment is yours. The preview centres the count in the screen; that is its look, not the engine. The figures are text in a box: text-align on that box sets them left, centred or right. Every digit has the same width, so a centred line does not move as the seconds go by; when a column, a word or a unit leaves, its width closes over the time of its turn and the line recentres with it, never in one step.
   • Webflow CMS. In a Collection list or on a Collection page, the value of the custom attribute data-countdown can be bound to a field of the item. Bind it to a plain text field that holds the ISO date with its offset: text fields are what the binding is known to take. Whether the Designer offers a Date field there, and the format it would print, has not been verified; if it does, the engine reads what the browser's Date reads and takes it on the clocks of data-countdown-zone, to be checked on the published page.
   • **The links marked data-countdown-rehearse** belong to the preview, the row "Watch it pass" at the foot of the markup. The preview keeps it; on a page of your own, delete the row: nothing else reads it, and the counts go on as before.

One click on Copy the AI prompt copies everything an assistant needs to build this effect: the complete code, the markup, the dependency, every setting and every pitfall.