Onboarding Checklist

Create an onboarding checklist. A card titled "Getting started" with a monospace "2/4" counter, a slim 4px progress bar, and a task list. When a task completes, three things animate together: its circle fills with the accent color (250ms) while a check icon spins in (from scale 0 and -50deg, spring stiffness 560, damping 22); a strikethrough line sweeps across the task text left to right (width 0 to 100%, 350ms, easing cubic-bezier(0.22, 1, 0.36, 1)) as the text dims to the muted color; and the progress bar eases to the new fraction (450ms) with the counter updating. Drive completion from real user actions. Never tick tasks off on a timer. A checklist that completes itself is claiming the person did something they have not done, and they will find out at the worst moment. Accessibility: the bar uses role="progressbar" with values; the counter is aria-live="polite"; tasks are real text. If prefers-reduced-motion is set, apply completed 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.