Claude
91f727ad61
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0119deVM65AKpJiLTLhEdDg9
107 lines
2.8 KiB
Markdown
107 lines
2.8 KiB
Markdown
# 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% |
|