Liquid Text Morph

Cycles a list of words, melting each one into the next.

import { LiquidTextMorph } from "@/remotion/primitives/liquid-text-morph";

<LiquidTextMorph
  words={["Melt", "Merge", "Reform"]}
  holdInFrames={12}
  morphInFrames={22}
/>

Goo, not path interpolation

Both words are drawn at once inside an SVG blur-plus-alpha-threshold, so letterforms that come near each other fuse into one blob and split apart again. Real glyph outline interpolation needs matched node counts between two arbitrary letters — A and s do not have them — and produces tearing where this produces surface tension. Use shape-morph when the two shapes are paths you control.

gooStrength is the blur in em and gooContrast is the alpha threshold on top of it. Raising the blur past about 0.1 fuses the whole line into one mass.

The overlap is a third of the morph, not all of it

The outgoing word plays its own entrance backwards on a clock that runs 1.5× fast, and the incoming word does not start until the melt is 30% through. Running both across the whole morph leaves two complete words stacked at the midpoint and the threshold turns them into an unreadable puddle.

Timing

One cycle is holdInFrames + morphInFrames. loop is on by default and the last word morphs back into the first; turn it off and the final word is held. Both words run through split-text-chars with a frame override, so the stagger semantics are the same as everywhere else — it is fitted to the longest word so a wide stagger cannot leave the last letter half-formed when the hold begins.