---
title: "Transition: glare"
description: A wipe with a bright streak along its edge.
---

Glare is a wipe with a bright streak along its edge. Use it for a highlighted item that should arrive with more emphasis than a plain wipe.

## Usage

The sample wipes a promo card in at 45 degrees with a white streak on the edge.

```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.KapowAnimatedVisibility
import com.jantursky.kapow.KapowEnter
import com.jantursky.kapow.KapowExit

@Composable
fun PromoCard(visible: Boolean) {
    KapowAnimatedVisibility(
        visible = visible,
        enter = KapowEnter.glare(angle = 45f, color = Color.White),
        exit = KapowExit.glare(angle = 45f, color = Color.White),
    ) {
        Box(Modifier.size(240.dp, 120.dp).background(Color.DarkGray))
    }
}
```

## Parameters

| Parameter | Default | Description |
| --- | --- | --- |
| `angle` | `45f` | The direction the edge moves, in degrees. 0 is rightward. |
| `color` | `Color.White` | Color of the streak. |
| `duration` | `450.milliseconds` | How long the transition takes. Must be positive. |
| `softEdge` | `0.dp` | How wide the edge fades from shown to hidden, as in `wipe`. Must not be negative. |
| `width` | unspecified | How wide the streak is. Left unspecified, it is a share of the content's size. Must be positive. |
| `intensity` | `1f` | How strong the streak is, from 0 (none) to 1 (the full `color`). |

Every transition also has `.delay(...)`, `.easing(...)` and `.reducedMotion(...)`. See [Stagger](/effects/transition-stagger).

## Reduced motion

The transition becomes a fade over the same duration or shorter. There is no mask.

## Notes

- On exit the edge moves against `angle` and covers the content, with the streak on it.
- The mask and the streak are drawn without blur or shaders.

## Live example

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