Text Morph

Build a word that morphs into another word, letter by letter, in place. Pick two words of the SAME length that share some letters (MOTION and MOMENT is a good pair). Shared letters are what make it a morph rather than a replacement. Structure: one span per letter SLOT, each a fixed 0.68em wide with overflow hidden and a height of about 1.15em. Fixed slots are not a detail: let the width follow the glyph and every swap nudges its neighbours, so the whole word twitches while it changes. The motion: walk an index from 0 to length, 130ms per step. At each step, the letter at that index swaps from the source glyph to the target glyph, rolling UP through its slot (y from +0.6em to 0 entering, 0 to -0.6em leaving, 220ms, ease [0.4, 0, 0.2, 1]). Three rules decide whether this reads: 1. SWAP IN PLACE, never cross-fade the whole word. A cross-fade gives you a moment where neither word is readable, and that moment is where the effect dies. 2. Reading order, left to right. Random order looks like corruption; simultaneous looks like a cut. The wave travelling in reading order is what makes it feel like a word being rewritten. 3. Colour ONLY the letters that actually changed. Letters that survive the morph stay in your ink token; changed ones land in accent. Without this, nobody can tell what moved. Make it reversible: clicking morphs back. A one-way effect strands the visitor in a state they cannot undo, and half the pleasure is watching it return. Keep every timeout in a ref array and clear them all in cleanup. This component creates one timer per letter and will leak on unmount otherwise. Accessibility: name BOTH words in the button's aria-label. Mid-morph the DOM holds a nonsense word, so the accessible name must never depend on reading the live text. Under prefers-reduced-motion, run no timers at all and render the target word directly. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.