SwiftConfettiView

Celebrate every moment in your app

Example App

Add beautiful confetti animations to your iOS app in just a few lines of code. Built on CAEmitterLayer for smooth, high-performance particle rendering. Supports UIKit and SwiftUI with ready-to-use presets, burst and rain modes, haptic feedback, sound effects, and full customization of colors, shapes, and physics. iOS 13.0+ · Swift 5.0+ Installation Presets UIKit · SwiftUI Types · Colors Intensity · Density Emission Origin · Spread Burst Mode Haptic Feedback · Sound Depth Effect · Fade Out Callback Using v0.1? See Migration Guide

Perfect demo-perfect.mp4	Default Rain demo-rain.mp4
From a Point demo-point.mp4	Firework demo-firework.mp4
Emoji demo-emoji.mp4	SF Symbol demo-sfsymbol.mp4
Custom Colors demo-colors.mp4	Repeat Burst demo-repeat.mp4
Depth Effect demo.mp4	UIKit demo-uikit.mp4

Installation

Swift Package Manager

Add SwiftConfettiView to your project via Xcode:

1. File → Add Package Dependencies
2. Enter the repository URL:

https://github.com/ugurethemaydin/SwiftConfettiView.git

Or add it to your Package.swift:

dependencies: [
    .package(url: "https://github.com/ugurethemaydin/SwiftConfettiView.git", from: "1.0.0")
]

CocoaPods

SwiftConfettiView is also available through CocoaPods. To install it, simply add the following line to your Podfile:

pod 'SwiftConfettiView'

And then run:

$ pod install

Manual Installation

To manually install SwiftConfettiView, simply add SwiftConfettiView.swift to your project.

Usage

Presets

Get started instantly with pre-configured templates:

Preset	Effect
.perfect	Intense burst with depth, haptic & sound
.firework	360° star explosion from center
.rain	Gentle continuous confetti rain

UIKit:

confettiView.applyPreset(.perfect)
confettiView.startConfetti()

SwiftUI:

ConfettiView(preset: .perfect, isActive: $showConfetti)

Override specific settings after applying a preset:

// UIKit
confettiView.applyPreset(.perfect)
confettiView.playSound = false

// SwiftUI
ConfettiView(preset: .perfect, isActive: $isActive, playSound: false)

UIKit

Creating a SwiftConfettiView is the same as creating a UIView:

let confettiView = SwiftConfettiView(frame: self.view.bounds)

Don't forget to add the subview!

self.view.addSubview(confettiView)

SwiftUI

import SwiftConfettiView

struct ContentView: View {
    @State private var showConfetti = false

    var body: some View {
        ZStack {
            ConfettiView(type: .confetti, isActive: $showConfetti)

            Button("Celebrate!") {
                showConfetti.toggle()
            }
        }
    }
}

Types

Pick one of the preconfigured types of confetti with the .type property, or create your own by providing a custom image. This property defaults to the .confetti type.

Type	Code
.confetti	confettiView.type = .confetti
.triangle	confettiView.type = .triangle
.star	confettiView.type = .star
.diamond	confettiView.type = .diamond
.image	confettiView.type = .image(UIImage(named: "smiley"))
.text	confettiView.type = .text("🎉")
.sfSymbol	confettiView.type = .sfSymbol("star.fill")

Colors

Set the colors of the confetti with the .colors property. This property has a default value of multiple colors.

confettiView.colors = [.red, .green, .blue]

Intensity

The intensity refers to how many particles are generated and how quickly they fall. Set the intensity of the confetti with the .intensity property by passing in a value between 0 and 1. The default intensity is 0.5.

confettiView.intensity = 0.75

Density

Control how many particles fill the screen. Higher values = more particles. Default is 1.0.

confettiView.density = 2.0  // double the particles

Emission Origin

By default, confetti rains from the top edge. Set emitterOrigin to emit from a specific point:

