Badge Unlock

Create a badge unlock moment. Locked state: a circular badge slot with a dashed hairline border, greyscale, holding a padlock icon. On unlock, a tight choreography: the lock swaps to a medal icon with a spring spin-in (from 40% scale and -60deg, stiffness 460, damping 20); the circle fills with an accent gradient while the greyscale filter lifts (350ms); the whole badge does a celebratory pop (scale 1 → 1.18 → 1 with a slight rotate wobble, 500ms, springy ease like cubic-bezier(0.34, 1.56, 0.64, 1)); and 8 accent dots ray outward from the center to ~48px at evenly spaced angles, scaling in and fading over 650ms (0.15s after the swap). The badge name appears below. Compute the ray angles from the index (i/8 * 2π), not randomness, so the burst is identical every time. Accessibility: announce the unlock via aria-live="polite" ("First Launch badge unlocked"); rays are aria-hidden. If prefers-reduced-motion is set, swap to the colored badge instantly with no pop or rays. 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.