simstudioai--sim/apps/sim/components/ui/shimmer-text.module.css

/**
 * Claude-style text shimmer: the text paints from a gradient with a light band
 * that sweeps across the glyphs via background-clip. This is the single source
 * of truth for the treatment — the ThinkingLoader label composes it. Under
 * reduced motion the sweep is replaced by a gentle opacity pulse in solid ink:
 * the shimmer conveys essential in-progress state, so it needs a vestibular-safe
 * fallback rather than none. Consumers whose resting text is not body ink set
 * `--shimmer-rest` to their resting color.
 */
.shimmer {
  background-image: linear-gradient(90deg, #4a4a4a 40%, #b0b0b0 50%, #4a4a4a 60%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer-sweep 2.2s linear infinite;
}

:global(.dark) .shimmer {
  background-image: linear-gradient(90deg, #b9b9b9 40%, #f8f8f8 50%, #b9b9b9 60%);
}

@keyframes shimmer-sweep {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shimmer,
  :global(.dark) .shimmer {
    background-image: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: var(--shimmer-rest, var(--text-body));
    animation: shimmer-pulse 2.2s ease-in-out infinite;
  }
}

@keyframes shimmer-pulse {
  50% {
    opacity: 0.55;
  }
}