All studies67 / 74
Text
Text morph
A service title morphs into the next one: letters the two words share glide to their new place while the rest leave and arrive.
Where it earns its place
A hero or services header that rotates through what the studio does, where a crossfade would feel cheap and a typewriter would feel dated.
What we changed
- Built a service switcher around it: real service titles and copy, pill controls with aria-pressed, and autoplay that stops the moment someone chooses.
- Letters use position-only layout animation and the wrapper does not scale, so glyphs never stretch while the word changes width.
- Arrivals wait for the glide with a capped stagger and a short 4px blur-in; exits are quick and slightly upward so the eye follows the new word.
- Dropped the word mode and the polymorphic tag prop; reduced motion swaps the title as plain text.
- Kept the key idea: tokens keyed by glyph and occurrence, so shared letters keep their identity across words.