Video Text

`<pura-video-text>` is the Magic UI "Video Text" move: giant typography whose fill is a playing video. An inline SVG `<text>` built from the `text` attribute is applied as a CSS `mask-image` over the slotted `<video>`, so the glyphs act as a window onto the footage. The mask is generated in the pure template, which makes the initial paint SSR-safe with zero JS; the only motion is the video itself. `font-size`, `font-weight` and `font-family` shape the mask glyphs; `--pura-video-text-bg` colors the area outside them and `--pura-video-text-fit` controls how the media fills the box. The glyphs are CSS, not content, so a visually hidden span carries the text for assistive tech and the video is decorative. Without a `text` attribute (SSR included) the media renders full bleed. Reduced motion pauses the slotted video, leaving a static masked frame. Each instance registers in `window.__puraVideoTexts` by `data-pura-id` with `{ text }`.

Preview

<!-- hero: glyphs filled with looping footage -->
<pura-video-text text="OCEAN" style="height: 60vh;">
  <video src="/media/waves.mp4" autoplay muted loop playsinline></video>
</pura-video-text>

<!-- custom type and a solid backdrop outside the glyphs -->
<pura-video-text text="PURA" font-size="14em" font-weight="800"
  font-family="Georgia, serif"
  style="height: 320px; --pura-video-text-bg: #18181b; --pura-video-text-fit: cover;">
  <video src="/media/city.mp4" autoplay muted loop playsinline></video>
</pura-video-text>

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

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