---
id: "2112955987300901023"
source: https://x.com/guidorosso/status/2112955987300901023
author: "Guido Rosso (@guidorosso)"
media: "video, 2106x824, 23.8s"
model: claude-opus-5-5
generated: 2026-10-22
---
# Animated Achievement Badges

## Summary
Four glossy game achievement badges on dark navy (a gold star medal with a blue ribbon, an orange flame hexagon, a purple chevron shield and a teal crown seal), each reacting to hover and click with glows, sparkles, tilts and a flip. Rich, toy-like icons that make earning something feel good.

## Style
- Theme: dark
- Mood: rewarding, playful, polished, vibrant
- Tags: achievements, badges, gamification, hover-effects, sparkles, rive, icons
- Category: Games, Components

## Palette
| Role | Hex |
|---|---|
| Navy | #141728 |
| Deep navy | #191C32 |
| Gold | #F2B33D |
| Amber | #E49746 |
| Flame orange | #E8572A |
| Purple | #8D6FDD |
| Teal | #2FB8A0 |
| Ribbon blue | #2E4FD0 |
| Label white | #F2F3F7 |
| Muted | #8C90A6 |

## Typography
- Badge names: bold uppercase with wide tracking, white ("FIRST WIN", "ON FIRE"). Montserrat (800).
- Descriptions: small light grey sans below. Montserrat (400).
- Footer hint: tiny uppercase muted ("HOVER OR CLICK A BADGE").

## Layout
- Wide 2.5:1 frame (2106x824); four badges evenly spaced in a row, each about 12% of the width, with name and description centred below.
- Faint radial light rays behind each badge.

## Elements
- Gold medal: coin with a raised star, dotted inner ring, blue ribbon tails.
- Flame hexagon: red-orange hexagon with a bevel and a layered yellow flame.
- Shield: purple shield with a double chevron.
- Seal: teal scalloped badge with a dashed ring and a gold crown.
- Effects: 4-point sparkle stars, soft coloured glow, small confetti dots on click.

## Motion
- Idle: each badge breathes (scale 1 to 1.02) with sparkles twinkling around it.
- Hover: the badge lifts and tilts toward the cursor, its glow brightens and a light sweep crosses the face.
- Click: the gold medal flips on its Y axis with an expanding ring and confetti; others pulse and burst sparkles.
- Ease back to idle with a gentle spring.

## Rebuild it
1. Draw badges as layered vector art (SVG or Rive artboards) with separate parts for base, bevel highlight and emblem.
2. In Rive, build a state machine per badge (idle, hover, click) driven by pointer listeners; otherwise use Motion with `whileHover` (tilt via pointer position) and `whileTap`.
3. Light sweep: a skewed white gradient clipped to the badge, animated across on hover.
4. Sparkles: small star SVGs with randomized scale and opacity loops; confetti as short-lived particles on click.
5. Lay out four badges in a `grid grid-cols-4` on a navy radial-gradient background.

## Generation prompt
A row of four glossy cartoon game achievement badges on a dark navy background with soft light rays: a gold star medal with a blue ribbon, an orange hexagon with a flame, a purple shield with double chevrons and a teal scalloped seal with a gold crown, each with a bold white caps label and a small grey description, sparkles and glows; vibrant, polished, rewarding game UI.