# 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