Quote Post Nest
Quoting a post opens a slot in the composer and settles the post into it as an embedded card.
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 · Quote Post Nest
*
* Quoting a post files it inside the composer: a slot opens to exactly
* the height of the embedded card, the card's content settles into it,About this pattern
Quoting is an act of carrying something into your own message, and the motion should make that literal without pretending the post physically flew across the screen. The composer opens a slot to exactly the height of the embedded card on a short eased tween — never a spring, because a container that overshoots its own content flashes clipped type — and the card's content rises into the space as it appears, laid out at final size from the first frame so no line is ever scaled by the box growing around it. Meanwhile the source post grows an accent rule down its edge: of everything on screen, that is the one being carried. Removing the quote runs the same beats backwards, so attaching something you can detach costs nothing.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Social feed
The quoted post appears as a bordered card inside the composer above the reply field.