CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/text-video-mask

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.

ReactImageFont#video-mask#typography#text-clip#svg-mask#headline

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
01 · Install the package

One command, zero config.

npm install @crazygl/hero-text-video-mask
02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

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

export default function Landing() {
  return (
    <TextVideoMask />
  );
}
03 · Use it in a page

SSR-safe by default.

The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.

page.tsx
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

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

export default function Page() {
  return (
    <section>
      <TextVideoMask
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}
You might also like

Similar heroes

Blend Text

A heading with CSS mix-blend-mode applied so it changes appearance against whatever sits behind it — picks the inverse colour of the backdrop pixel, like ink on a poster.

Highlight Text

A heading with marker-highlighter strokes drawn behind specific words — like a printed page someone marked up. Words wrapped in *asterisks* get highlighted with the accent colour.

Image Masked Text

A heading whose letterforms are filled with a photograph. Uses native CSS background-clip:text so the wordmark stays selectable and crisp at any zoom, with cover, contain, or custom-percent fit modes.

Text Cycler

A wordmark that cycles between several words or phrases, each one entering with a character-, word-, or line-staggered fade — pick the stagger order from first / last / center / random.

Rotating Headline

A static two-line headline with one slot that rotates through a list of words — the prefix and suffix stay put, the rotating word cycles.

Rolling Text

Each character rolls through a vertical stack of duplicate copies of itself in a continuous loop, with a blur pulse mid-roll and a per-character stagger.Live customizer

Text Video Mask

Video or imageThe footage that fills the letterforms. MP4 / WebM / MOV play as a looping muted video; JPG / PNG / WebP / AVIF show as a still. Cover-fit so the letterforms always read.Autoplay videoAuto-play the video when it loads. Required for muted-loop heroes.Loop videoLoop the video once it ends.Mute videoMute the audio track. Browsers usually require this for autoplay.AlignmentHorizontal alignment of the masked wordmark.Font size280pxWordmark font size. Bigger letters reveal more footage per character.Letter spacing-0.02emTracking. Negative pulls letters together so the strokes thicken (more footage area).Heading fontFamily. Ultra-heavy display sans serifs (Inter 900, Black Ops One, Anton, Bebas Neue, Bricolage Grotesque) work best — thin fonts leave too little area for the footage.Heading weight900Weight. 800–900 gives the most surface area for the footage.Background colourColour of everything that ISN'T the masked text. Deep black is the canonical look; coloured backdrops read as poster-print.Fallback text colourColour the heading uses if the media field is empty (no footage to mask). The text simply renders as a solid headline in that case.CrazyGL · crazygl.comProgrammable hero sections for real websites.