Purpose
Insert a custom shape into a typographic flow where a character would normally be. The shape inherits the line's baseline + cap-height, so it reads as part of the word, not as a separate decoration.
Params
{
"host_word": "Sexual wellness",
"substitution_position": "space-before-wellness", // or character index
"substitution_kind": "capsule | logo-glyph | icon",
"substitution_size_x_em": 1.2, // width in em-units of host font
"substitution_size_y_em": 0.6,
"substitution_fill": "#3B6FF5",
"substitution_rotation_deg": 0,
"appear_easing": "spring(damping=14, stiffness=200, mass=0.6)", "appear_delay_frames": 12 // appears AFTER the word lands }
## Behaviour
1. Render the host word with a placeholder for the substitution.
2. Render the substitution as an inline-block element matching the placeholder's bbox.
3. Animate the substitution's scale or rotation on entry; the word's other characters don't animate.
## Style pack overrides
- **Custom packs (wellness, pharma, AI/SaaS)** — primary use case.
- Default 7 packs: occasional use, especially SP-F (logo-as-"o" in "You").
## Quality Checks
- Substitution aligns with host text's baseline.
- Substitution height ≤ cap-height of the host font.
- Substitution renders on top of underlying bg, not below.
## Failure Modes
- **Substitution floats above/below baseline.** Use `vertical-align: baseline` and match cap-height.
- **Substitution overflows line height.** Reduce size_y_em.
- **Substitution pops too aggressively.** Use softer easing (damping 18+).