---
title: "Change: shine"
description: A soft band of light sweeps across an element when a value changes.
---

Shine sweeps a soft band of light over the element's own pixels. Use it to draw the eye to something that just updated, such as a price that changed or a button that became available.

## Usage

Attach it with `Modifier.changeEffect`. The sample sweeps the band from the top left to the bottom right when the price changes.

```kotlin
import androidx.compose.foundation.text.BasicText
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import com.jantursky.kapow.ChangeEffect
import com.jantursky.kapow.changeEffect
import kotlin.time.Duration.Companion.milliseconds

@Composable
fun PriceTag(price: Int) {
    BasicText(
        text = "Price: $price",
        modifier = Modifier.changeEffect(price, ChangeEffect.shine(angle = 30f, duration = 800.milliseconds)),
    )
}
```

## Parameters

| Parameter | Default | Description |
| --- | --- | --- |
| `angle` | `45f` | Direction the band travels, in degrees clockwise from pointing right. 45 sweeps from the top left to the bottom right. |
| `duration` | `1.seconds` | How long the sweep takes. Must be positive. |
| `color` | `Color.White` | Color of the band. At its center the band is 80 % of this color's alpha. |
| `easing` | `FastOutSlowInEasing` | The curve of the sweep. |
| `bandWidth` | `0.6f` | The width of the band, as a fraction of the element's length along the sweep. Must be positive. |
| `softness` | `1f` | How soft the band's edges are, above 0 and at most 1. Lower values reach full strength sooner, so the edges look harder. |
| `peakAlpha` | `0.8f` | How strong the band is at its brightest, as a fraction of `color`'s alpha, from 0 to 1. |
| `blendMode` | `BlendMode.SrcAtop` | How the band blends with the element. The default keeps it on the element's own pixels. A mode such as `BlendMode.Plus` lights them up instead, and also draws over transparent parts. |
| `bands` | `1` | How many bands sweep across, one behind the other. Must be positive. |
| `bandSpacing` | `1.5f` | The distance between bands, in band widths. Used with more than one band. |
| `reverse` | `false` | Sweeps the other way, from the far end of `angle` back towards the start. |

## Reduced motion

No band moves. The element gets a brief highlight of the band's color that fades out over half the `duration`. With `reducedMotion(ReducedMotionMode.EndState)` nothing shows at all, since the effect ends at rest.

## Notes

- The band is drawn only over the element's own pixels. Transparent parts of the content stay transparent.
- The band is 60 % as long as the element measured along the sweep direction, and it eases in and out.
- The effect has a cooldown of half its `duration`. A change that arrives sooner after the last accepted one is ignored.
- While the sweep runs, 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.

## Live example

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