Shimmer Sweep

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

  el.classList.add('k-shimmer')
  const easing = 'linear'
  const anim = el.animate([{ backgroundPosition: '150% 0' }, { backgroundPosition: '-50% 0' }], {
    duration: 2 * 1000,
    delay: 0 * 1000,
    easing,
    iterations: Infinity,
  })
  return () => {
    anim.cancel()
    el.classList.remove('k-shimmer')
  }
}

/* CSS */
.k-shimmer {
  background-image: linear-gradient(100deg, var(--text) 40%, var(--accent) 50%, var(--text) 60%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}