New: Xbox One achievement toast
Unlock notifications completely revamped in the style of Adam Cosman's codepen. When you unlock a badge now:
- Small rarity-colored circle fades in at bottom-center with a rotating trophy icon inside
- Circle pulses twice (like Xbox's achievement pop)
- Circle slides left and a banner grows out from it to the right
- Banner reveals 'Achievement unlocked' / 'Rare achievement unlocked' + a Gamerscore-style G 60 score + the badge title
- Banner holds for ~6 seconds then collapses back to the circle, and the circle fades out
Total animation: 10.5 seconds. Rarity tiers color the circle and banner (Common grey → Mythic red). Rare+ tiers get a glow effect and a confetti burst timed to the banner reveal.
Confetti and glow still respect prefers-reduced-motion and the per-user notification preferences.
Fixes
- Showcase icon contrast: sidebar pills and header dots now render their icons in white instead of the same rarity color as the border. Previously the icon blended into the border and looked flat.
- Tinted backgrounds: pill and dot backgrounds now use a 10-15% tint of the rarity color for a subtle accent glow.
Test
Play something past 80% or use the admin Inject progress panel to push a counter over a threshold. Watch the bottom-center of the page for the Xbox-style animation. Try it with different rarity tiers (unlock a Common vs a Mythic badge) to see the color/glow variations.