Shiny Text

---
/**
 * ShinyText — a highlight sweeps across the text on a loop, zero JS.
 *
 * The text is painted once in its own colour; a pseudo-element repeats it
 * with a moving gradient clipped to the glyphs on top. Only background-
 * position animates: no layout, but it is not composited either, so each
 * frame repaints the text's own box.
 */
import type { HTMLAttributes, HTMLTag } from 'astro/types';

interface Props extends HTMLAttributes<'span'> {
  /** The text. */
  text: string;
  /** Element to render. */
  as?: HTMLTag;
  /** Seconds per sweep, including the pause. */
  duration?: number;
  /** Highlight colour. */
  color?: string;
  /** Width of the highlight as a fraction of the text, 0–1. */
  width?: number;
}

const { text, as: Tag = 'span', duration = 3, color = 'var(--ma-shine)', width = 0.25, class: className, style, ...rest } = Astro.props;
const half = Math.max(0.05, Math.min(width, 0.6)) * 50;
// the caller's style joins the component's properties instead of replacing them (duration, colour and width were lost)
const vars = [`--ma-shiny-duration:${duration}s`, `--ma-shiny-color:${color}`, `--ma-shiny-a:${50 - half}%`, `--ma-shiny-b:${50 + half}%`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
---

<Tag class:list={['ma-shiny', className]} data-text={text} style={vars} {...rest}>{text}</Tag>

<style is:global>
  @layer components {
    :where(.ma-shiny) {
      position: relative;
      display: inline-block;
    }
    :where(.ma-shiny)::after {
      /* the copy is paint only: the alternative text after the slash is empty, so assistive tech reads the sentence
         once (generated content is part of an element's name). The first line is for engines without that syntax. */
      content: attr(data-text);
      content: attr(data-text) / '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      color: transparent;
      background: linear-gradient(110deg, transparent var(--ma-shiny-a, 37.5%), var(--ma-shiny-color, var(--ma-shine)) 50%, transparent var(--ma-shiny-b, 62.5%));
      background-size: 250% 100%;
      background-position: 120% 0;
      -webkit-background-clip: text;
      background-clip: text;
      animation: ma-shiny var(--ma-shiny-duration, 3s) var(--ma-ease-in-out) infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      :where(.ma-shiny)::after {
        animation: none;
        opacity: 0;
      }
    }
  }

  @keyframes ma-shiny {
    0% {
      background-position: 120% 0;
    }
    60%,
    100% {
      background-position: -20% 0;
    }
  }
</style>