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

Change: burst

A spiky comic star burst pops out behind an element when a value changes.

Burst pops a spiky star out from behind the element, like the “KAPOW!” balloon in a comic. It overshoots a little, turns slightly and fades. Use it for a moment worth celebrating: a level up, a new record, an achievement.

Usage

The sample pops an amber burst behind a level badge each time the level goes up.

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.foundation.text.BasicText
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
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 LevelBadge(level: Int) {
    Box(
        Modifier
            .size(72.dp)
            .changeEffect(level, ChangeEffect.burst(color = Color(0xFFFFB547), spikes = 14))
            .background(Color(0xFF161616), CircleShape),
        contentAlignment = Alignment.Center,
    ) {
        BasicText("$level")
    }
}

Parameters

Parameter Default Description
color Color(0xFFFFB547) Color of the burst. Its core is the same color mixed about halfway with white.
spikes 12 How many points the burst has. Must be at least 3.
sizeScale 1f A factor on how far the burst reaches. Must be positive.
coreColor Color.Unspecified The color of the lighter core. Unspecified lightens color.
rotation 14f How many degrees the burst turns while it plays.
overshoot 0.15f How far past its full size the burst pops, as a fraction of it. Must not be negative.
innerRatio 0.72f The size of the core as a fraction of the burst’s, from 0 to 1.
anchor TransformOrigin.Center Where the burst is centered, as fractions of the element’s width and height.
inFront false Draws the burst over the element instead of behind it.
outline 0.dp The width of an outline around the burst. 0 draws none.
outlineColor Color(0xFF1B1B1F) The color of the outline.
duration 600.milliseconds How long the burst takes to pop and fade. Must be positive.
seed 0 The first seed. Each change takes the next one, so the same seed gives the same outlines.

Reduced motion

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

Notes

  • The burst is centered on the element. Its tips reach past the element’s corners by half its shorter side, at most 28 dp, and its notches sit close to the corners.
  • Every burst has a slightly different, hand-drawn outline. The outlines come from a fixed seed, so they are the same from run to run.
  • It pops from 30 % to 115 % of its size in the first 0.18 s, then fades over the rest of its 0.6 s while easing back a little.
  • The burst is drawn behind the element’s content. A parent that clips its children clips the burst too.
  • There is no cooldown. A change while a burst is showing starts a new one.

Live example

Was this page helpful?