Tactile Reward Popup: Animation, Confetti, and Points Counter
A user completes a quest, receives 500 coins—and the app shows a boring AlertDialog with "Congratulations, +500". The moment is lost. The reward should feel physical: confetti particles, an accelerating counter, haptic feedback at the peak. Without this, gamification becomes a formality.
We design reward popups that turn a technical event into an emotion. Our team has delivered over 50 gamification projects, from startups to enterprise (5+ years in gamification). Our certified engineers use native animations (SwiftUI/UIKit, Jetpack Compose), Core Haptics, and CAEmitterLayer. The popup completes in 1.2–2 seconds—any longer, and users start tapping "close". In one fintech project, replacing a standard Alert with a reward popup featuring an animated counter and haptic feedback increased repeat action conversion by 27% in a week. Our basic package starts at $500, and the advanced package with full analytics is $1,200.
Why Standard AlertDialog Falls Short
An Alert is an information window. A reward popup is a micro-script with a climax, release, and feedback. Alert doesn't support staggered animation, particles, or haptics. It lacks a counter that builds a sense of accumulation. Yet these details boost repeat action conversion by 20–30% (A/B test data from our projects). An animated counter is 3x more effective at conveying reward magnitude than static text.
Reward Popup Anatomy
Typical layer structure:
- Backdrop: dimmed background with blur (UIBlurEffect / RenderEffect.createBlurEffect)
- Card: appears from below or scales up with spring animation (we use UISpringTimingParameters with damping ratio 0.6)
- Reward icon: scale + rotation with bounce
- Particle burst: confetti, stars, coins—CAEmitterLayer or Lottie
- Text reveal: animated points counter from previous value to new one
- CTA button: appears with delay after main animation
Key elements: Backdrop with blur, Particle burst with confetti, and the animated counter. Entire pipeline takes 1.2–2 seconds. Longer—user taps "close".
Implementing an Animated Counter on iOS
The most detailed element is the animated counter. +500 coins should be counted, not just appear.
class CountingLabel: UILabel {
func countFrom(_ start: Int, to end: Int, duration: TimeInterval) {
let displayLink = CADisplayLink(target: self, selector: #selector(update))
self.start = start; self.end = end
self.startTime = CACurrentMediaTime()
self.duration = duration
displayLink.add(to: .main, forMode: .common)
}
@objc func update(link: CADisplayLink) {
let elapsed = CACurrentMediaTime() - startTime
let progress = min(elapsed / duration, 1.0)
let eased = 1 - pow(1 - progress, 3) // ease-out cubic
currentValue = Int(Double(start) + Double(end - start) * eased)
text = "+\(currentValue)"
if progress >= 1 { link.invalidate() }
}
}
In Flutter, use TweenAnimationBuilder<int> with curve: Curves.easeOut and Text('${value}') inside.
Particle Burst: CAEmitterLayer vs Lottie
CAEmitterLayer is 2–3x more performant than Lottie for particle rendering but requires more code. Comparison:
| Parameter | CAEmitterLayer | Lottie |
|---|---|---|
| Performance | High (native) | Medium (JSON render) |
| Size | ~50 KB | 200+ KB |
| Flexibility | Full particle control | Limited by animation |
| Cross-platform | iOS only | iOS, Android, Web |
For a single burst of confetti on popup appearance, use CAEmitterLayer with birthRate = 300 for the first 0.1 seconds, then birthRate = 0. This gives an "explosion" effect without endless stream.
emitterLayer.birthRate = 1 // enabled
DispatchQueue.main.asyncAfter(deadline: .now() + 0.15) {
emitterLayer.birthRate = 0 // disabled—particles fly until lifetime ends
}
Lottie confetti is simpler: a ready .json file plays once over the popup. See CAEmitterLayer documentation for more details. For tactile effects, Core Haptics documentation provides guidance.
Staggered Animation: Why It Matters
Everything should not appear simultaneously—stagger creates a sense of "unfolding" the reward. Each element has its timing:
| Time | Event |
|---|---|
| 0ms | Backdrop appears, blur intensifies |
| 150ms | Card flies in from bottom (spring) |
| 300ms | Particle burst |
| 350ms | Icon scale up with bounce |
| 500ms | Haptic feedback (success) |
| 600ms | Text reward fades in |
| 800ms | Counter starts animating |
| 1200ms | CTA button appears |
On iOS, use DispatchQueue.main.asyncAfter for each step or UIViewPropertyAnimator with addAnimations(afterDelay:). In Flutter, use AnimationController with interval curves for each element.
Step-by-Step Confetti with CAEmitterLayer
- Create a
CAEmitterLayerand set itsframeequal to the popup's bounds. - Configure
emitterCells: set content (e.g., a colored rectangle),birthRate,lifetime,velocity,scale,spin. - Set
birthRate = 1for 0.15 seconds, then zero (as in code above). - Add the layer as a sublayer to the popup's view.
- Verify that particles render before dismiss (lifetime ~0.8 s).
Contact us for a free assessment of your project—we'll analyze your reward scenario. Order a turnkey reward popup development (starting at $500) and get a gamification consultation.
What's Included in Our Work
- Analysis of user scenario and popup design
- Implementation in Swift (iOS) or Kotlin (Android) using native animations
- Haptic feedback integration (Core Haptics / Vibrator)
- Analytics integration (Firebase / AppsFlyer)
- Documentation and source code delivery
- 30-day post-delivery support
We guarantee correct operation on all devices—tested on 20+ models. Timeline: from 1 day for a standard reward popup with animations and haptics on one platform.
Impressive stats: 5+ years in gamification, 50+ projects delivered, certified engineers. Save up to $2,000 compared to rebuilding in-house.