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.
```css
.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: textprefix.