I was inspired by the iOS Confetti animation and thought this would be a great time to share it with you. I created the ConfettiKit iOS framework for displaying confetti (and other effects) in iOS.

The confetti animation demo is available in my repository on Github . The project is a good example of how to use swift, swiftUI, and confetti.js to implement a simple effects that creates some cool visual effects.

A Swift package for showing confetti animation that may be customized.

The demo project may be found here.



iOS 14 and Xcode 12 are required!

In Xcode go to File -> Swift Packages -> Add Package Dependency and paste in the repo’s url: https://github.com/simibac/ConfettiSwiftUI and select master branch.


Import the package into the file where you want it to be used: ConfettiSwiftUI import

View @State struct ContentView: struct ContentView: struct ContentView: struct ContentView: struct ContentView: counter:Int = 0 var counter:Int = 0 var counter:Int = 0 body variable: some Take a look at ZStack Text(“”). font(.system(size: 50)); font(.system(size: 50)); font(.system(size: counter += 1 onTapGesture() ConfettiCannon($counter) / ConfettiCannon($counter) / ConfettiCannon($counter) / ConfettiCannon($counter)


An example project with an iOS target has been added: https://github.com/simibac/ConfettiSwiftUIDemo


You may create your own animation using the configurator software in the sample project here, or you can be inspired by one of the numerous examples.


Configuration by default



ConfettiCannon(counter: $counter1) is a cannon that shoots confetti.

Configuration of Color and Size



$counter2, colors: [.red,.black], confettiSize: 20) ConfettiCannon(counter: $counter2, colors: [.red,.black], confettiSize: 20)

Configuration should be done again.



ConfettiCannon (repetitionInterval: 0.7) (counter: $counter3, repetitions: 3)

Configuration of Fireworks



ConfettiCannon(counter: $counter4, num: 50, opening)(counter: $counter4, num: 50, opening)(counter: $counter4, num: Angle: Angle(degrees: 0), radius: 200) Angle: Angle(degrees: 360), radius: 200) Angle: Angle(degrees: 0), closingAngle: Angle(degrees: 360), radius: 200)

Configuration of Emoji



ConfettiCannon(counter: $counter5, confettis: [.text(“”),.text(“”),.text(“”),.text(“”),.text(“”),.text(“”),.text(“”),.text(“”)])

Infinite Configuration



$counter6, num:1, confettis: [.text(“”)] ConfettiCannon(counter: $counter6, num:1, confettis: [.text(“”)] , confettiSize: 20, repetitions: 100, repetitionInterval: 0.1), confettiSize: 20, repetitions: 100, repetitionInterval: 0.1), confettiSize

Configuration to Make It Rain



ConfettiCannon(counter: $counter7, num:1, confettis: [.text(“”),.text(“”),.text(“”),.text(“”),.text(“”),.text(“”),.text(“”),.text(“”)] , confettiSize: 30, repetitions: 50, repetitionInterval: 0.1), confettiSize: 30, repetitions: 50, repetitionInterval: 0.1), confettiSize


parameter type description default
counter Binding Any change in this variable causes the animation to start. 0
num Int confetti confetti confetti confetti confetti confetti 20
confettis [ConfettiType] text and a list of shapes [.shape(.circle),.shape(.triangle),.shape(.square),.shape(.slimRectangle),.shape(.roundedCross)] [.shape(.circle),.shape(.triangle),.shape(.square),.shape(.slimRectangle),.shape(.slimRectangle),.shape(.slim
colors [Color] a list of the colors that have been applied to the default forms [.blue,.red,.green,.yellow,.pink,.purple,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, .orange]
confettiSize CGFloat confettis and emojis are resized to this size 10.0
rainHeight CGFloat Confettis travel a vertical distance. 600.0
fadesOut Bool confettis and emojis are resized to this size true
opacity Double During the animation, the opacity should be at its highest. 1.0
openingAngle Angle The angle of the opening in degrees is defined by a border. Angle.degrees(60)
closingAngle Angle The closing angle in degrees is defined by a border. Angle.degrees(120)
radius CGFloat Radius of the explosion 300.0
repetitions Int the number of times the explosion occurs 0
repetitionInterval Double intervals between repeats 1.0


ConfettiSwiftUI has been incorporated into the following projects.



This is a SwiftUI Package for Configurable Confetti Animation. It’s based on the SwiftUI package, which helps you easily create and customize your own UIViews. This package will help you create customizable confetti animation.. Read more about confetti api and let us know what you think.

Related Tags

  • ios confetti-animation
  • swiftui lottie animation
  • saconfettiview
  • swiftui particle emitter
  • confetti github