SwiftConfettiView
Celebrate every moment in your app. Customizable confetti with presets, haptics, sound. Supports UIKit and SwiftUI.
Install / Use
/learn @ugurethemaydin/SwiftConfettiViewREADME
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
Installation
Swift Package Manager
Add SwiftConfettiView to your project via Xcode:
- File → Add Package Dependencies
- 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:
