Summary Condense
The dropped lines fade out from the bottom up, and only then does the card close the height they held.
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 { useEffect, useState } from "react";
import { motion, useReducedMotion, type Transition } from "motion/react";
/**
* Vibary · Summary Condense
*
* A long passage folding into its summary: the lines being dropped fade
* out from the bottom up first, and only then does the card close theAbout this pattern
Condensing a long passage is a destructive move — words the reader could see are about to be gone — so the order of the two beats is the whole design. The lines being dropped fade first, from the bottom up, while the card is still holding their height; only once they are invisible does the height ease shut and the summary settle into the space. Collapsing first and fading second reads as the card eating the words. Nothing scales: text that pops on the way out makes a summary look like a trick rather than a service.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- AI assistant
Selected passages fold into a shorter block written in their place.
Related patterns
- Model Switch MorphChoosing another model glides the selection across and eases the badge into that model's name and accent.
- Source Fan OutA tilted deck of reference cards fans apart to show what an answer was grounded in.
- Translate CrossfadeCopy hands over to its translation while the block eases to the new text's height.