Brown Belt ~15 min
Motion Kata
Design consistent, natural motion
Why This Kata
Motion either builds trust or breaks it – there's rarely a neutral middle ground. This Kata starts with the raw curve, moves to timing, and ends with a real loading state, so every animation decision is grounded in the last.
MicrointeractionA contained, single-purpose moment – a toggle switching, a like animating – that gives feedback and makes an interface feel responsive and alive.
Cognitive LoadThe total mental effort required to complete a task in an interface – every label, option, and decision adds to it until users slow down or give up.
0 / 3 steps complete
0/36 interactions
45s active time left
Easing preset
Curve
cubic-bezier(0.40, 0.00, 0.20, 1.00)
Preview
Confirm action
This can't be undone. Are you sure you want to continue?
Confirm
Cancel
300ms
100ms1000ms
Material StandardGoogle
Material Design's primary easing.
Best for: Most UI animations