letter-substitution-handoff

name	letter-substitution-handoff
description	motion-graphic primitive — one letter inside a word becomes its own animated content slot, crossfading between glyph variants or hosting embedded imagery / icons. used for editorial wordmark moments like "M[I]E" where the I is a separate animated element.

letter-substitution-handoff

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

1. Render the word with the target letter REPLACED by a transparent placeholder spanning its bbox.
2. Render the target letter's content in an absolutely-positioned <div> matching the placeholder's bbox.
3. 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.