Overlap Only When the Slot Holds Still
MUST: Pick the swap mode from whether the slot holds still, not from habit. Opacity/blur replacement in a fixed slot: crossfade with 100–300ms overlap. Anything that travels, pushes, or restacks layout: exit fully, then a 70–220ms micro-delay before enter — overlapping two moving phrases sends them through the same space on opposite vectors and reads as a glitch.
Crossfade a swap that replaces text in a fixed slot; run exit fully before enter when the effect travels, or the two phrases cross in mid-air
// stable slot (opacity/blur only) — overlap
const enterDelay = exitMs - 220;
// travelling / pushing layout — exit, then a beat
const enterDelay = exitMs + 70;Bad
Good
Why it matters
This is the boundary of animations-text-swap-overlap, and without it that rule gets over-applied. Read which of the catalog's specs set `overlap_ms: 0` and the pattern is exact: every effect that MOVES layout runs sequential — the kinetic builds that push a line sideways, the letter staircases that travel 46px, the line-by-line slide that carries a whole line 48px across.
Four separate specs give the same reason in the same words: to avoid content intersections. Overlap is safe when both phrases are pinned in one slot and the only things changing are opacity and blur, because the layers sit exactly on top of each other and read as a single dissolve. The moment either phrase is travelling, the overlap window sends two moving strings through the same space on different vectors, and the eye cannot assign a glyph to a word — it reads as a glitch, which is worse than the hard cut you were avoiding.
So the test is not "is this a swap" but "does the slot hold still": stable slot means crossfade with 100–300ms of overlap; moving layout means exit fully, then spend the budget on a micro-delay instead (70–220ms across the build effects) so the replacement still reads as a beat rather than a cut. Under `prefers-reduced-motion` both collapse to the same instant replacement.