Read More Expand
A truncated post opens to full height while the fade that hid the cut-off line lifts with it.
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, useId, useState } from "react";
import {
AnimatePresence,
animate,
motion,
useMotionTemplate,
useMotionValue,
useReducedMotion,About this pattern
Truncation is a promise that there is more, and expanding should look like uncovering rather than like fetching. The paragraph is laid out at its final size from the first frame and simply revealed as the height opens on a short eased tween — never a spring, since a container that overshoots its own text flashes a clipped line at the bottom. The fade over the cut-off line is a mask on the text itself rather than an opaque gradient panel, which means it needs no knowledge of the page color and cannot fall out of step with a theme; lifting it is one value moving from "fades early" to "no fade at all", animated alongside the height. Collapsing runs the same two values backwards, and the button's wording swaps inside a fixed-width slot so nothing beside it shifts.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Document page
A clipped passage grows to its full height and the fade at its foot lifts.
Related patterns
- Comment Thread ExpandReplies unfold beneath a comment while the indent guide draws down beside them.
- Accordion ExpandOne section opens as the previous one closes, both heights easing over the same beat so the list never jumps.
- Feed Refresh InsertPosts land above the fold and the line being read never moves — only a counter admits they arrived.