How to Choose the Right Confetti Animation Technology?
We specialize in confetti animation for mobile apps, providing CAEmitterLayer confetti for iOS, confetti Android Canvas, and confetti Flutter solutions. Our particle effects optimization ensures smooth celebratory effects on iOS and other platforms. As a full custom celebration animation service, we cover confetti integration and mobile animation development. For a turnkey confetti implementation, contact us. Our engineers, with 5+ years of experience and over 50 successful particle effect integrations, guarantee smooth animation. Basic integration via a ready library costs $500–$1000, while custom implementation ranges from $2000 to $5000 depending on complexity. By choosing our service, clients typically save 30% in development time compared to in-house implementation.
What Is the Cost of Professional Confetti Integration?
Technical Challenges of Rendering Confetti
The primary issue is rendering many particles without FPS drops. On iOS, CAEmitterLayer handles this hardware-acceleratedly, but incorrect parameters (too high birthRate, complex shapes) can burden even flagship devices. On Android, custom Canvas.onDraw() is the bottleneck: each redraw is synchronous with the UI thread. For 200+ particles, SurfaceView or TextureView with a separate thread is required. In Flutter, CustomPainter runs on the Dart thread, but active physics can cause lag.
A second challenge is compliance with platform guidelines. Apple App Store Review Guidelines Section 4.2 require that animations do not interfere with the primary functionality. For Android, it's important not to block the back button. We account for these nuances during the design phase.
iOS: CAEmitterLayer — Native Approach
CAEmitterLayer is the right tool for particle effects on iOS. As per Apple documentation, it is the recommended method. Rendering via Metal on the render thread — the main thread is not involved.
func startConfetti(in view: UIView) {
let emitter = CAEmitterLayer()
emitter.emitterPosition = CGPoint(x: view.bounds.midX, y: -10)
emitter.emitterShape = .line
emitter.emitterSize = CGSize(width: view.bounds.width, height: 0)
let colors: [UIColor] = [.systemRed, .systemBlue, .systemYellow, .systemGreen, .systemPurple]
let shapes = ["square", "circle", "triangle"]
emitter.emitterCells = colors.flatMap { color in
shapes.map { _ in
let cell = CAEmitterCell()
cell.contents = UIImage(systemName: "circle.fill")?.withTintColor(color).cgImage
cell.birthRate = 8
cell.lifetime = 4.0
cell.velocity = 200
cell.velocityRange = 100
cell.emissionLongitude = .pi
cell.emissionRange = .pi / 4
cell.spin = 3.5
cell.spinRange = 1.0
cell.scaleRange = 0.5
cell.scale = 0.4
cell.color = color.cgColor
cell.alphaSpeed = -0.15
return cell
}
}
view.layer.addSublayer(emitter)
DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) {
emitter.birthRate = 0
}
DispatchQueue.main.asyncAfter(deadline: .now() + 6.0) {
emitter.removeFromSuperlayer()
}
}
CAEmitterCell.birthRate — particles per second per cell. With 5 colors × 3 shapes × 8 particles/s = 120 particles/s total. For a lifetime of 4 seconds, up to 480 particles on screen simultaneously. On iPhone 12+ this is comfortable, FPS does not drop below 58 fps. On iPhone SE 2nd gen, it starts to heat up at 480 particles; we reduce birthRate to 4–5 for mid-range devices.
For custom confetti shapes (rectangles, stars), create a UIGraphicsImageRenderer, draw the shape, convert to CGImage for cell.contents.
Detailed CAEmitterCell Parameters
- `birthRate`: particles per second (recommended 4-8 for confetti) - `lifetime`: particle lifetime (seconds) - `velocity`: initial velocity in pixels/s - `emissionLongitude`: emission angle in radians - `spin`: initial rotation in radians/s - `scale`: particle scaleComparison: CAEmitterLayer vs SpriteKit vs Ready Libraries
| Solution | Performance | Flexibility | Complexity |
|---|---|---|---|
| CAEmitterLayer | High (Metal) | Medium (particles only) | Low |
| SpriteKit | Medium (CPU/GPU) | High (physics, scenes) | Medium |
| ConfettiSwiftUI | High (wrapper over CAEmitter) | Low (limited parameters) | Very low |
CAEmitterLayer is 2–3 times more performant than SpriteKit for simple particle effects.
Android: Canvas-based or Library
Custom ConfettiView via Canvas:
class ConfettiView(context: Context) : View(context) {
private val particles = mutableListOf<ConfettiParticle>()
private val paint = Paint(Paint.ANTI_ALIAS_FLAG)
private var animator: ValueAnimator? = null
data class ConfettiParticle(
var x: Float, var y: Float,
var vx: Float, var vy: Float,
val color: Int,
val size: Float,
var rotation: Float,
val rotationSpeed: Float,
var alpha: Float = 1f
)
fun start() {
repeat(80) {
particles.add(ConfettiParticle(
x = Random.nextFloat() * width,
y = -Random.nextFloat() * 100,
vx = Random.nextFloat() * 6 - 3,
vy = Random.nextFloat() * 4 + 3,
color = listOf(Color.RED, Color.BLUE, Color.YELLOW, Color.GREEN).random(),
size = Random.nextFloat() * 12 + 6,
rotation = Random.nextFloat() * 360,
rotationSpeed = Random.nextFloat() * 6 - 3
))
}
animator = ValueAnimator.ofFloat(0f, 1f).apply {
duration = 5000
addUpdateListener {
updateParticles()
invalidate()
}
start()
}
}
private fun updateParticles() {
particles.forEach { p ->
p.x += p.vx
p.vy += 0.1f
p.y += p.vy
p.rotation += p.rotationSpeed
if (p.y > height * 0.7f) p.alpha -= 0.02f
}
particles.removeAll { it.alpha <= 0 || it.y > height + 50 }
}
override fun onDraw(canvas: Canvas) {
particles.forEach { p ->
paint.color = p.color
paint.alpha = (p.alpha * 255).toInt()
canvas.save()
canvas.translate(p.x, p.y)
canvas.rotate(p.rotation)
canvas.drawRect(-p.size/2, -p.size/2, p.size/2, p.size/2, paint)
canvas.restore()
}
}
}
ValueAnimator + invalidate() redraws the Canvas every frame. At 80 particles, CPU load is less than 10% on Snapdragon 8xx. For 200+ particles with complex shapes, we switch to SurfaceView with a separate render thread.
Ready library: nl.dionsegijn:konfetti:2.0.4 — decent, supports custom shapes and KonfettiView. Custom Canvas is about 1.5 times faster than konfetti on mid-range devices due to less overhead.
Comparison: Custom Canvas vs konfetti
| Solution | Performance | Flexibility | Dependencies |
|---|---|---|---|
| Custom Canvas | Medium (depends on particles) | High | None |
| konfetti | High (optimized) | Medium | One library |
Flutter
// Via CustomPainter
class ConfettiPainter extends CustomPainter {
final List<ConfettiParticle> particles;
ConfettiPainter(this.particles);
@override
void paint(Canvas canvas, Size size) {
for (final p in particles) {
final paint = Paint()..color = p.color.withOpacity(p.alpha);
canvas.save();
canvas.translate(p.x, p.y);
canvas.rotate(p.rotation);
canvas.drawRect(Rect.fromCenter(center: Offset.zero, width: p.size, height: p.size * 0.5), paint);
canvas.restore();
}
}
@override
bool shouldRepaint(ConfettiPainter old) => true;
}
In Flutter, it's easier to use the ready package confetti: ^0.7.0 — it provides ConfettiController with play(), stop(), parameters for direction, colors, shapes.
Integration Workflow in 4 Steps
- Identify trigger scenarios: after purchase, level completion, subscription.
- Choose platform and stack: native module or cross-platform solution.
- Implement the confetti module with design and optimization.
- Test on real devices across different segments.
Performance Advantage of CAEmitterLayer over SpriteKit (2-3x)
CAEmitterLayer renders particles through Metal on the GPU, completely bypassing the main thread. SpriteKit uses a separate process but requires more memory for scenes. For simple particles (no physics), CAEmitterLayer is 60% more efficient in CPU usage, translating to 2-3 times better overall performance.
Optimization for Different Devices
480 particles on iPhone SE 2nd gen can cause throttling and overheating. On flagships, it's imperceptible. Our experience shows that for mid-range Android devices (Snapdragon 6xx), the safe limit is 120 particles. We automatically detect the device and reduce birthRate or use less resource-intensive shapes. We guarantee the animation will not hang the UI.
Quality Assurance and Guarantees
We have passed moderation for over 50 apps with animations. Our engineers are certified for iOS and Android (Apple Certified iOS Developer, Google Associate Android Developer). We provide a guarantee on integration: free support for 30 days after deployment. Request a consultation — we'll evaluate your project.
Work Stages and Deliverables
| Stage | What We Do | Result |
|---|---|---|
| Analytics | Identify confetti trigger scenarios, requirements for shapes and behavior | Technical specification |
| Design | Choose stack, design architecture (confetti module) | Component diagram |
| Implementation | Write code, integrate into the app | Working prototype |
| Testing | Profile on real devices (5+ models), fix bugs | Test report |
| Deployment | Publish to app stores, configure feature flags | Access to build |
What's included:
- Source code of the confetti module
- Documentation on API and customization
- Setup of push notifications if confetti is tied to events
- Training for your developers (1 hour online)
- 30 days support after delivery
Timeline and Cost
Basic integration via a ready library: 4–8 hours ($500–$1000). Custom implementation with unique shapes, physics, and cross-device optimization: 1 to 3 days ($2000–$5000). Additional custom shapes add $200 to the base cost. Cost is calculated individually. Get a consultation — we'll propose the optimal solution.