---
title: "Progress: shine"
description: A band of light whose position follows a progress value.
---

Progress shine puts the band at a place you choose instead of sweeping it on a timer. Use it to tie the light to a scroll position, a slider or the hinge angle of a foldable.

## Usage

The sample moves the band across a card as `progress` goes from 0 to 1. Pass a function that reads state, such as a scroll offset, so the card does not recompose.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
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.ProgressEffect
import com.jantursky.kapow.progressEffect

@Composable
fun ShineCard(progress: () -> Float) {
    Box(
        Modifier
            .size(240.dp, 120.dp)
            .background(Color.DarkGray)
            .progressEffect(ProgressEffect.shine(angle = 30f), progress),
    )
}
```

## Parameters

| Parameter | Default | Description |
| --- | --- | --- |
| `angle` | `45f` | Direction the band travels, in degrees clockwise from pointing right. |
| `color` | `Color.White` | Color of the band. |
| `bandWidth` | `0.6f` | How wide a band is, as a share of the element's length along the sweep. Above 0, at most 1.5. |
| `softness` | `1f` | How soft the band's edges are. 1 is the usual falloff; more spreads the glow wider, less pulls it into a tighter core. Must be positive. |
| `bands` | `1` | How many bands cross together. Must be positive. |
| `bandSpacing` | `0.3f` | How far apart the bands are, as a share of the element's length along the sweep. Must not be negative. |
| `blendMode` | `BlendMode.SrcAtop` | How the bands blend with the element. The default keeps them on its own pixels. |

## Reduced motion

Progress effects do not animate on their own. The band is drawn wherever the progress puts it. Slow or limit the progress yourself if it moves a lot.

## Notes

- At progress 0 and at progress 1 the band is not drawn, so the element is unchanged at both ends.
- The band looks like the [change shine](/effects/change-shine) band: only over the element's own pixels, 60 % of its length along the direction.
- The progress lambda is read while drawing. Read Compose state in it and nothing recomposes.
- The element is drawn into an offscreen layer all the time, because the band needs the element's pixels in a buffer.

## Live example

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