Avatar Upload Crop
A picked image drops into the circular frame and settles oversized, ready to be nudged.
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 ReactNode } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Avatar Upload Crop
*
* The moment a picked image becomes a profile picture. The image drops
* into the circular frame and settles slightly oversized, which is whatAbout this pattern
The detail that makes a crop feel adjustable rather than final is where the image comes to rest: slightly larger than the frame, with room in every direction. It drops in from above and settles on a spring damped enough that it never rubber-bands against the edge of the mask, while the dashed guide stays put above it so the frame reads as fixed and the picture as movable. Zoom presses move the same scale value on a second spring, so adjusting is the same motion as arriving. Saving draws the ring once around the frame and drops a check into the corner — the crop is committed, and the frame itself says so. The picked file is stood in for by a flat placeholder tile; the component ships with no asset and shows no photograph of a person.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Onboarding flow
A circular crop with zoom, adjusted in place before it is committed.
Related patterns
- Account SwitchThe chosen avatar travels up into the header slot while the one it replaces goes back down into the list.
- Invite Code AcceptA valid invite code turns the field into the workspace tile it lets you into.
- Signup Progress MeterA slim meter advances as each account requirement is satisfied, and every row marks itself as it passes.