Overview
Keep the outside letters fixed while the middle pair trade places on opposing arcs. A small counter-move prepares each swap; a restrained overshoot settles the new word.
Build
- 01
Place FORM in four fixed slots. Keep F and M still throughout.
- 02
Hold for 900ms, then move O and R slightly away from their destinations over 300ms.
- 03
Move the letters onto separate upper and lower arcs, trading horizontal slots over 1.08s.
- 04
Settle a small overshoot over 300ms, then hold FROM for 1.32s.
- 05
Reverse the swap with a shorter 840ms travel, settle, and hold FORM through the loop seam.
Example source React / TSX
examples/word-split-title-reveal.tsx · Uses the catalog’s shared composition helpers.
Loading source…