mask-wipe-through-letters

name	mask-wipe-through-letters
description	motion-graphic primitive — use a letterform (or any SVG glyph) as the alpha mask for content rendered behind. the letter's outline becomes the cutout through which the underlying photo / gradient / mockup is visible. distinct from generic mask-wipe (linear sweep).

mask-wipe-through-letters

Purpose

Render a word or letter whose interior shows content (photography, gradient, video, mockups) behind it. The text outline is the alpha mask. Used in editorial spots ("CARBON" with a forest photo visible inside the letterforms) and product-demo spots (a brand mark whose interior shows the product UI).

Params

{
  "mask_text": "CARBON",
  "mask_text_font_family": "Inter",
  "mask_text_font_weight": 900,
  "mask_text_font_size_px": 280,
  "mask_text_letter_spacing": "-0.04em",

  "content_behind": {
    "kind": "photograph | gradient | video | solid",
    "src": "assets/forest.jpg",
    "fit": "cover",                       // cover | contain | full-bleed
    "scale": 1.0
  },

  "background_outside_mask": "#1A1A1A",   // what shows around the masked letters
  "stroke_outline": false,                 // no border on the letterforms
  "stroke_color": null
}

Behaviour

Implementation: use CSS background-clip: text with color: transparent, OR use SVG <mask> with the text as the mask source.

.mask-text {
  font-family: Inter;
  font-weight: 900;
  font-size: 280px;
  background-image: url('forest.jpg');
  background-size: cover;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Combine with animation: the text can pop-in, the content-behind can pan or zoom.

Style pack overrides

• SP-C (editorial-cinematic) — primary use case. "CARBON" with photography behind.
• SP-F (product-demo) — brand name with aurora behind.
• Other packs: rare.

Quality Checks

• No text outline (no stroke) — the entire visual mass is the masked fill.
• Content behind is sized so it's fully visible through all letters (no white slivers).
• Letter spacing matches pack's display spacing.

Failure Modes

• Letter outline visible. CSS color isn't transparent. Set color: transparent.
• Content behind clips at letter edge. Background-size is too small; set to cover.
• Mask doesn't render in Safari. Add -webkit-background-clip: text prefix.