Video-Clipped-to-Type Mask Hero

What this builds

A full-viewport hero section where a background video is visible only through the cutout shapes of large headline text, with the surrounding area filled by a solid color or secondary background. The text acts as a window into the video.

• Large display type (1-4 words) masks a looping background video
• CSS background-clip: text as the primary technique with mix-blend-mode fallback
• SVG <clipPath> + <text> as the robust cross-browser fallback
• Canvas-based mask as the final fallback for maximum control
• Autoplay muted inline video with poster image for load state
• Responsive text sizing via clamp() that maintains the mask effect across viewports
• Static poster-through-text fallback for reduced-motion and mobile data saver