Level Up
The moment a player levels up, built in Rive. The badge takes its tier from the level, the rays and sparkles follow its color and the XP counts up underneath. It plays on its own, or press Randomize for a new level.
The little details
Not going to click around? These are the small things that make it feel right, zoomed in.
The badge earns its color
Bronze at level 12, silver at 37, gold at 88. The tier comes from the level number, and the rays, sparkles and background follow along.
Words first, then numbers
Ding! Congrats! Level up! lands letter by letter, then current XP and the next level come in through data binding and count up. Plug in real values from your game or app and it just works.
How it's built
- Level, current XP and next level are view model properties: your app sets them, Rive does the rest.
- The tier color (bronze, silver, gold) follows from the level inside the file, no extra code.
- Text modifiers animate the headline letter by letter.
- The badge, the rays and the content are nested artboards you can reuse on their own.
- A replay trigger restarts the celebration whenever you need it.
Use it in your own project
The file is free on the Rive Marketplace: open it in the Rive editor, make it your own and use it in your game or app.
Download it free on the Rive Marketplacecontact
Ready to make it fun?
We design the streaks, rewards, and animations that turn first-time users into regulars. Book a call and see the engine behind this site.
