Vertical Ticker

export function verticalTicker(el) {
  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return () => {}

  const text = el.textContent ?? ''
  el.setAttribute('aria-label', text)
  el.textContent = ''
  el.style.overflow = 'hidden'
  const track = document.createElement('span')
  track.className = 'k-vticker-track'
  ;[0, 1].forEach(() => {
    const seg = document.createElement('span')
    seg.textContent = text
    seg.className = 'k-vticker-seg'
    seg.setAttribute('aria-hidden', 'true')
    track.append(seg)
  })
  el.append(track)
  const easing = 'linear'
  const anim = track.animate([{ transform: 'translateY(0%)' }, { transform: 'translateY(-50%)' }], {
    duration: 3 * 1000,
    easing,
    iterations: Infinity,
  })
  return () => {
    anim.cancel()
    el.textContent = text
    el.style.overflow = ''
  }
}

/* CSS */
.k-vticker-track {
  display: flex;
  flex-direction: column;
}

.k-vticker-seg {
  padding-block-end: 0.4em;
}