Polish & Effects · Small finishing touches
Text morph文字形变
- refined
- surprising
- brief
When one word replaces another, the old one rises and fades out while the new one comes up from below, as if the word changed shape.
When to use it
Use it for rotating words in a heading or for switching a status label; do not use it on paragraph text, which becomes unreadable.
Parameters
transform: translateY 100%→0 alternating · per word 260ms · cubic-bezier(0.22, 1, 0.36, 1) · alternating offset 60ms
Recipe
per word 260msText morph → translateY 100% → 0 @ 260ms cubic-bezier(0.22, 1, 0.36, 1)alternating offset 60ms
One sentence for your AI
Build a text morph: the old word moves up and fades out while the new one rises from below, 260ms per word, cubic-bezier(0.22, 1, 0.36, 1), offset by 60ms.