Shimmer text

<h2 class="shimmer">Ship something today</h2>

.shimmer {
  margin: 0;
  font: 800 clamp(30px, 8vw, 46px)/1.1 system-ui, sans-serif;
  letter-spacing: -0.04em;
  text-align: center;
  /* A wide gradient: the text color, a bright band, then the text color again.
     background-clip: text paints it only inside the letters. */
  background: linear-gradient(110deg, var(--fg) 35%, var(--brand) 45%, #c4dcff 50%, var(--brand) 55%, var(--fg) 65%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sweep 3.2s ease-in-out infinite;
}

/* Slide the gradient from right to left, so the bright band crosses the text. */
@keyframes sweep {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

/* Reduced motion: a slow, occasional sweep instead of a constant one. */
@media (prefers-reduced-motion: reduce) {
  .shimmer { animation-duration: 9s; }
}

// No JavaScript needed. The effect is a moving gradient clipped to the text.