Upload Complete Fold
A finished upload's progress track folds away as the tile turns over to its thumbnail.
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 { useEffect, useState, type CSSProperties } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Upload Complete Fold
*
* The moment an upload stops being a task and becomes a file: the
* progress track folds away as the placeholder tile turns over toAbout this pattern
The moment an upload stops being a task and becomes a file. The track fills on a linear curve, then folds out of the row in one short height tween while the placeholder tile turns over on its vertical axis to reveal the thumbnail behind it, and a small confirmation badge lands a beat later. The filename never moves and the status line crossfades in a fixed slot, so the row shrinks around the type rather than dragging it. Reduced motion keeps the reveal and drops the turn.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- File browser
Upload tray row drops its progress track and shows the file thumbnail once the transfer lands.
Related patterns
- Permission Request RiseA permission card rises with its icon settling a beat before the explanation.
- Connection RestoredThe offline bar turns green, confirms, and retracts in one continuous move.
- Credit Deduct TickA usage balance ticks down to its new figure while the amount taken rises beside it and leaves.