Udemy - Recognition Box (Rive Motion Design)

Udemy wanted to thank community members who helped shape the platform's future with a small, delightful reward moment, a "Recognition Box" the user gets to unwrap. My job was to design and build the box animation in Rive, from its idle state through the full open sequence.

1. Idle / Invitation state The box sits closed on the page, gently jumping with glitter sparkling around it. Combined with a "Tap to open" prompt, the motion itself invites curiosity, the vibe alone nudges users to click.

2. Anticipation On tap, Rive's state machine triggers a 3-beat anticipation sequence: the box bounces once (small), then again (bigger), then a third, biggest jump, building tension before the payoff.

3. Reveal On the final beat, the box bursts open - confetti and brand-shaped elements fly out. The page background transitions to Udemy's brand colors in sync with the burst, and the reward message and CTA appear.

4. Steady state The box remains open, with the branded shapes, stars, and glitter now floating gently in place, a calm, ambient final state that keeps the brand elements present without the motion feeling "finished" or static.

Built entirely as a Rive state machine, so the sequence: idle loop → anticipation (3-step bounce) → open/burst → steady float, responds directly to a single user interaction with no extra engineering overhead. Each transition was tuned with escalating easing so the payoff felt earned rather than abrupt.

A lightweight, reusable "reward reveal" interaction that turns a simple claim-gift moment into a small, satisfying piece of delight, easy for Udemy's team to drop into future recognition or gamification flows.