Regenerate Swap
The old answer dissolves upward while the new one rises into the space it left.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Regenerate Swap
*
* Asking for another answer: the old one dissolves upward while the new
* one rises into the space it just left, so the reader can see that aAbout this pattern
Regenerating produces two texts that look alike, and without motion the reader cannot tell whether anything actually changed. Directional exchange fixes that: the previous answer leaves upward on a short ease-in while the replacement rises from below on a tightly damped spring, so the swap is legible as a swap. Both occupy the same grid cell, which keeps the page from reflowing mid-crossfade, and the outgoing text clears faster than the incoming text lands so the two are never both half-visible for long.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- AI assistant
Regenerating a reply exchanges the previous text in place, with a counter for which version is shown.
Related patterns
- Translate CrossfadeCopy hands over to its translation while the block eases to the new text's height.
- Retry Backoff CountdownA ring empties over the wait while the seconds count down to the next automatic attempt.
- Sentiment Tint ShiftEach row's edge and wash ease from neutral toward the tone the classifier detected.