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

Change: stamp

An element comes down like a rubber stamp, squashes on impact and puffs dust when a value changes.

Stamp brings the element down from slightly larger than its size, as if it were pressed onto the page. It lands with a squash, settles with one small rebound and puffs dust out at its base. Use it for a verdict: approved, rejected, verified, sold.

Usage

The sample stamps an “Approved” label when a report’s status changes.

import androidx.compose.foundation.border
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicText
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.rotate
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.dp
import com.jantursky.kapow.ChangeEffect
import com.jantursky.kapow.changeEffect

@Composable
fun StatusStamp(status: String) {
    val coral = Color(0xFFFF6B5A)
    BasicText(
        text = status.uppercase(),
        style = TextStyle(color = coral),
        modifier = Modifier
            .changeEffect(status, ChangeEffect.stamp(scale = 1.4f))
            .rotate(-8f)
            .border(2.dp, coral, RoundedCornerShape(6.dp))
            .padding(horizontal = 10.dp, vertical = 4.dp),
    )
}

Parameters

Parameter Default Description
scale 1.3f How much larger the element starts. Must be at least 1.
dustColor Color(0xFFB0B0B0) Color of the dust puffs at the base.
duration 560.milliseconds How long the stamp takes from the start of the drop to the end of the rebound. A quarter of it is the drop. Must be positive.
squash 0.1f How flat the impact squashes the element, as a fraction of its size, from 0 to 0.5.
rebound 1f How much the element springs back after the squash, from 0 (settles at once) to 1.
dustCount 5 How many puffs of dust fly out to each side. 0 leaves out the dust.
dustSize 8.dp The size of a puff of dust. Must be positive.
dustSpread 1f How far the dust flies, as a factor on the standard.
tilt 0f How many degrees the element is turned as it starts to drop. It levels out as it lands.
origin TransformOrigin.Center The point the element drops around, as fractions of its width and height.
seed 0 The first seed. Each landing takes the next ones, so the same seed gives the same dust.

Reduced motion

The element does not move or scale and no dust is puffed. It brightens briefly. With reducedMotion(ReducedMotionMode.EndState) nothing shows at all, since the effect ends at rest.

Notes

  • The drop takes 0.14 s and speeds up as it comes down, starting faint and turning fully opaque as it lands. The squash and the settle take another 0.42 s.
  • The squash flattens the element by up to 10 % and widens it by 7 %, with its base kept on the ground. There is one small rebound and no shake.
  • The dust runs out sideways from both bottom corners. It draws through a particle layer when there is one above the element.
  • Scaling happens in the element’s own graphics layer, so the layout around it does not move.
  • There is no cooldown. A change during a stamp starts it again from the top.

Live example

Was this page helpful?