Hero made by @ybouane.

@crazygl/hero-text-video-mask

A wordmark rendered as a window into a looping video (or a still photograph), with the rest of the canvas filled by a solid backdrop colour. The text IS the visible footage.

Demo

Text Video Mask

Install

npm install @crazygl/hero-text-video-mask

Usage

import TextVideoMask from '@crazygl/hero-text-video-mask';

export default function Page() {
  return (
    <TextVideoMask
      heading="VIDEO"
      media="/videos/launch-reel.mp4"
      bgColor="#000000"
      fontSize={320}
    />
  );
}

Customise

• Content — heading (the masked word), subheading, ctaLabel, onCTAClick.
• Media — media (MP4/WebM/MOV video or JPG/PNG/WebP/AVIF still), autoplay, loop, muted.
• Typography — textAlign, fontSize, letterSpacing, headingFontFamily, headingFontWeight.
• Backdrop — bgColor, textColor (solid fallback when no media).

Best for

• Brand films, agency reels, and tour/music announcements
• Fashion, sports, and lifestyle launches where footage is the mood
• Immersive product launches with a bold one-word headline

This hero is part of CrazyGL, a collection of production-ready WebGL, canvas, 3D, and typography effects. Every CrazyGL hero ships with an agent-ready SKILL.md file that helps developers and coding agents adapt the effect into custom landing pages and interactive experiences.