How to implement a particle effect in SwiftUI

import SwiftUI

// MARK: - Model

struct Particle: Identifiable {
    let id = UUID()
    var position: CGPoint
    var velocity: CGVector
    var lifetime: Double        // 1.0 = freshly emitted, 0.0 = dead
    var decayRate: Double       // units per second
    var color: Color
    var baseRadius: CGFloat     // pixels at full lifetime
}

// MARK: - Emitter configuration

struct EmitterConfig {
    var particlesPerBurst: Int  = 60
    var speed: ClosedRange<Double> = 80...220
    var decay: ClosedRange<Double> = 0.6...1.2
    var radius: ClosedRange<Double> = 4...9
    var colors: [Color] = [.orange, .pink, .yellow, .red, .white]
}

// MARK: - View

struct ParticleEffectView: View {
    var config = EmitterConfig()

    @State private var particles: [Particle] = []
    @State private var lastDate: Date = .now
    @State private var tapPoint: CGPoint = .zero

    var body: some View {
        ZStack {
            Color.black.ignoresSafeArea()

            TimelineView(.animation) { timeline in
                Canvas { gc, size in
                    // Advance simulation (mutates @State via captured binding)
                    tick(now: timeline.date, in: size)

                    // Draw each live particle
                    for p in particles {
                        let r = p.baseRadius * p.lifetime
                        let rect = CGRect(
                            x: p.position.x - r,
                            y: p.position.y - r,
                            width:  r * 2,
                            height: r * 2
                        )
                        var ctx = gc
                        ctx.opacity = max(0, p.lifetime)
                        ctx.fill(
                            Path(ellipseIn: rect),
                            with: .color(p.color)
                        )
                    }
                }
                // Canvas size fills the ZStack
                .ignoresSafeArea()
            }

            // Tap target overlay
            Color.clear
                .contentShape(Rectangle())
                .ignoresSafeArea()
                .onTapGesture { location in
                    emit(at: location)
                }
        }
        .navigationTitle("Particle Effect")
        .navigationBarTitleDisplayMode(.inline)
    }

    // MARK: - Simulation

    private func tick(now: Date, in size: CGSize) {
        let dt = min(now.timeIntervalSince(lastDate), 0.05) // cap at 50 ms
        lastDate = now

        particles = particles.compactMap { var p = $0
            // Physics
            p.position.x += p.velocity.dx * dt
            p.position.y += p.velocity.dy * dt
            // Gravity
            p.velocity.dy += 120 * dt
            // Decay
            p.lifetime -= p.decayRate * dt
            return p.lifetime > 0 ? p : nil
        }
    }

    private func emit(at point: CGPoint) {
        let newParticles = (0..<config.particlesPerBurst).map { _ -> Particle in
            let angle = Double.random(in: 0..<(2 * .pi))
            let speed = Double.random(in: config.speed)
            return Particle(
                position:   point,
                velocity:   CGVector(dx: cos(angle) * speed,
                                     dy: sin(angle) * speed - 60),
                lifetime:   1.0,
                decayRate:  Double.random(in: config.decay),
                color:      config.colors.randomElement()!,
                baseRadius: CGFloat.random(in: config.radius)
            )
        }
        particles.append(contentsOf: newParticles)
    }
}

// MARK: - Preview

#Preview("Particle Effect") {
    NavigationStack {
        ParticleEffectView()
    }
}