confettiView.emitterOrigin = CGPoint(x: 200, y: 300)

Emission Angle & Spread

Control the direction and cone width of particle emission (in radians):

confettiView.emissionAngle = 3 * .pi / 2  // upward
confettiView.spread = .pi / 4              // narrow cone

For a 360-degree firework effect:

confettiView.spread = 2 * .pi

Burst Mode

For a one-shot burst instead of continuous rain, set burstCount:

confettiView.burstCount = 100

The confetti stops automatically after emitting the specified number of particles.

Haptic Feedback

Trigger haptic feedback when confetti starts:

confettiView.hapticFeedback = true

Sound

Play a built-in celebratory sound when confetti starts:

confettiView.playSound = true

Use a custom sound file:

confettiView.customSoundURL = Bundle.main.url(forResource: "victory", withExtension: "mp3")

Depth Effect

Enable dual-layer parallax for a 3D depth illusion. A background layer (smaller, slower, dimmer particles) is added behind the main foreground layer:

confettiView.addDepth = true

Fade Out

By default, stopping confetti fades out smoothly. Disable for an abrupt stop:

confettiView.fadeOut = false  // default is true

Callback

Get notified when confetti stops:

confettiView.onStop = {
    print("Confetti finished!")
}

Starting / Stopping / Status

confettiView.startConfetti()  // start
confettiView.stopConfetti()   // stop
confettiView.isActive         // true while confetti is on screen

SwiftUI — Advanced Examples

Point emission (burst from a button):

ConfettiView(
    isActive: $isActive,
    emitterOrigin: buttonCenter,
    emissionAngle: 3 * .pi / 2,
    burstCount: 80
)

Firework effect (360-degree burst):

ConfettiView(
    type: .star,
    isActive: $isActive,
    emitterOrigin: CGPoint(x: 200, y: 400),
    spread: 2 * .pi,
    burstCount: 100,
    hapticFeedback: true
)

Emoji confetti:

ConfettiView(
    type: .text("🎉"),
    isActive: $showConfetti
)

Depth effect (parallax rain):

ConfettiView(
    isActive: $showConfetti,
    addDepth: true
)

SF Symbol confetti:

ConfettiView(
    type: .sfSymbol("heart.fill"),
    colors: [.systemPink, .systemRed, .systemOrange],
    intensity: 0.7,
    isActive: $isActive,
    density: 1.5
)

Custom colors:

let palette: [UIColor] = [
    UIColor(red: 1.0, green: 0.84, blue: 0.0, alpha: 1.0),  // gold
    UIColor(red: 0.0, green: 0.0, blue: 0.0, alpha: 1.0),    // black
    UIColor(red: 0.85, green: 0.85, blue: 0.88, alpha: 1.0),  // silver
]

ConfettiView(
    type: .diamond,
    colors: palette,
    intensity: 0.8,
    isActive: $isActive,
    density: 1.5
)

Repeat burst (re-trigger on completion):

ConfettiView(
    type: .triangle,
    intensity: 0.7,
    isActive: $isActive,
    burstCount: 120,
    hapticFeedback: true,
    density: 1.5
)
.onChange(of: isActive) { active in
    if !active && shouldRepeat {
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
            isActive = true
        }
    }
}

Apps Using SwiftConfettiView

• Direct Message for Whatsapp - chat without adding a contact!
  Type a number, tap the direct message button, and start a WhatsApp chat without saving the contact. Fast, private, and clean.

• Qwote - Capture, Format & Share quotes
  Qwote is a quick way to share text snippets or quotes as beautifully formatted images.

• Soapbox - Chat with and Make New Friends

Want your app listed here? Open a pull request or email us.

Other Libraries

CheckDevice

Detect iOS device models and screen sizes at runtime.

CheckDevice

Author

Uğur Ethem AYDIN, ugur@metromedya.com

License

SwiftConfettiView is available under the MIT license. See the LICENSE file for details.