https://echai.ventures/assets/flip-8bc6caed.js

1// A live countdown's figures turn over the way a station board's do: when
2// its words change, each figure that changed drops into place and the rest
3// stand still (delight.css, "A countdown turns over"). Only figures are
4// wrapped, so a word or a space never sits in a box of its own. Nothing
5// moves for a reader who asks for less motion, or when the caller says the
6// change is not worth a look (the first render, a second ticking by).
7const calm = matchMedia("(prefers-reduced-motion: reduce)")
8
9export function flip(element, text, { quietly = false } = {}) {
10  const was = element.textContent
11  if (text === was) return
12
13  if (quietly || calm.matches) {
14    element.textContent = text
15  } else {
16    element.replaceChildren(...Array.from(text, (character, index) =>
17      /\d/.test(character) && character !== was[index] ? figure(character) : character))
18  }
19}
20
21function figure(character) {
22  const span = document.createElement("span")
23  span.className = "ec-flip"
24  span.textContent = character
25  return span
26}