Friend Request Accept
Accept swaps in place for a Friends state with a check that draws in, while Decline fades out and the card keeps its size.
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, type CSSProperties } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Friend Request Accept
*
* A friend request card resolves in place. Tapping Accept swaps the
* button label for a Friends state with a check that draws in, whileAbout this pattern
A request card should resolve without restaging the screen below it. Here both button labels occupy the same grid cell, so the Accept button never changes width when it becomes Friends, and the Decline button only fades, leaving its space held, so the rows under the card never move. The old label leaves upward while the new one arrives from below at a constant font size, a check draws in beside it on one critically damped spring, the only spring in the file, and a confirmation line fades in on a line that was always reserved for it. Under reduced motion the beats keep their order and lose their travel.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Social feed
Tapping Accept turns the request into a Friends state without moving the post below it.
- Profile page
The request card resolves in place on the profile, and the confirmation line appears beneath it.