Comment Thread Expand
Replies unfold beneath a comment while the indent guide draws down beside them.
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 · Comment Thread Expand
*
* Replies unfold beneath a comment. The container grows to its natural
* height, the indent guide draws down beside it, and the replies arriveAbout this pattern
Collapsed replies are a promise that opening them will not lose your place. The container grows to its natural height on a short eased tween, the indent guide draws downward from the parent avatar, and the replies arrive on a stagger just behind it — so the eye follows the guide to where the new content is instead of being handed a block that appeared from nowhere. Collapsing runs faster than expanding, because nobody needs to watch content leave.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Comment thread
A collapsed reply count opens in place with the indent rail beside it.
Related patterns
- Read More ExpandA truncated post opens to full height while the fade that hid the cut-off line lifts with it.
- Unread DividerA marker draws across the thread where you stopped reading, then fades without moving anything.
- Accordion ExpandOne section opens as the previous one closes, both heights easing over the same beat so the list never jumps.