Loot Box Reveal Animation — Free HTML CSS JS Snippet

Reward-reveal animations are one of the most requested gamification patterns in mobile games, live-service titles, and loyalty apps: the player taps a box, the box builds suspense with a shake and glow, then bursts open to reveal a prize whose visual drama scales with how rare it is. This snippet builds the full interaction with real weighted randomness behind it rather than a fake animation over a hard-coded prize.

Weighted rarity, not uniform randomness

The naive way to "randomise" a reward is items[Math.floor(Math.random() * items.length)], which gives every entry an equal 1-in-N chance regardless of how rare it is meant to feel. That is wrong for a rarity system where Legendary should be dramatically less likely than Common. The weightedPick() function instead assigns each prize a numeric weight (Common items weigh 60, Rare 25, Epic 12, Legendary 3), sums the total weight across all prizes, and draws one uniform random number in the range [0, totalWeight). It then walks the prize list subtracting each item's weight from that roll until the running total drops to zero or below — the item where that happens is the winner. This is the standard cumulative-distribution technique used by real gacha and loot systems: the probability of landing on any given prize is exactly weight / totalWeight, which for the two Legendary entries at weight 3 each out of a total of 197 works out to roughly 3% combined, matching the brief's target odds precisely.

Suspense sequencing with setTimeout, not a single CSS animation

The reveal is staged in three phases driven by chained setTimeout calls rather than one long animation, because each phase needs to react to information (the chosen rarity) that is not known until the roll happens. Phase one adds a .shaking class to the crate icon, triggering a CSS shake keyframe animation (alternating translateX/rotate) alongside a pulsing radial-gradient .glow-ring, both looping for about 1.4 seconds to build tension. Phase two, once the weighted prize has already been rolled internally, swaps .shaking for .burst, a cubic-bezier keyframe that scales the crate up and then down to zero — a satisfying "pop" exit. Phase three, timed to land as the burst finishes, reveals the .prize-card with an opacity and translateY/scale transition, and its border colour, box-shadow glow intensity, and heading text all switch based on the rolled rarity string via a rarity-{tier} CSS class.

Rarity-scaled particle burst

At the moment of burst, spawnParticles() generates a small set of absolutely positioned .particle divs distributed evenly around a circle using trigonometry (Math.cos(angle) * distance, Math.sin(angle) * distance) and animates each one outward and fading via a CSS custom property pair (--dx, --dy) consumed by the particle-fly keyframe. The particle count scales directly with rarity — 8 for Common up to 36 for Legendary — and the particle colour matches the rarity's accent colour, so a Legendary reveal visibly explodes with far more motion than a Common one. This scaling reinforces the rarity hierarchy without needing separate animation code per tier.

Opening history as a bounded array

Every completed reveal is unshifted onto a history array and the array is immediately sliced to its first five entries, giving an always-current "last five openings" feed rendered as a list with each prize's name and a coloured rarity tag. This is a simple but common state-management pattern worth internalising: keep the freshest N results by combining unshift with slice, rather than manually tracking indices or splicing from the end.

A note on responsible use

This pattern is genuinely fun to build and to use, but reward-reveal mechanics with randomised rarity sit adjacent to gambling psychology, and several jurisdictions now regulate loot boxes in games marketed to minors (disclosure requirements in Belgium, the Netherlands, and proposed UK and US legislation). Use this component for free, cosmetic-only rewards — daily login bonuses, achievement unlocks, non-purchasable skins — never as a mechanic players pay real money to open, and always disclose the actual odds if you ship anything resembling it in a live product.