Effects

Every Kapow effect in one table, with a one-line description of each.

Every effect is a factory on one class. Change effects are ChangeEffect.<name>(), conditional effects ConditionalEffect.<name>(), progress effects ProgressEffect.<name>(), and transitions KapowEnter.<name>() or KapowExit.<name>(). The guides explain how each kind is attached. The live demo shows all of them running.

Particle and movement effects fall back to a short fade with reduced motion.

Change effects

Attach with Modifier.changeEffect(value, effect). They play once each time value changes.

Effect	What it does
`shine`	A soft band of light sweeps across the element’s drawn pixels.
`pulse`	Rings or fills in the element’s shape grow outward behind it and fade.
`glow`	A colored halo flares up and fades. Quick repeats make it stronger, up to a limit.
`spray`	A burst of particles fans upward from the element, grows, then fades.
`rise`	One particle per change, such as “+1”, floats up from the element and fades.
`spin`	The element turns one or more full turns and settles where it started.
`ripple`	An ink ripple spreads from a point across the element, inside its shape, and fades.
`flash`	The element’s own pixels flash a color and fade back.
`burst`	A spiky comic star burst pops out behind the element and fades.
`speedLines`	Comic action lines fly outward from the element’s edges and vanish.
`sparkle`	Four-point stars twinkle in and out over the element, one after another.
`fireworks`	A spark climbs from the element, then bursts into a ring of sparks that fall and fade.
`confettiPop`	A short pop of confetti pieces bursts from the element, tumbles and falls away.
`trace`	A comet-like stroke runs once around the element’s outline, then disappears.
`strike`	A line draws across the middle of the element, holds, then fades.
`stamp`	The element comes down like a rubber stamp, squashes on impact and puffs dust.
`glitch`	The element splits into offset color channels and shifted slices, then snaps back.
`hearts`	A large heart pops over the element while small hearts float up and fade.

delay wraps any change effect so it starts a fixed time after the change.

Conditional effects

Attach with Modifier.conditionalEffect(condition, effect). They stay on while condition is true.

Effect	What it does
`repeat`	Plays a change effect when the condition turns true, then every interval while it stays true.
`glow`	A steady halo in the element’s shape that fades in and out with the condition.
`pushDown`	The element scales down slightly, as if pressed, and springs back.
`smoke`	Soft particles rise from the top of the element.
`borderBeam`	A short beam of light travels around the element’s outline, on a faint track.
`marchingAnts`	A dashed outline whose dashes keep moving, the look of a selection.
`rainbowBorder`	An outline stroked with a sweep of colors that turns around the element.
`sparkles`	Four-point stars keep twinkling in and out over the element, a few at a time.
`orbit`	A few particles circle the element on a tipped ellipse, smaller and fainter behind it.
`bubbles`	Small bubbles rise from the top of the element, wobble and pop.
`flame`	Procedural flames burn above the element, from overlapping puffs that turn from yellow to red.
`grayscale`	The element fades to gray, the disabled look.
`spotlight`	Everything around the element dims, with a soft edge around its shape.
`shimmer`	A band of light sweeps the element’s pixels again and again, with a pause between sweeps.
`breathe`	The element swells and settles on a slow loop, and can float, then rests on a spring.
`ping`	Rings grow out of the element’s outline and fade, one after another, in the element’s shape.
`confettiRain`	Confetti keeps falling from the element’s top edge, tumbling and fading, with a cap on how many are in the air.

Progress effects

Attach with Modifier.progressEffect(effect) { progress }. You control the progress from 0 to 1.

Effect	What it does
`shine`	A band of light whose position across the element follows the progress.
`glow`	A halo whose strength follows the progress.
`iris`	A circular reveal from an origin whose radius follows the progress.
`fill`	A liquid with a wavy surface fills the element from the bottom up to the progress.
`trace`	The element’s outline is drawn as a stroke up to the progress.

Transitions

Attach with Modifier.kapowTransition(scope, enter, exit) inside AnimatedVisibility or AnimatedContent, or use KapowAnimatedVisibility.

Transition	Enter	Exit	What it does
`iris`	yes	yes	A circle grows from an origin until it covers the content, or shrinks back.
`clock`	yes	yes	A sweep around an origin, clockwise from 12 o’clock, like a clock hand.
`wipe`	yes	yes	A straight edge moves across the content at an angle.
`glare`	yes	yes	A wipe with a bright streak along its edge.
`blinds`	yes	yes	Slats open or close like venetian blinds, optionally staggered.
`pop`	yes	no	The content scales in with an overshoot while a ring and a burst of particles go off behind it.
`anvil`	yes	no	The content drops in from above, lands with a shake and kicks up dust.
`poof`	no	yes	The content vanishes at once in a puff of smoke.
`dissolve`	yes	yes	A random grid of small squares turns the content on, or off, one square at a time.
`curtain`	yes	yes	Two halves part from the middle like a stage curtain, or close to hide the content.
`shapeIris`	yes	yes	Like iris, but the opening is any shape, such as a star, growing from an origin.
`checker`	yes	yes	A checkerboard of squares opens in two waves, one color after the other.
`tear`	yes	yes	A wipe at an angle whose leading edge is torn like paper.
`blob`	yes	yes	An organic, wobbling blob grows from an origin until it covers the content, or shrinks back.
`shatter`	no	yes	The content cracks into triangular shards that fall with gravity, turn and fade.
`disintegrate`	no	yes	A ragged band turns the content to dust, which drifts away in the content’s colors.

Every transition also takes .delay(...), .easing(...) and .reducedMotion(...). Stagger shows how to start the items of a list one after another.

Text

Composables for text and numbers that animate themselves.

Composable	What it does
`KapowTypewriter`	Text that types itself out one character at a time, or unscrambles from random glyphs, with an optional cursor.
`KapowCounter`	A number whose digits roll, or that counts, to a new value and settles exactly on it.

Pointer

Modifier	What it does
`kapowTilt`	The element tilts in 3D toward a hovering mouse or a pressed finger, with an optional light sheen, and springs back.
`kapowSkeleton`	A shimmering placeholder covers the element while it loads and fades away to reveal it, without moving anything.

Triggers

Modifier	What it does
`changeEffect(trigger, …)`	Plays a change effect each time you call `fire()`, with no value to watch.
`conditionalEffect(interactionSource, …)`	Keeps an effect on while the element is pressed, hovered, focused or dragged.
`edgeEffect`	Plays a change effect when a Boolean turns true, or false.