Animation Browser

6 motion components

CelebrationOverlay

Full-screen confetti particle burst for review milestones

Timing

fade Out Start
1050ms
title In
450ms
total
1500ms

Curves

fade Out easeOut
title Scale elasticOut

Springs

particle Physics

Mass 1
Stiffness 120
Damping 8
Underdamped (0.37)

Accessibility

prefers reduced motiondisable animations

MotionCurves

Named easing curves and physics springs — semantic motion vocabulary

Curves

entrance easeOut
expressive easeOutBack
productive easeInOutCubic

Springs

bouncy

Mass 1
Stiffness 150
Damping 10
Underdamped (0.41)

gentle

Mass 1
Stiffness 200
Damping 15
Underdamped (0.53)

Accessibility

prefers reduced motiondisable animations

MotionTiming

Named duration palette — IBM Carbon-inspired timing scale for consistent animation pacing

Timing

fast01
70ms
fast02
110ms
moderate01
150ms
moderate02
240ms
slow01
400ms

Accessibility

prefers reduced motiondisable animations

NavigationMotion

Platform-aware navigation transitions — bottom bar, segments, and page changes

Timing

segment Switch
150ms

Curves

segment Switch easeInOutCubic

Accessibility

prefers reduced motiondisable animations

PressableFeedback

Tactile scale-down feedback with haptic response on tappable elements

Timing

forward
150ms
reverse
240ms

Curves

forward easeInQuad
reverse easeOutBack

Accessibility

prefers reduced motiondisable animations

StreakBurst

Radial particle burst celebrating streak milestones

Timing

total
600ms

Accessibility

prefers reduced motiondisable animations