---
title: "Change: speed lines"
description: Comic action lines fly out from an element's edges when a value changes.
---

Speed lines throw short strokes out from every side of the element, like the lines a comic artist draws around something that just rang, shook or got hit. Use them for an alert that should feel loud without changing the element itself: an incoming call, an alarm, a timer that ran out.

## Usage

The sample throws violet lines around a caller's avatar on every ring.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
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 CallerAvatar(rings: Int) {
    Box(
        Modifier
            .size(64.dp)
            .changeEffect(rings, ChangeEffect.speedLines(color = Color(0xFF6B62F2), count = 14))
            .background(Color(0xFF6B62F2), CircleShape),
    )
}
```

## Parameters

| Parameter | Default | Description |
| --- | --- | --- |
| `color` | `Color(0xFF6B62F2)` | Color of the lines. |
| `count` | `12` | How many lines go around the element. Must be positive. |
| `length` | `Dp.Unspecified` | How far the longest line reaches. Unspecified uses half the element's shorter side, between 16 and 40 dp. Must be positive. |
| `thickness` | `3.dp` | The width of the widest line. Must be positive. |
| `innerRadius` | `6.dp` | The gap between the element's edge and where the lines start. |
| `taper` | `0f` | How much each line narrows towards its outer end, from 0 (an even line with round ends) to 1 (ending in a point). |
| `directions` | `SpeedLineDirections.All` | Which way the lines point: `All`, `Horizontal` and `Vertical` (two fans each) or `Arc` (over the top). |
| `duration` | `500.milliseconds` | How long the lines take to fly out and vanish. Must be positive. |
| `easing` | `LinearEasing` | The curve of the flight. |
| `seed` | `0` | The first seed. Each change takes the next one. |

## Reduced motion

No lines appear. The element brightens briefly instead. With `reducedMotion(ReducedMotionMode.EndState)` nothing shows at all, since the effect ends at rest.

## Notes

- The lines are spread evenly around a full turn, each nudged a little so the ring looks drawn by hand. Every change picks a new arrangement from a fixed seed, so it is the same from run to run.
- Each line starts 6 dp outside the element's bounding box. The longest is half the element's shorter side, kept between 16 dp and 40 dp. Lines are up to 3 dp wide with round ends.
- The outer end of each line shoots out first and the inner end follows, so the lines fly off and are gone after 0.5 s.
- The lines are drawn outside the element's bounds. A parent that clips its children clips them too.
- There is no cooldown. Nothing extra is drawn or allocated at rest.

## Live example

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