Confetti Burst

Canvas-rendered celebration confetti burst overlay with 4 particle shapes, customisable colors, gravity, and spread

Free

Free with a ShipSwift account.

Copies a short instruction with your private download link. Paste it into your agent: it downloads the whole skill (the source code, the setup steps and the mistakes we already made for you) and builds the screen.

Works with

+70

What it does

Celebration confetti burst overlay. When isActive flips to true, a shower of colourful shapes (rectangles, circles, triangles, strips) erupts from the bottom of the frame, arcs under gravity, spins with a 3D wobble, and fades out. Rendered with a single SwiftUI Canvas per frame so hundreds of particles stay at 60fps. Available as a wrapper view or a .swConfetti() modifier.

What you get

✓280 lines of source code, ready to paste
✓Source Code
✓Usage
✓Parameters
✓Integration Checklist
✓Known Gotchas

animationconfetticelebrationparticlesSwiftUICanvas

Usage

// Basic — toggle triggers one burst
SWConfetti(isActive: $celebrate) {
    Text("You did it!")
}

// As an overlay on any view
myView.swConfetti(isActive: $showConfetti)

// Custom colors and intensity
SWConfetti(
    isActive: $celebrate,
    particleCount: 120,
    colors: [.red, .orange, .yellow, .green, .blue, .purple],
    spread: .wide,
    duration: 4.0
) {
    myContent
}

// Fire-and-forget (auto-resets isActive after burst finishes)
SWConfetti(isActive: $celebrate, autoReset: true) {
    Button("Celebrate") { celebrate = true }
}

// Gold confetti with narrow cone
myView.swConfetti(
    isActive: $celebrate,
    particleCount: 100,
    colors: [.yellow, .orange, Color(red: 1, green: 0.84, blue: 0)],
    spread: .narrow,
    autoReset: true
)

Parameters

Parameter	Type	Default	Description
isActive	Binding<Bool>	—	Set to true to fire one burst
particleCount	Int	80	Number of particles per burst
colors	[Color]	Rainbow 6	Colour palette randomly assigned to particles
shapes	[SWConfettiShape]	All four	Which shapes to include
spread	SWConfettiSpread	.medium	Launch cone: .narrow (30°), .medium (60°), .wide (90°)
duration	Double	3.0	Seconds until particles fully fade
gravity	Double	500	Downward acceleration in pts/s²
autoReset	Bool	false	Flip isActive back to false when burst finishes

Integration Checklist

Add SWConfetti.swift to your project
Create a @State private var celebrate = false to drive it
Wrap your content with SWConfetti(isActive: $celebrate) or use .swConfetti(isActive: $celebrate) modifier
Set celebrate = true when the celebration event fires (purchase, achievement, etc.)
Use autoReset: true for fire-and-forget behaviour

Known Gotchas

The Canvas overlay is non-interactive (allowsHitTesting(false)) so it won't block touches on content below
Particles launch from the bottom centre of the view frame — make sure the parent has adequate height
TimelineView(.animation) keeps rendering every frame while particles are alive; the view stops updating after duration seconds