glyph-substitution

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",   // 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+).