Scenes & illustrations
Surprise gift box
The gift jiggles to tease you; tap it and the lid pops off in a burst of sparkle. It is a reward reveal for promos, referrals, streaks and checkout surprises — the moment that makes a discount feel like a present.
- 86.5 KB compiled
- 410 × 310 artboard
- 1 input
- 9 runtimes
How it works
- A Trigger input, open, toggles between closed and opened.
- Opening plays the lid pop and sparkle burst; closing reverses it.
- An Ambient layer jiggles the box periodically to invite a tap.
| Input | Type | What it does |
|---|---|---|
open | Trigger | Opens the gift, or closes it again. |
When to use it
- Promo codes and discounts
- Referral and loyalty rewards
- Streaks and achievements
Accessibility
Reveal the actual reward in real text after the animation, and do not hide it behind the canvas.
Also searched as: reward animation · gift box reveal · promo animation
Use it in your app
One component, one file. Pick your stack:
import { ExodeUICanvas } from 'exodeui';
export function SurpriseGiftBoxAnimation() {
return (
<ExodeUICanvas
src="/gallery-12-surprise-gift.bexode"
autoPlay
onReady={(engine) => {
// drive it from your own UI:
// engine.fireTrigger('open');
}}
/>
);
}React loads the compact .bexode; the other runtimes load the .exode JSON source — both come from the same design.
Questions
Can I show a real promo code?
Yes — fire open and render the code in your page when the reveal finishes.
Can it open automatically?
Fire open from your code at any moment, for example after a purchase.
More scenes & illustrations
Make it yours in ExodeUI.
Change the colours, the timing, the logic — then ship the same file.