---
title: "Change: fireworks"
description: A rocket climbs from an element and bursts into a ring of falling sparks when a value changes.
---

Fireworks sends a spark up from the top of the element, leaving a short trail of embers, then bursts it into a ring of colored sparks that slow down, fall and fade. It is the biggest celebration in the set. Use it for a rare moment, such as a finished goal or a long streak, rather than for every tap.

## Usage

The sample sets off fireworks above a streak card each time the streak grows. It uses a particle layer so the sparks are not clipped by the screen's layout.

```kotlin
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.text.BasicText
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import com.jantursky.kapow.ChangeEffect
import com.jantursky.kapow.KapowParticleLayer
import com.jantursky.kapow.changeEffect

@Composable
fun StreakScreen(days: Int) {
    KapowParticleLayer(Modifier.fillMaxSize()) {
        BasicText(
            text = "$days-day streak",
            modifier = Modifier.changeEffect(
                value = days,
                effect = ChangeEffect.fireworks(
                    colors = listOf(Color(0xFFFFB547), Color(0xFFFF6B5A)),
                    count = 36,
                ),
            ),
        )
    }
}
```

## Parameters

| Parameter | Default | Description |
| --- | --- | --- |
| `colors` | `ParticleContent.DefaultColors` | Colors of the sparks, taken in turn: amber, coral, violet and cobalt by default. The rocket and its trail are the first color, lightened. Must not be empty. |
| `count` | `28` | How many sparks the explosion throws. Must be positive. |
| `rocketHeight` | `100.dp` | How high the rocket climbs before it bursts. Must be positive. |
| `rocketDuration` | `450.milliseconds` | How long the climb takes. Must be positive. |
| `burstRadius` | `Dp.Unspecified` | About how far the sparks fly. Unspecified keeps the standard 100 dp. |
| `trailLength` | `1f` | How long the embers behind the rocket last, as a factor on the standard. 0 leaves no trail. |
| `particleSize` | `7.dp` | The size of the rocket and the sparks. Must be positive. |
| `origin` | `TransformOrigin(0.5f, 0f)` | Where the rocket launches from, as fractions of the element's width and height. The default is the middle of the top edge. |
| `physics` | `ParticlePhysics.Default` | How the sparks of the explosion move: direction and spread, speed, gravity, drag, lifetime, spin, scales, fade, emission area, blend mode and color pick. The rocket and its trail ignore it, and so does `size`: use `particleSize`. |
| `seed` | `0` | The first seed. Each change takes the next ones. |

## Reduced motion

Nothing is launched. The element brightens briefly instead. With `reducedMotion(ReducedMotionMode.EndState)` nothing shows at all, since the effect ends at rest.

## Notes

- The rocket starts at the middle of the element's top edge and climbs 100 dp in 0.45 s, slowing to a stop where it bursts. Leave room above the element, or put a [particle layer](/guides/particle-layer) around the screen so the sparks can draw over other content.
- The sparks fly out in a ring at nearly the same speed, are braked by the air and pulled down, and are gone about 1.2 s after the burst. A soft glare lights the burst point for 0.3 s.
- Every change picks a new explosion from a fixed seed, so it is the same from run to run.
- Particles that are in flight do not follow the element if it moves or scrolls.
- There is no cooldown. Quick changes set off overlapping fireworks.

## Live example

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