---
title: "Change: glow"
description: A colored halo flares up around an element when a value changes.
---

Glow lights the element's surroundings for a moment and brightens the element itself. It works well on dark surfaces for something that just got attention, such as a card that received a reply or a score that went up.

## Usage

The sample glows around a rounded card whenever its score changes. Pass the card's own shape so the halo matches its corners.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicText
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 ScoreCard(score: Int) {
    val shape = RoundedCornerShape(16.dp)
    BasicText(
        text = "Score: $score",
        modifier = Modifier
            .background(Color.DarkGray, shape)
            .changeEffect(score, ChangeEffect.glow(color = Color(0xFFFFB547), radius = 20.dp, shape = shape)),
    )
}
```

## Parameters

| Parameter | Default | Description |
| --- | --- | --- |
| `color` | `Color(0xFF6B62F2)` | Color of the halo. |
| `radius` | `16.dp` | How far the halo reaches at its normal strength. A strengthened halo reaches further. |
| `shape` | `RectangleShape` | The shape the halo follows. |
| `intensity` | `1f` | How strong the halo is at its brightest, from 0 to 1, as a factor on the color's alpha. |
| `spread` | `0.dp` | How much wider the halo reaches, added to `radius`. |
| `offset` | `DpOffset.Zero` | Moves the halo away from the element, for a glow cast to one side. |
| `innerGlow` | `0f` | How strong a second glow just inside the element's edge is, from 0 (none) to 1. |
| `flare` | `null` | How long the halo takes to reach full strength. Setting this or `decay` replaces the default spring, which overshoots and settles on its own, with a rise and a fall that take the times given. The other one defaults to 150 ms or 1 second. |
| `decay` | `null` | How long the halo takes to fade away once it peaks. See `flare`. |
| `stackLimit` | `1.5f` | How strong quick repeated changes can make the halo, as a multiple of a single change's strength (which is 1). |

## Reduced motion

No spring. A faint halo appears and fades out in 0.3 s. The element is brightened only a little. With `reducedMotion(ReducedMotionMode.EndState)` nothing shows at all, since the effect ends at rest.

## Notes

- The halo follows the `shape` you pass, not the alpha of the content. A transparent image inside a rectangle still gets a rectangular halo.
- Changes that arrive while the glow is still running add to it. The halo gets stronger up to a cap, then stays there.
- The element itself is brightened by up to a quarter at the strongest point.
- Where the platform can blur (all Skia targets and Android 12 and later) the halo is one blurred layer. On Android below 12 it is five stacked copies of the shape at falling opacity. It looks harder-edged there.
- There is no cooldown. Every change adds a push.
- The halo is drawn outside the element's bounds, so a clipping parent cuts it off.

## Live example

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