---
title: "Conditional: shimmer"
description: A band of light that sweeps an element again and again while a condition is true.
---

Shimmer sweeps a soft band of light across the pixels an element draws, rests for a moment, and sweeps again for as long as a condition holds. Use it on placeholder blocks while data loads. To cover real content with a placeholder that gives way when loading ends, use [`kapowSkeleton`](/effects/more-skeleton).

## Usage

The sample shimmers a card's placeholder blocks while it loads.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.jantursky.kapow.ConditionalEffect
import com.jantursky.kapow.conditionalEffect

@Composable
fun LoadingBlock(loading: Boolean) {
    Box(
        Modifier
            .size(width = 220.dp, height = 64.dp)
            .conditionalEffect(loading, ConditionalEffect.shimmer())
            .clip(RoundedCornerShape(12.dp))
            .background(Color(0xFFD9DCE3)),
    )
}
```

## Parameters

| Parameter | Default | Description |
| --- | --- | --- |
| `color` | `Color.White.copy(alpha = 0.4f)` | The band. Its alpha is how bright the band gets at its middle. |
| `angle` | `20f` | Direction the band travels, in degrees clockwise from pointing right. |
| `duration` | `1500.milliseconds` | How long one sweep takes. |
| `bandWidth` | `0.4f` | Width of the band, as a fraction of the element's length along the sweep. |
| `softness` | `1f` | How soft the band's edges are, above 0 and at most 1. Lower values look harder edged. |
| `pause` | `400.milliseconds` | How long the element rests between two sweeps. |
| `blendMode` | `BlendMode.SrcAtop` | How the band blends with the element. The default keeps it on the element's own pixels. |

## Reduced motion

The element is lightened evenly while the condition holds, and no band travels.

## Notes

- The band only lights the element's own pixels, so a rounded or transparent element is not given a square glow.
- When the condition turns false the band fades out over 200 ms. Change that with `fadeOut`.
- `speed` scales the sweep and the pause together.
- Nothing recomposes while the band moves.

## Live example

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