• 🛒 Buy License
• 📱 Example App

Warning

Edges and angles for .boing, .glare, .move, and .wipe transitions as well as the .shine change effect have been changed to be consistent:

• .boing has a new default direction moving from the top instead of the bottom.
• Angle given to these transitions and effects are reversed from what they used to be meaning that a 90° angle now moves towards the bottom edge instead of the top edge.

• Added sound change effect.
• Added impact and selection haptic feedback types.
• Added particleLayer(name:) view modifier.
• .glare and .vanish now display with increased brightness.
• Added delay(_:) modifier to change effects.

Sound Effects

This version of Pow introduces Sound Effects.

Play sound effects using the .feedback(_:) change effect.

Button(status.buttonLabelText) {
    Task {
        do {
            status = .inProgress
            try await processPayment()
            status = .paid
        } catch {
            status = .failed
        }
    }
}
.changeEffect(.feedback(SoundEffect("sparkle")), value: status == .paid, isEnabled: status == .paid)
.changeEffect(.feedback(SoundEffect("notfound")), value: status == .failed, isEnabled: status == .failed)

The sounds are looked up in the main Bundle by default. Common audio formats like aiff, wav, caf, and m4a are found automatically but you can also use other formats by specifying the type and if supported by the OS.

Note

To keep the bundle size minimal, we decided to not bundle any sounds with Pow directly. That said, a selection of sounds can be found in the Pow Example repo and are free to use with any licensed copy of Pow.

Our thanks to @mergesort for the feature requests to add more haptic feedback types and sound change effects 🙇

Haptics

In addition to notification haptics, you can now trigger also selection and impact haptics.

Picker("Color", selection: $color) {
    Text("Red").tag(.red)
    Text("Green").tag(.green)
    Text("Blue").tag(.blue)
}
.pickerStyle(.segmented)
.changeEffect(.feedbackHapticSelection, value: color)

Particle Layer

Particle effects such as AnyChangeEffect.spray can now render their particles in a different position in the view tree to avoid being clipped by their immediate ancestor.

For example, certain List styles may clip their rows. Use particleLayer(_:) to render particles on top of the entire List or even its enclosing NavigationStack.

NavigationStack {
    List(items) { item in
        HStack {
            Text(item.title)
            Image(systemName: "heart.fill")
                .changeEffect(.spray(layer: .named("root")) {
                    Image(systemName: "heart.fill")
                        .foregroundStyle(.red)
                }, value: item.likes)
        }
    }
}
.particleLayer(name: "root")

Brighter .glare & .vanish

.glare and .vanish transitions now display with increased brightness giving a bit more punch to the effect. And for .glare it makes the shine show even on white backgrounds.

Delay

You can now add a delay to change effects to change the timing of the change effects. This works well with the .shine effect for example where you might want the shine highlight to show some time after the button becomes enabled.

Button("Submit") { 
    // … 
}
.buttonStyle(.borderedProminent)
.disabled(name.isEmpty)
.changeEffect(.shine.delay(1), value: name.isEmpty, isEnabled: !name.isEmpty)

If you're interested in using Pow in your app, you can purchase a license on our site. ✨

Thank you for your support!