Sparkles Text

`<pura-sparkles-text>` decorates its slotted text with tiny four-point stars that twinkle and are born and die around the letters, in the style of Magic UI's Sparkles Text. The stars are scattered deterministically in the pure template (no `Math.random`), so the server and client paint the same field and the effect needs no client JS. Each star is a CSS `@keyframes` twinkle (scale, opacity, rotate) with a per-index delay, so there is no animation runtime. Set `count` for density, `duration` for the twinkle cycle, and theme with `--pura-sparkles-text-color`, `--pura-sparkles-text-color-alt` and `--pura-sparkles-text-size`. The text stays untouched in the light DOM as the accessible copy; the sparkles are `aria-hidden` decoration. Under reduced motion the stars hold a soft static state instead of pulsing. Each instance registers in `window.__puraSparklesTexts` by `data-pura-id` for agent enumeration.

Preview

<!-- magical headline with default golden and purple stars -->
<pura-sparkles-text count="12">
  <h1>Launch week</h1>
</pura-sparkles-text>

<!-- brand colors, bigger stars, slower cycle -->
<pura-sparkles-text count="8" duration="2.4"
  style="--pura-sparkles-text-color: #38bdf8; --pura-sparkles-text-color-alt: #f472b6; --pura-sparkles-text-size: 0.8em;">
  <span>New: AI workflows</span>
</pura-sparkles-text>

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

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