Translate Crossfade
Copy hands over to its translation while the block eases to the new text's height.
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 { useLayoutEffect, useRef, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Translate Crossfade
*
* Switching a block of copy to another language. The old wording fades
* out, the new fades in slightly behind it, and the block's height easesAbout this pattern
Switching a passage to another language without the page jolting. The outgoing wording clears, the incoming rises into the space it left, and the block's height eases to whatever the new text actually needs — the same sentence is a different length in every language, so the size change is real and worth animating. The active paragraph stays in the document flow so its natural height can always be measured before paint, which means the swap never shows a wrong height for a frame. Text fades and travels a few pixels; it never scales.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- AI assistant
The output pane resizes to the translated length instead of snapping.
Related patterns
- Regenerate SwapThe old answer dissolves upward while the new one rises into the space it left.
- AI Result RevealThe result card rises into place while its confidence value counts up to the final number.
- Sentiment Tint ShiftEach row's edge and wash ease from neutral toward the tone the classifier detected.