Timing & Easing Tables
Duration by Element Type
| Element |
Duration |
| Tooltip / micro-feedback |
80-120ms |
| Button / toggle |
120-180ms |
| Icon transition |
150-250ms |
| Card enter/exit |
200-350ms |
| Modal / dialog |
300-400ms |
| Page transition |
400-600ms |
| Dramatic reveal |
600-1200ms |
| Ambient |
2000-20000ms |
Distance-Duration Scaling
50px=0.8x | 100px=1.0x | 200px=1.3x | 300px=1.5x | 400px=1.6x | Full screen=1.8-2.0x
Enter vs. Exit
Entrance = base (100%). Exit = 65-75% of entrance.
Interactive Feedback
| Interaction |
Max Latency |
| Hover |
<100ms |
| Press/tap |
<150ms |
| Release/settle |
200-300ms |
| Error shake |
300-400ms |
| Long press |
500-800ms |
| Drag start |
<50ms |
Duration by Personality
| Personality |
Quick |
Standard |
Slow |
| Playful |
150ms |
250ms |
400ms |
| Premium |
350ms |
500ms |
800ms |
| Corporate |
200ms |
300ms |
450ms |
| Energetic |
100ms |
180ms |
300ms |
Easing: Directional Rules
Entrance=ease-out | Exit=ease-in | On-screen=ease-in-out | Looping=sine | Rotation/progress=linear
Easing: Industry Standards
| Name |
Cubic Bezier |
Use |
| MD3 Standard |
(0.2, 0, 0, 1) |
Default on-screen |
| MD3 Emphasized |
(0.05, 0.7, 0.1, 1) |
Entrances |
| MD3 Accelerate |
(0.3, 0, 1, 1) |
Exits |
| MD3 Decelerate |
(0, 0, 0, 1) |
Entering |
| Apple HIG |
(0.25, 0.1, 0.25, 1) |
iOS default |
| Apple Spring |
stiffness:300 damping:20 |
Interactive |
| Snappy UI |
(0.2, 0, 0, 1) |
Fast, decisive |
| Gentle float |
(0.4, 0, 0.2, 1) |
Ambient |
| Bounce settle |
(0.175, 0.885, 0.32, 1.275) |
Playful |
| Elastic snap |
(0.68, -0.55, 0.265, 1.55) |
Dramatic |
Material-Based Easing
| Material |
Duration Scale |
Overshoot |
| Rigid (metal) |
1.2x |
0% |
| Elastic (rubber) |
0.8x |
15-25% |
| Fluid (water) |
1.5x |
5% |
| Paper (cards) |
1.0x |
3-5% |
| Gas (smoke) |
2.0x |
0% |
| Glass |
0.9x |
0% |
Spring Parameters
| Feel |
Stiffness |
Damping |
| Very stiff |
400+ |
25-30 |
| Standard |
250-350 |
18-24 |
| Bouncy |
150-250 |
10-15 |
| Very bouncy |
100-200 |
5-10 |
| Gentle |
100-150 |
20-25 |
Damping: <1.0=oscillates, 1.0=fastest no-oscillation, >1.0=slow settle.
Stagger Patterns
| Pattern |
Delay |
Budget |
| Micro cascade |
20-40ms |
<200ms |
| Standard |
50-100ms |
<400ms |
| Dramatic |
100-200ms |
<600ms |
| Wave |
30-60ms |
<500ms |
Direction: top-to-bottom (lists) | L-to-R (horizontal) | center-out (hero) | random (organic) | reverse (exits)
Total stagger MUST stay <500ms.
Overshoot Budget
| Context |
Overshoot |
| Success |
5-10% |
| Error |
0% |
| Feedback |
2-5% |
| Celebration |
15-25% |
| Premium |
0% |
Claude
91f727ad61