Split-flap display animation for a website

<div id="board" style="display:flex;gap:4px;font:700 40px/1 ui-monospace,monospace"></div>
<style>
  .cell { position: relative; width: 36px; height: 52px; background: #161616;
    color: #f2c14e; border-radius: 4px; display: grid; place-items: center;
    perspective: 200px; overflow: hidden }
  .cell::after { content: ''; position: absolute; left: 0; right: 0; top: 50%;
    height: 1px; background: #000 }
  .cell.flip { animation: fold 60ms ease-in }
  @keyframes fold { from { transform: rotateX(0) } 50% { transform: rotateX(-60deg);
    filter: brightness(.6) } to { transform: rotateX(0) } }
</style>
<script>
const DRUM = ' ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789:.-'
const still = matchMedia('(prefers-reduced-motion: reduce)').matches
const board = document.getElementById('board')
const WIDTH = 12
const cells = Array.from({ length: WIDTH }, () => {
  const el = document.createElement('div')
  el.className = 'cell'; el.textContent = ' '
  board.append(el)
  return { el, i: 0 }
})
function show(text) {
  const target = text.toUpperCase().padEnd(WIDTH).slice(0, WIDTH)
  cells.forEach((c, n) => {
    const goal = Math.max(0, DRUM.indexOf(target[n]))
    if (still) { c.i = goal; c.el.textContent = DRUM[goal]; return }
    const step = () => {
      if (c.i === goal) return
      c.i = (c.i + 1) % DRUM.length
      c.el.textContent = DRUM[c.i]
      c.el.classList.remove('flip'); void c.el.offsetWidth; c.el.classList.add('flip')
      setTimeout(step, 45)
    }
    setTimeout(step, n * 30)
  })
}
const words = ['DEPARTURES', 'NIGHT TRAIN', 'BOARD 22:10']
let k = 0
show(words[0])
setInterval(() => show(words[++k % words.length]), 4000)
</script>