Profile Completion Ring
The ring around the avatar advances one arc per field, and each row marks itself as the arc reaches it.
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 } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Profile Completion Ring
*
* A ring around the avatar advances one arc per field as the profile
* fills in, each row marking itself as the arc reaches it. On the lastAbout this pattern
A completeness indicator that shows its working. The arc around the avatar extends by one quarter as each field lands, and the matching row in the list draws its own mark at the same moment, so the ring and the reasons for it are never out of step. The arc springs but never overshoots — an indicator that rocks past its value and back is lying about the number printed underneath it — and that number is plain tabular text that swaps rather than counts, because scaling digits beside a moving arc splits the eye in two. Finishing changes the ring's colour and the label, and that is the whole reward; there is nothing else to celebrate about a filled-in form.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Profile page
A ring beside the avatar reports how much of the profile is filled in.
Related patterns
- Import Data ConnectA line draws itself between two service marks, records run along it, and the destination takes a check when the import lands.
- Setup CompleteThe last item checks itself off, the checklist clears, and a single confirmation takes its place.
- Value Prop CarouselIntro slides advance on their own, with the artwork crossfading a beat behind the copy.