Introduction

Particle, light and mask effects for Compose Multiplatform, fired by value changes and conditions, plus enter and exit transitions.

Kapow adds small visual effects to Compose Multiplatform elements. A like count sprays particles when it goes up. A badge pulses while there are unread messages. A card opens with an iris when it appears and leaves in a puff of smoke. The effects run on Android, iOS, JVM desktop and wasmJs from one commonMain source set.

There are four kinds:

• Change effects play once each time a value changes: shine, pulse, glow, spray, rise, spin.
• Conditional effects stay on while a Boolean is true: repeat, glow, pushDown, smoke.
• Progress effects are drawn at a progress you control, such as a scroll position or a hinge angle: shine, glow, iris.
• Transitions enter and exit content inside AnimatedVisibility and AnimatedContent: iris, clock, wipe, glare, blinds, pop, anvil and poof.

The current version is 1.3.0. See the changelog for what each release changed.

Install

// shared/build.gradle.kts
kotlin {
    sourceSets {
        commonMain.dependencies {
            implementation("io.github.jantursky:kapow:1.3.0")
        }
    }
}

Two optional artifacts add integrations. Neither is needed for the effects themselves.

// shared/build.gradle.kts
kotlin {
    sourceSets {
        commonMain.dependencies {
            // Effects driven by the hinge angle of a foldable, through Crease.
            implementation("io.github.jantursky:kapow-crease:1.3.0")
            // Haptic feedback when an effect fires, through multihaptic.
            implementation("io.github.jantursky:kapow-multihaptic:1.3.0")
        }
    }
}

A minimal example

import androidx.compose.foundation.clickable
import androidx.compose.foundation.text.BasicText
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import com.jantursky.kapow.ChangeEffect
import com.jantursky.kapow.changeEffect

@Composable
fun LikeButton() {
    var likes by remember { mutableIntStateOf(0) }
    BasicText(
        text = "Likes: $likes",
        modifier = Modifier
            .clickable { likes++ }
            .changeEffect(likes, ChangeEffect.spray()),
    )
}

Each tap changes likes, and the spray plays. Nothing plays when the button first appears.

What Kapow is not

It is not a particle engine, a confetti library or a set of transform animations such as shake and bounce. Other libraries cover those, and the prior art page links them. Kapow v1 uses no shaders: every effect is clipping, brushes and canvas drawing.

Kapow is on GitHub. It is inspired by Pow for SwiftUI and is not affiliated with it.