---
title: "Change: flash"
description: 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.

```kotlin
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](/guides/accessibility).

## Live example

<iframe class="live-example" src="https://kapow-demo.vercel.app/#change-flash" title="Live example: change-flash" loading="lazy" allow="autoplay"></iframe>