Achievement Badge Collection Grid — HTML CSS JS Snippet

Gamified progress systems — achievement badges, unlockable trophies, skill collections — are one of the most reliable engagement patterns in product design. Duolingo, LinkedIn, Steam, and countless SaaS onboarding flows use a badge grid to visualize accomplishment and create a sense of "one more to go." This snippet builds that pattern as a fully interactive, dependency-free component: a responsive grid of circular icon badges that can be locked (grayscale, dimmed, with a lock overlay) or unlocked (full color, with a subtle looping shine sweep), each clickable to reveal contextual information, plus a "simulate unlock" control that demonstrates the actual unlock animation sequence.

Locked vs. unlocked visual states

Every badge shares the same markup — an icon inside a circular frame plus a name label — and the locked/unlocked distinction is expressed entirely through CSS classes. Locked badges get filter: grayscale(1) on the icon circle, a dimmed neutral background instead of the badge's accent-colored radial gradient, and a small circular lock icon absolutely positioned in the top-right corner via .lock-overlay. Unlocked badges use radial-gradient(circle at 35% 30%, ...) with a CSS custom property --accent set per-badge inline, so each unlocked badge can have its own color (amber for "First Steps," indigo for "On Fire," emerald for "Sharp Shooter") while sharing one shared gradient formula. This custom-property approach means adding a new badge color requires zero new CSS — just a different --accent value on the button element.

The shine-sweep animation on unlocked badges

Unlocked badges include a .badge-shine element: an absolutely positioned, skewed white gradient strip that sweeps across the badge using a left keyframe animation from -60% to 130%, masked by the badge's overflow: hidden. Because it runs on an infinite loop with staggered animation-delay values per badge (using :nth-child selectors), the sweeps ripple across the grid rather than firing in unison, producing a subtle, premium "polished trophy case" feel rather than a distracting flashing effect. The sweep uses transform: skewX(-20deg) so the highlight reads as a light reflection rather than a flat rectangle sliding across.

Interactive tooltips for both states

Clicking any badge — locked or unlocked — opens a small dark popover positioned relative to the badge panel using getBoundingClientRect() math to compute the offset from the panel's own bounding rect. For locked badges, it reads the requirement from a data-requirement attribute ("Complete 10 tasks to unlock"). For unlocked badges, it reads a data-earned attribute and shows "Earned on [date]". This means the demo content is entirely data-driven from HTML attributes — swapping requirement text or earned dates never touches the JavaScript. A document-level click listener closes the popover when clicking outside any badge.

Simulating an unlock: state transition and confetti-lite burst

The "Simulate Unlock" button demonstrates the full unlock sequence on the next locked badge in DOM order. simulateUnlock() finds the first .locked badge, swaps its classes from locked to unlocked, removes the lock overlay element, re-inserts a fresh .badge-shine element (since the shine sweep only exists on unlocked badges), and adds a temporary .celebrating class that triggers a CSS box-shadow pulse ring (@keyframes badge-pulse) and an icon pop-scale animation. Simultaneously, spawnConfetti() procedurally generates 14 small colored <span> elements positioned at the badge's center, each animated outward at a randomized angle and distance using CSS custom properties (--dx, --dy, --rot) consumed by a single shared @keyframes confetti-burst rule, then removes each piece from the DOM on animationend to avoid leaking nodes. This is deliberately "confetti-lite" — a dozen tiny squares rather than a full particle library — keeping the celebration snappy and dependency-free.

Progress summary and grid layout

A header shows a live "N / Total unlocked" count and a linear progress bar, both recalculated by updateProgress() after every unlock. The grid uses CSS Grid with repeat(5, 1fr) columns, collapsing to 3 columns under a mobile media query, so the same markup adapts cleanly from a wide dashboard panel down to a phone-width card.