Text Mask Media Reveal
Type used as a mask so imagery moves inside the letterforms.
DOM + CSS0 deps1 file · 2 KB TSX
Props
"use client";
export function TextMaskMediaReveal({
text,
src,
poster,
outline = true,
}: {
text: string;
/** Stroked copy behind the mask, so the word survives dark frames. */
outline?: boolean;
/** Video source. Muted, looping, playsInline — it is decoration. */
src: string;
poster?: string;
}) {
return (
<div className="relative inline-block">
{/* Outline copy behind, so the word keeps a silhouette over the dark
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this text effect
Type as a window onto footage is one of the oldest tricks in title design and one of the easiest to get wrong on the web. Two implementations are needed, because `background-clip: text` accepts an image but not a video: for stills, clip the background to the glyphs and animate its position, since a static image inside letterforms reads as a fill while movement reads as a window. For video, invert it — put the real element behind and lay a black-backgrounded, white-texted heading over it in `screen` blend mode, where black becomes transparent and white opaque, knocking the footage through the glyphs. The detail that separates a working version from a fragile one is the faint outline copy sitting behind: without it the headline disappears entirely whenever the media cuts to a dark frame, which is the most common failure of the effect in the wild. Two practical notes: the video must be muted and `playsInline` or iOS refuses to autoplay it, and slow-moving footage reads far better than fast cuts, which turn the counters into noise.
Curator’s note
Built for viberdy 2.1. The outline copy behind is not decoration — it is what stops the headline vanishing on dark frames.
