Avatar Upload Reveal
A placeholder silhouette fades out as the uploaded photo slides up into the avatar circle, then a check badge fades in.
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 type { CSSProperties } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Avatar Upload Reveal
*
* An onboarding photo step. The placeholder silhouette fades out and
* the uploaded photo slides up into the avatar circle, then a checkAbout this pattern
A photo step should confirm the upload without restaging the whole screen. This belongs on the onboarding flow when a photo is chosen, and on the profile page when a photo is replaced. The placeholder only fades, because a silhouette that performs would compete with the photo arriving; the photo only translates on an eased tween and settles on one critically damped spring, the only settle in the file, because a portrait should land rather than bounce; the check badge and the caption only fade in after the photo is still, because words and marks that move read as unfinished work. 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.
- Onboarding flow
The uploaded photo replaces the placeholder avatar as the photo step completes.
- Profile page
A new profile photo fades in over the old avatar after an upload.
Related patterns
- Notification Opt-inAn example alert drops in and two more fan out behind it, then the permission question reads underneath.
- Permission PrimerThe page dims and an explanation rises, with a small diagram filling in to show what the permission would actually put on screen.
- Connect IntegrationThe switch throws, the status swaps to connected, and the row opens to list what it will now sync.