Change: flash

An element's own pixels flash a color and fade back when a value changes.

Flash tints everything the element draws in one color for a moment, then fades back, like a character taking a hit in a game. Use it for a short, sharp signal: a wrong PIN, a failed payment, a score that just dropped.

Usage

The sample flashes the digit boxes of a PIN entry in coral each time a code is rejected.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.jantursky.kapow.ChangeEffect
import com.jantursky.kapow.changeEffect

@Composable
fun PinBoxes(failedAttempts: Int) {
    Row(
        modifier = Modifier.changeEffect(failedAttempts, ChangeEffect.flash(color = Color(0xFFFF6B5A))),
        horizontalArrangement = Arrangement.spacedBy(10.dp),
    ) {
        repeat(4) { Box(Modifier.size(48.dp).background(Color(0xFF161616))) }
    }
}

Parameters

Parameter	Default	Description
`color`	`Color.White`	The color of the flash. At its peak it covers the element at 85 % of this color’s alpha.
`duration`	`400.milliseconds`	How long the flash takes to rise and fade back. Must be positive.
`peak`	`0.85f`	How strongly the flash covers the element at its brightest, from just above 0 to 1.
`blendMode`	`BlendMode.SrcAtop`	How the flash blends with the element. The default tints only the element’s own pixels. `BlendMode.Plus` and `BlendMode.Screen` lighten them instead.
`strobes`	`1`	How many times the flash fires within `duration`, each a full rise and fade. Must be positive.
`shape`	`null`	Limits the flash to this shape within the element. Null flashes the whole element.

Reduced motion

Nothing moves in this effect either way, so the flash still plays, but at 35 % instead of 85 %. With reducedMotion(ReducedMotionMode.EndState) there is no flash.

Notes

Only the element’s own pixels are tinted. Transparent parts, such as the gaps between the boxes in the sample, stay clear.
The flash rises over the first tenth of duration and fades back over the rest, quickly at first and gently at the end.
A new change restarts the flash. There is no cooldown.
While the flash shows, the element is drawn into its own offscreen layer. At rest it costs nothing extra.
Works the same on every target. No blur or shader is involved.

Flash safety

flash is a flashing effect. Provide LocalKapowMaxFlashesPerSecond (or the constant KapowWcagMaxFlashesPerSecond, 3) and a change that comes less than 1/N seconds after the last one that played is ignored, never queued. strobes is lowered to the number that fits in duration at N flashes a second, and at least one stays. Off by default. The limit is a cap on the rate: it does not measure brightness or area, so it is not a claim of WCAG 2.3.1 conformance. See the accessibility guide.