Cinematic Masked Video Hero

This is a Cinematic Masked Video Hero. It layers solid and outlined typography over an SVG-clipped video element to create optical depth. Its function is to immediately capture attention on landing, breaking away from standard rectangular layouts through organic polygon masking and staggered motion.

Specs

• Weight: ~85 KB (Dependencies: GSAP Core).
• Performance: GPU-accelerated transforms and clip-paths handle the heavy lifting. The static noise overlay uses a lightweight tiled PNG to save CPU cycles. [!] The rapid font-family switching in the intro may cause layout thrashing on lower-end devices.
• Theming: Font scales and layout dimensions are strictly controlled via CSS custom variables (:root).
• Responsiveness: Highly fluid. Relies exclusively on viewport units (vw, vh) to scale typography and clip paths proportionally across screens.

Anatomy

• HTML: A structural stack. The .clip container holds a background video, an inline SVG <clipPath> definition, and duplicated foreground text elements (h1 and .h1__stroke).
• CSS: Controls spatial positioning and visual layering. It uses -webkit-text-stroke to create the transparent ghost text that overlays the masked video element.
• JS: The nervous system. GSAP orchestrates the preloader sequence, dynamically splits DOM text nodes into <span> elements for individual letter staggering, and maps viewport coordinates to the custom cursor.

Logic

The illusion of text wrapping behind and in front of the video relies on a simple yet effective Z-index manipulation technique rather than complex WebGL.

<h1 class="flex">Build your board</h1>
<!-- Video <figure> element sits here in the Z-axis (z-index: 2) -->
<div class="h1__stroke flex">Build your board</div>

By placing the solid h1 at z-index: 1, the SVG-masked <figure> video at z-index: 2, and the transparent outlined .h1__stroke at z-index: 3, the code achieves instant 3D depth. The text and stroke perfectly overlap, allowing the video to slice between them.

Feel

Tactile and cinematic. The staggered text arrival is precise. The custom cursor tracking adds physical weight to mouse movements, while the static film noise binds the crisp vector typography and raster video together, creating a unified, raw aesthetic.