Text Mask Media Reveal
Type used as a mask so imagery moves inside the letterforms.
- Category
- Text Effects
- Added
- 2026-09-20
- Deps
- none
- Updated
- 2026-09-20
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
MOTION
Media clipped to type
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
// ---------------------------------------------------------------
}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.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Extruded Type Tilt
text effectsDisplay type with a solid extrusion that swings around as the pointer moves.
Scramble Text
text effectsText that decodes from random characters into its real word on hover.
Glitch Text Hover
text effectsAn RGB-split, jittery glitch effect on text when you hover it.