Line Shadow Text

`<pura-line-shadow-text>` renders display text with a hard offset shadow made of diagonal stripes that slide behind the characters in a continuous loop, an editorial, brutalist look. The shadow is an aria-hidden duplicate of the text painted with a diagonal gradient tile clipped to the glyphs (`background-clip: text`); only `background-position` animates, so no per-frame JS runs. Set the `text` attribute so the striped shadow paints on SSR; otherwise the client mirrors the slotted text. `shadow-color` sets the stripe color, `speed` the loop duration, and the `--pura-line-shadow-text-*` tokens tune offset and stripe size. Reduced motion keeps the stripes as a static hard shadow. Each instance registers in `window.__puraLineShadowTexts` by `data-pura-id`.

Preview

<!-- striped hard shadow behind a display word; `text` makes the shadow paint on SSR -->
<h1 style="font-size: 4rem; font-weight: 800;">
  Ship <pura-line-shadow-text text="today">today</pura-line-shadow-text>
</h1>

<!-- custom stripe color and faster loop -->
<pura-line-shadow-text text="BRUTAL" shadow-color="#f43f5e" speed="12" style="font-size: 3.5rem; font-weight: 900; text-transform: uppercase;">BRUTAL</pura-line-shadow-text>

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

import "./pura/lib/line-shadow-text.js";