Avatar Upload Preview

Create an avatar upload with a progress ring preview. Start state: a circular drop zone with a 2px dashed hairline border and a camera icon, plus an "Upload photo" button below. On upload: an accent progress ring draws clockwise around the circle (SVG circle with strokeDasharray = circumference, animate strokeDashoffset to 0 over 1.4s, easing cubic-bezier(0.22, 1, 0.36, 1), rotated -90deg to start at 12 o'clock; drive it from real upload progress in production). When it completes, the avatar pops in with a spring (from 60% scale and 0 opacity, stiffness 380, damping 22) replacing the dashed zone, and a small dark check badge springs onto the bottom-right corner (from scale 0, stiffness 520, damping 20, 0.15s delay) with a 2px page-colored border so it reads as a separate chip. The button label follows the state: Upload photo → Uploading… → Remove; Remove returns to the start state. Accessibility: the button's aria-label follows its action; the avatar shows initials as real text if no image. If prefers-reduced-motion is set, skip the ring and springs and swap states instantly. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.