| name | glyph-substitution |
| description | motion-graphic primitive — a brand-coded shape (capsule, pill, icon) briefly replaces a space character or letterform inside a headline. signals brand identity through type rhythm. used in pharma / wellness spots (capsule shape between words) and AI/SaaS spots (logo glyph as the "o" in "You"). |
glyph-substitution
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",
"substitution_kind": "capsule | logo-glyph | icon",
"substitution_size_x_em": 1.2,
"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
}
Behaviour
- Render the host word with a placeholder for the substitution.
- Render the substitution as an inline-block element matching the placeholder's bbox.
- 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+).
