Text Shimmer

`<pura-text-shimmer>` sweeps a bright band across the slotted text, in the style of Magic UI's Animated Shiny Text. The band is a moving gradient clipped to the glyphs with `background-clip: text`, driven by a pure CSS `@keyframes`, so it works server-rendered with no client JS and no animation runtime. Theme the resting color with `--pura-text-shimmer-base`, the band with `--pura-text-shimmer-highlight`, and the speed with `--pura-text-shimmer-duration`. Under reduced motion the sweep freezes and the text shows in the base color via the base reset. Slot plain text or color-inheriting elements. It registers in `window.__puraTextShimmers` by `data-pura-id` for agent enumeration.

Preview

<pura-text-shimmer>Shimmering headline</pura-text-shimmer>

<!-- Custom band color and speed -->
<pura-text-shimmer style="--pura-text-shimmer-highlight: #6366f1; --pura-text-shimmer-duration: 2s;">
  ✨ New
</pura-text-shimmer>

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/text-shimmer.js"></script>

import "./pura/lib/text-shimmer.js";