Video Text Mask

Create a video text mask. A giant one-word headline whose letters are windows: video (or animated color) plays inside the letterforms while everything outside stays the page background. Video implementation: a container with the <video> element (autoplay, muted, loop, playsinline) and an SVG or CSS mask: the simplest robust route is an SVG <text> element used as a mask over the video, or CSS mask-image with an SVG data URI of the word. Alternative without video: a heavily animated multi-stop gradient with -webkit-background-clip: text and background-position keyframes reads remarkably like footage at a fraction of the cost. Typography: this only works with very heavy, very large type (weight 800-900, size 15vw+, tight tracking); thin letters leave no window to see through. Details: always mute and loop the video, provide a poster frame, and pause it when off-screen (IntersectionObserver) to save battery. The word itself must also exist as real text for screen readers and SEO (visually-hidden if the masked version is decorative). Under prefers-reduced-motion, show a static frame or frozen gradient inside the letters. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.