Purpose
Treat a single character inside a word as an independent content slot. The rest of the word renders normally; the target letter's bounding box hosts either alternative glyph variants (italic vs roman vs different weights) or embedded visual content (icon, photo, video clip).
Params
{
"word": "MIE",
"target_letter_index": 1, // 0-indexed; the "I"
"content_variants": [
{ "kind": "glyph", "char": "I", "font_style": "italic" },
{ "kind": "image", "src": "assets/icon.svg" },
{ "kind": "color-fill", "color": "#FF7BB6" }
],
"swap_duration_frames": 12, // crossfade between variants
"swap_interval_frames": 30, // how long each variant holds before swap
"preserve_baseline": true // critical — letter must align with word baseline
}
Behaviour
- Render the word with the target letter REPLACED by a transparent placeholder spanning its bbox.
- Render the target letter's content in an absolutely-positioned
<div>matching the placeholder's bbox. - Animate content swaps via crossfade.
The target letter's bbox must be computed from the actual rendered glyph (use getBoundingClientRect() or pre-compute font metrics).
Style pack overrides
- SP-C (editorial-cinematic) — canonical use case.
- SP-F (product-demo) — for brand wordmark animations.
Quality Checks
- Target letter's bbox matches the original glyph's bbox (not a generic rectangle).
- Word baseline is preserved during swap (content doesn't shift other letters).
- Swap is crossfade, not pop (editorial restraint).
Failure Modes
- Other letters shift during swap. Placeholder isn't reserving the right bbox. Pre-measure the glyph.
- Swap is jarring. Use crossfade easing, not linear.
- Content overflows letter bbox. Constrain inner content by the bbox.