Letters are glyphs too.

Animating a word from light to bold sounds easy until you try it. Most fonts ship a few fixed weights and nothing in between, so all Flutter can do is crossfade: the light word fades out as the bold one fades in, and halfway through you see both, stacked and ghosting. Change the font, or the word itself, and it gets worse. We hit it in REDACTED, an upcoming app we’re crafting, where a name flies from a light title to a bold one.

So we built morphtext, a Flutter package that morphs the letters themselves instead of fading between two copies. It reads each letter’s real shape from the font file at both ends and turns one into the other, curve into curve, so the frames in between are weights the font never shipped. At rest it’s ordinary text, exactly what Flutter’s Text draws.

Once letters are outlines, nothing has to stay the same. A serif word melts into a sans one. Amethyst becomes Citrine, each letter turning into the one at its place, the leftovers shrinking away. And since an icon is just a glyph in an icon font, Send can flow into a tick.

Standing on morphnext

morphnext by KickNext morphs icons: it reads glyphs out of icon fonts and pairs their contours, so a menu turns into a close button without anyone drawing the in-between. Letters are glyphs too. Its docs never mention text, but the engine underneath doesn’t care.

morphtext is the text layer on top. Flutter lays the word out at both ends (pen positions, kerning, baseline), morphnext reads each letter’s outline and plans the morph, and morphtext carries every letter from its place in one layout to its place in the other, then hands back to real text.

// A word that springs to each new word, weight or font.
AnimatedMorphText(stone, style: loud ? sans : serif)

// A label that flows into a tick.
AnimatedMorph(
  sent
      ? const MorphContent.icon(Icons.check_rounded)
      : const MorphContent.text('Send', style: label),
)

// Or drive it yourself, along any curve.
MorphText('Rose Quartz', from: light, to: bold, progress: animation)

It moves the way morphnext does: its snappy spring by default, any spring you like, or a curve and a duration if you’d rather have timing.

Landing on real text

The hard part wasn’t the morph. It was the last frame. The word has to end as real text, and real text is hinted: on the web it draws a touch thinner than its own outline, with its baseline snapped to the pixel. Swap from outline to text and the eye catches it, a little settle after the word has stopped.

So the outline now snaps to the same pixel baseline Skia gives text, carries the same weight, and the text fades in over the last tenth of the motion, while the word is still moving. By the time it lands, it’s already text. How much of the end that fade spans is a knob, handoff, because we can’t promise our tenth is everyone’s.

“

By the time it lands, it's already text.

— anya

And a nod

When morphnext launched, its morphing icons reminded people of the Love, Death & Robots title card: three glyphs glitching through their variants before landing. Fair. So we made one. The heart and the robot stay. The X retires for a delta, the sign for change: Love, Morph, Robot.

• +MorphText and AnimatedMorphText: any two styles, any two words, letter by letter
• +Font to font: serif into sans into script, any two bundled faces
• +Text into icons, icons into text, from any bundled icon font
• +morphnext's springs by default; curves if you want timing; progress as an Animation, like MorphIcon
• +Plain text at rest, with the handover hidden in the motion
• ~Pinned to morphnext 0.6.1: it uses the engine's internals for now
• ~Fonts must be bundled: the outlines come from the files
• !Ligatures and contextual scripts don't morph faithfully yet

Where it’s at

It’s MIT and it’s on pub.dev under the drei.gg publisher: flutter pub add morphtext. Play with it at morphtext.drei.gg, read it at github.com/drei-gg/morphtext.

The pin is the loose end. morphtext reaches into morphnext’s internals today, so it pins the exact version. We’ve sent KickNext a small public API for reading glyphs and planning morphs. If it lands, the pin becomes a range and morphtext becomes a proper companion.