---
title: Effects
description: 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](/guides/change-effects) explain how each kind is attached. The [live demo](https://kapow-demo.vercel.app) shows all of them running.

Particle and movement effects fall back to a short fade with [reduced motion](/guides/reduced-motion).

## Change effects

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

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

[`delay`](/effects/change-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`](/effects/conditional-repeat) | Plays a change effect when the condition turns true, then every interval while it stays true. |
| [`glow`](/effects/conditional-glow) | A steady halo in the element's shape that fades in and out with the condition. |
| [`pushDown`](/effects/conditional-push-down) | The element scales down slightly, as if pressed, and springs back. |
| [`smoke`](/effects/conditional-smoke) | Soft particles rise from the top of the element. |
| [`borderBeam`](/effects/conditional-border-beam) | A short beam of light travels around the element's outline, on a faint track. |
| [`marchingAnts`](/effects/conditional-marching-ants) | A dashed outline whose dashes keep moving, the look of a selection. |
| [`rainbowBorder`](/effects/conditional-rainbow-border) | An outline stroked with a sweep of colors that turns around the element. |
| [`sparkles`](/effects/conditional-sparkles) | Four-point stars keep twinkling in and out over the element, a few at a time. |
| [`orbit`](/effects/conditional-orbit) | A few particles circle the element on a tipped ellipse, smaller and fainter behind it. |
| [`bubbles`](/effects/conditional-bubbles) | Small bubbles rise from the top of the element, wobble and pop. |
| [`flame`](/effects/conditional-flame) | Procedural flames burn above the element, from overlapping puffs that turn from yellow to red. |
| [`grayscale`](/effects/conditional-grayscale) | The element fades to gray, the disabled look. |
| [`spotlight`](/effects/conditional-spotlight) | Everything around the element dims, with a soft edge around its shape. |
| [`shimmer`](/effects/conditional-shimmer) | A band of light sweeps the element's pixels again and again, with a pause between sweeps. |
| [`breathe`](/effects/conditional-breathe) | The element swells and settles on a slow loop, and can float, then rests on a spring. |
| [`ping`](/effects/conditional-ping) | Rings grow out of the element's outline and fade, one after another, in the element's shape. |
| [`confettiRain`](/effects/conditional-confetti-rain) | 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`](/effects/progress-shine) | A band of light whose position across the element follows the progress. |
| [`glow`](/effects/progress-glow) | A halo whose strength follows the progress. |
| [`iris`](/effects/progress-iris) | A circular reveal from an origin whose radius follows the progress. |
| [`fill`](/effects/progress-fill) | A liquid with a wavy surface fills the element from the bottom up to the progress. |
| [`trace`](/effects/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`](/effects/transition-iris) | yes | yes | A circle grows from an origin until it covers the content, or shrinks back. |
| [`clock`](/effects/transition-clock) | yes | yes | A sweep around an origin, clockwise from 12 o'clock, like a clock hand. |
| [`wipe`](/effects/transition-wipe) | yes | yes | A straight edge moves across the content at an angle. |
| [`glare`](/effects/transition-glare) | yes | yes | A wipe with a bright streak along its edge. |
| [`blinds`](/effects/transition-blinds) | yes | yes | Slats open or close like venetian blinds, optionally staggered. |
| [`pop`](/effects/transition-pop) | yes | no | The content scales in with an overshoot while a ring and a burst of particles go off behind it. |
| [`anvil`](/effects/transition-anvil) | yes | no | The content drops in from above, lands with a shake and kicks up dust. |
| [`poof`](/effects/transition-poof) | no | yes | The content vanishes at once in a puff of smoke. |
| [`dissolve`](/effects/transition-dissolve) | yes | yes | A random grid of small squares turns the content on, or off, one square at a time. |
| [`curtain`](/effects/transition-curtain) | yes | yes | Two halves part from the middle like a stage curtain, or close to hide the content. |
| [`shapeIris`](/effects/transition-shape-iris) | yes | yes | Like iris, but the opening is any shape, such as a star, growing from an origin. |
| [`checker`](/effects/transition-checker) | yes | yes | A checkerboard of squares opens in two waves, one color after the other. |
| [`tear`](/effects/transition-tear) | yes | yes | A wipe at an angle whose leading edge is torn like paper. |
| [`blob`](/effects/transition-blob) | yes | yes | An organic, wobbling blob grows from an origin until it covers the content, or shrinks back. |
| [`shatter`](/effects/transition-shatter) | no | yes | The content cracks into triangular shards that fall with gravity, turn and fade. |
| [`disintegrate`](/effects/transition-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](/effects/transition-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`](/effects/text-typewriter) | Text that types itself out one character at a time, or unscrambles from random glyphs, with an optional cursor. |
| [`KapowCounter`](/effects/text-counter) | A number whose digits roll, or that counts, to a new value and settles exactly on it. |

## Pointer

| Modifier | What it does |
| --- | --- |
| [`kapowTilt`](/effects/more-tilt) | The element tilts in 3D toward a hovering mouse or a pressed finger, with an optional light sheen, and springs back. |
| [`kapowSkeleton`](/effects/more-skeleton) | 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, …)`](/effects/more-trigger) | Plays a change effect each time you call `fire()`, with no value to watch. |
| [`conditionalEffect(interactionSource, …)`](/effects/more-interaction) | Keeps an effect on while the element is pressed, hovered, focused or dragged. |
| [`edgeEffect`](/guides/triggers) | Plays a change effect when a Boolean turns true, or false. |