Level Up Banner
NewPro
A full-width level-up moment with light rays, a rolling number and a row of rewards, which dismisses itself and plays queued level-ups in order.
Customize
4.5s
3
Light rays
Dim background
#ff784f
When to use it
- The level-up screen in RPGs, roguelikes and mobile games
- Rank or tier changes in learning, fitness and loyalty apps
- Season pass rewards that arrive several at a time and need a queue
Good to know
- Plan
- Pro
- Dependencies
- motion
- Rendering
- 2D canvas
- Reduced motion
- Respected
- Lines of code
- 637
Installation
Level Up Banner is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy level-up-banner.tsx into components/ui and run npm install motion.
Usage
import { useRef } from "react";
import { LevelUpBanner, type LevelUpBannerHandle } from "@/components/ui/level-up-banner";
export function Game() {
const banner = useRef<LevelUpBannerHandle>(null);
function onLevelUp(level: number) {
banner.current?.show({
level,
title: "Ember Adept",
rewards: [
{ label: "Skill point", detail: "+1" },
{ label: "Gold", detail: "+250", color: "#ffc24a" },
],
});
}
return <LevelUpBanner ref={banner} fixed />;
}Props
11 properties| Property | Type | Default | Description |
|---|---|---|---|
| ref | Ref<LevelUpBannerHandle> | — | Gives you show(event), dismiss() and clear(). |
| duration | number | 4200 | How long each banner stays, in milliseconds. It pauses while pointed at or focused. |
| color | string | "#ff784f" | Color of the rays, lines and sparks. |
| rays | boolean | true | Show the turning light rays behind the band. |
| backdrop | boolean | true | Dim whatever is behind the banner. |
| fixed | boolean | false | Cover the whole window instead of the nearest positioned parent. |
| initial | LevelUpEvent | — | A level-up to play on mount. |
| persist | boolean | false | Keep the banner up until dismiss() is called. |
| onShow | (event: LevelUpEvent) => void | — | Called when a banner starts. |
| onDismiss | (event: LevelUpEvent) => void | — | Called when a banner ends. |
| className | string | — | Extra classes for the layer. |
Dependencies: motion