Skip to content
Kapow
Esc
↑↓navigate↵open⌘Jpreview
On this page

Change: fireworks

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.

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 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

Was this page helpful?