Claude
91f727ad61
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0119deVM65AKpJiLTLhEdDg9
63 lines
2.4 KiB
Markdown
63 lines
2.4 KiB
Markdown
# Narrative Structure
|
|
|
|
## Four-Act Structure
|
|
|
|
### Act 1: Anticipation (10-20%)
|
|
- Wind-up: small motion opposite to main direction
|
|
- Gathering: elements pull together before dispersing
|
|
- Dimming: context fades for focus; Tension: hold compressed ~50ms
|
|
- Skip for <150ms interactions and hover states
|
|
|
|
### Act 2: Action (30-50%)
|
|
Peak energy. The primary communicative motion.
|
|
- Fast+direct (sharp easing) → alerts
|
|
- Smooth+flowing (gentle easing, curves) → transitions
|
|
- Explosive+expanding (expo, radial) → celebrations
|
|
- Controlled+precise (linear-ish) → data charts
|
|
|
|
### Act 3: Reaction (10-20%)
|
|
- Shadows adjust: 50-100ms after primary
|
|
- Siblings shift: 50-150ms after primary
|
|
- Environment ripples: 100-200ms after primary
|
|
- Counter-motion: simultaneous with action
|
|
- Skip for simple toggles/checkboxes
|
|
|
|
### Act 4: Resolution (20-30%)
|
|
- Overshoot settle (spring/back-easing); opacity reaches final (ease-out)
|
|
- 100-200ms breathing room before next motion
|
|
- Even 50ms of settling transforms the feel
|
|
|
|
## Scaling to Duration
|
|
|
|
| Total | Anticipation | Action | Reaction | Resolution |
|
|
|-------|-------------|--------|----------|------------|
|
|
| 100-200ms | skip | 60-70% | skip | 30-40% |
|
|
| 200-400ms | 10-15% | 40-50% | 10-15% | 25-30% |
|
|
| 400-800ms | 15-20% | 30-40% | 15-20% | 20-25% |
|
|
| 800ms+ | 20% | 30-35% | 15-20% | 25-30% |
|
|
|
|
## Multi-Beat Narratives
|
|
|
|
Transitions: overlap (fluid) | sequential (clear) | simultaneous (parallel)
|
|
|
|
Progressions:
|
|
- **Build-Up**: low → rising → peak → settling
|
|
- **Cycle**: depart → peak → return → repeat
|
|
- **Impact**: sudden action → ripple → slow settle
|
|
|
|
## By Personality
|
|
|
|
| Personality | Anticipation | Action | Resolution |
|
|
|------------|-------------|--------|------------|
|
|
| Playful | Exaggerated wind-up | Bouncy, overshoot | Wobble settle |
|
|
| Premium | Subtle tension | Smooth, controlled | Elegant ease |
|
|
| Corporate | Minimal/none | Direct, efficient | Clean stop |
|
|
| Energetic | Quick gather | Explosive | Fast snap |
|
|
|
|
## Common Patterns
|
|
|
|
- **Reveal**: tension (dim, scale 95%) → emerge (100%, full opacity) → surroundings adjust → settled
|
|
- **Departure**: gather (scale 98%) → exit → close gap → layout settles
|
|
- **Transformation**: destabilize (vibration) → morph → secondary appears → new state breathing
|
|
- **Celebration**: compress (50-100ms) → burst (scale, particles) → settle → calm with positive state
|