@editframe/create 0.44.0 → 0.45.0

package/dist/skills/editframe-motion-design/references/2-physics-model.md

@@ -0,0 +1,405 @@
+---
+title: Physics Model
+description: How material weight, elasticity, and applied force shape motion profiles — spring, gravity, and friction in animation.
+type: explanation
+order: 2
+---
+
+# Physics Model
+
+## Core Concept
+
+**Material + Weight + Force = Motion Profile**
+
+Objects have physical properties that determine how they move. Express these through timing, deformation, and easing curves.
+
+## Quick Reference
+
+### Context Base Durations
+
+- **Social media (mobile)**: 200-400ms (fast-paced, attention-grabbing)
+- **Explainer videos**: 500-800ms (clear, readable)
+- **Cinematic**: 1000-1600ms (dramatic, luxurious)
+- **Transitions**: 300-600ms (context-dependent)
+
+### Frame Rate Considerations
+
+At **24fps**: 1 frame = ~42ms (round to multiples of 42ms)  
+At **30fps**: 1 frame = ~33ms (round to multiples of 33ms)  
+At **60fps**: 1 frame = ~17ms (round to multiples of 17ms)
+
+Use frame-aligned timing for smooth motion.
+
+### Weight Multipliers
+
+- **Heavy**: 1.5-2.0× base duration (large text blocks, full-screen graphics)
+- **Medium**: 1.0× base duration (title cards, standard elements)
+- **Light**: 0.5-0.7× base duration (small icons, decorative elements)
+
+### Duration Calculation Formula
+
+```
+Duration = Material.base × WeightMultiplier × DistanceFactor
+
+Example:
+Paper title card (800ms base) × Medium weight (1.0×) × 200px movement (2.0×)
+= 800 × 1.0 × 2.0 = 1600ms
+
+At 30fps: 1600ms ÷ 33ms = ~48 frames
+At 24fps: 1600ms ÷ 42ms = ~38 frames
+```
+
+## Material Properties (Source of Truth)
+
+Every animation chooses a material metaphor. The material determines all motion characteristics.
+
+### Complete Material Matrix
+
+| Material | Base Duration | Deformation | Bounce | Friction | Density |
+|----------|---------------|-------------|---------|----------|---------|
+| Feather  | 2000ms        | 80%         | 0%      | Low      | Very low |
+| Paper    | 800ms         | 30-40%      | 10%     | Medium   | Low |
+| Leather  | 500ms         | 20-30%      | 15%     | High     | Medium |
+| Rubber   | 600ms         | 60-80%      | 80%     | High     | Medium |
+| Wood     | 500ms         | 5-10%       | 20%     | Medium   | Medium |
+| Plastic  | 350ms         | 10-20%      | 30%     | Low      | Medium |
+| Glass    | 400ms         | 0%          | 25%     | Low      | Medium-high |
+| Metal    | 300ms         | 0-5%        | 5%      | Medium   | High |
+| Stone    | 600ms         | 0%          | 5%      | High     | Very high |
+| Liquid   | 1400ms        | 100%        | 0%      | Variable | Low |
+
+### Deriving Motion from Material
+
+**Material determines timing:**
+```
+Playful logo (rubber):
+  Duration: 600ms (rubber base)
+  Deformation: scaleY(0.7) scaleX(1.3)
+  Bounce: Returns past resting point by 80%
+  Use: Fun brands, celebration moments
+  
+Professional title card (glass):
+  Duration: 400ms (glass base)
+  Deformation: None (rigid)
+  Bounce: Minimal overshoot (5%)
+  Use: Corporate, technical content
+```
+
+**Consistency rule:** All elements of the same material move similarly throughout the composition.
+
+## Weight Scaling
+
+Weight multiplies base duration and affects deformation:
+
+### Weight Categories
+
+**Light (0.5-0.7× base):**
+- Small tooltips, badges, chips
+- Fast start, floaty motion
+- Minimal deformation (barely compresses)
+- Example: Paper badge = 800ms × 0.6 = 480ms
+
+**Medium (1.0× base):**
+- Standard UI elements, cards, buttons
+- Balanced motion
+- Standard material deformation
+- Example: Paper card = 800ms × 1.0 = 800ms
+
+**Heavy (1.5-2.0× base):**
+- Large modals, full-page transitions
+- Slow start (inertia), momentum carries
+- Increased deformation (more impact)
+- Example: Paper modal = 800ms × 1.8 = 1440ms
+
+### Volume Conservation
+
+When objects deform, volume stays constant:
+
+```
+Volume = Width × Height = constant
+
+Normal:    scaleX(1.0)  × scaleY(1.0)  = 1.0
+Squashed:  scaleX(1.25) × scaleY(0.8)  = 1.0
+Stretched: scaleX(0.85) × scaleY(1.3)  = 1.1 (close enough)
+```
+
+Compress one axis → expand the other proportionally.
+
+## Force Applied (Easing)
+
+Easing curves represent forces acting on objects:
+
+### Gravity
+
+**Falling (ease-in - accelerating):**
+```
+Object falls, gravity pulls harder over time
+cubic-bezier(0.55, 0, 1, 0.45)
+```
+
+**Rising (ease-out - decelerating):**
+```
+Object thrown upward, gravity slows it
+cubic-bezier(0, 0.55, 0.45, 1)
+```
+
+### Entrances vs Exits
+
+**Entrance (ease-out):**
+Object enters viewport, needs to decelerate to stop
+```
+Starting with momentum, slowing to rest
+0% → fast → slow → 100%
+```
+
+**Exit (ease-in):**
+Object accelerates away, doesn't need to stop
+```
+Starting at rest, speeding up to leave
+0% → slow → fast → 100%
+```
+
+**Within-screen (ease-in-out):**
+Object moves from A to B on screen, must start and stop
+```
+Starting at rest, accelerating, then decelerating
+0% → slow → fast → slow → 100%
+```
+
+### Spring Physics
+
+**For elastic materials (rubber, plastic):**
+
+```javascript
+// Tight spring (professional UI)
+stiffness: 300
+damping: 30
+= Quick snap, 1-2 oscillations
+
+// Loose spring (playful UI)  
+stiffness: 100
+damping: 15
+= Gentle motion, 3-4 oscillations
+
+// Critically damped (precise)
+stiffness: 200
+damping: 28 (2 × √stiffness)
+= Fastest approach without overshoot
+```
+
+Maps to cubic-bezier:
+```
+Tight spring:   cubic-bezier(0.68, -0.1, 0.265, 1.1)
+Loose spring:   cubic-bezier(0.68, -0.55, 0.265, 1.55)
+Critically damped: cubic-bezier(0.36, 0, 0.66, 1)
+```
+
+## Distance Scaling
+
+Duration scales with distance traveled:
+
+```
+Base distance: 100px
+Base duration: Material.base
+
+Distance factor = actualDistance / 100px
+
+Final duration = Material.base × Weight × DistanceFactor
+```
+
+**Example:**
+```
+Paper card (800ms base)
+Medium weight (1.0×)
+Moving 250px (2.5×)
+= 800 × 1.0 × 2.5 = 2000ms
+```
+
+**Practical limits:**
+- Don't scale linearly beyond 3× distance (feels too slow)
+- Use √distance for very long movements
+- Example: 400px → use √4 = 2× instead of 4×
+
+## Friction and Drag
+
+**High friction (rough surfaces):**
+```
+Slow, constant deceleration
+Longer timing
+cubic-bezier(0.4, 0.1, 0.6, 0.9)
+Use for: Dragging, scrubbing, sliders
+```
+
+**Low friction (smooth surfaces):**
+```
+Maintains speed, sharp stop
+Faster timing
+cubic-bezier(0.1, 0.7, 0.3, 1)
+Use for: Swipes, throws, momentum scroll
+```
+
+## Bounce Dynamics
+
+**Realistic bounce sequence:**
+```
+Drop from height H, duration D
+
+Bounce 1: H × 100%, D × 100%
+Bounce 2: H × 70%,  D × 70%
+Bounce 3: H × 49%,  D × 49%
+Bounce 4: H × 34%,  D × 34%
+```
+
+Each bounce is ~70% of previous height and duration.
+
+**Simplified UI bounce (single overshoot):**
+```javascript
+// Button scale bounce
+element.animate([
+  { transform: 'scale(0)' },
+  { transform: 'scale(1.08)' },  // 8% overshoot
+  { transform: 'scale(1)' }
+], {
+  duration: 400,
+  easing: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)'
+});
+```
+
+## Inertia and Momentum
+
+**Heavy objects resist changes:**
+
+```
+Phase 1: Overcome inertia (slow start)
+  Duration: 40% of total
+  Easing: Slow at start
+  
+Phase 2: Momentum builds (constant speed)
+  Duration: 30% of total
+  Easing: Linear
+  
+Phase 3: Decelerate to stop (slow end)
+  Duration: 30% of total
+  Easing: Slow at end
+```
+
+**Direction changes require momentum decay:**
+```
+Moving right → stop → move left
+
+Cannot change instantly. Must:
+1. Decelerate to stop (200ms, ease-in)
+2. Pause (50-100ms, shows momentum lost)
+3. Accelerate new direction (250ms, ease-out)
+```
+
+## Implementation Pattern
+
+**Determine material, weight, distance:**
+```
+1. Material (from intent): Glass
+2. Weight: Medium (standard button)
+3. Distance: 50px
+4. Force: Gravity (falling in)
+
+Calculation:
+Base: 400ms (glass)
+Weight: 1.0× (medium)
+Distance: 0.5× (50px vs 100px base)
+= 400 × 1.0 × 0.5 = 200ms
+
+Easing: ease-in (falling)
+Deformation: 0% (glass doesn't compress)
+Bounce: 25% overshoot
+
+Result:
+duration: 200ms
+transform: translateY(-50px) → translateY(0) → translateY(-12.5px) → translateY(0)
+easing: cubic-bezier(0.55, 0, 1, 0.45) for fall, then bounce
+```
+
+## Common Animation Patterns for Video
+
+### Title Card Entrance (400-600ms, ease-out)
+```
+At 30fps (12-18 frames):
+opacity: 0 → 1
+translateY: 40px → 0
+scale: 0.95 → 1
+```
+
+### Title Card Exit (300-400ms, ease-in, 30% faster)
+```
+At 30fps (9-12 frames):
+opacity: 1 → 0
+translateY: 0 → -30px
+```
+
+### Logo Animation (800ms, bounce)
+```
+At 30fps (24 frames):
+scale: 0 → 1.15 → 0.95 → 1
+rotation: 0 → 5 → -3 → 0
+easing: bounce/elastic
+```
+
+### Scene Transition - Wipe (500ms)
+```
+At 30fps (15 frames):
+clipPath: inset(0 0 0 100%) → inset(0 0 0 0%)
+easing: ease-in-out
+```
+
+### Scene Transition - Cross-dissolve (800ms)
+```
+At 30fps (24 frames):
+Outgoing scene opacity: 1 → 0
+Incoming scene opacity: 0 → 1
+Overlap: 100% (simultaneous)
+```
+
+### Text Reveal - Typewriter
+```
+Per character: 50ms (1-2 frames at 30fps)
+Total for 20 characters: ~1000ms
+```
+
+### Emphasis Pulse (600ms)
+```
+At 30fps (18 frames):
+scale: 1 → 1.1 → 1
+opacity: 1 → 1 → 1 (maintain)
+Used for: Drawing attention to key information
+```
+
+## Common Physics Errors
+
+**Error: Ignoring weight**
+```
+Bad: Full-screen graphic animates in 300ms (too fast for size)
+Fix: Apply heavy multiplier: 300ms × 1.8 = 540ms
+```
+
+**Error: Violating volume conservation**
+```
+Bad: scaleX(1.5) scaleY(1.5) on squash (volume increases unnaturally)
+Fix: scaleX(1.5) scaleY(0.67) (volume stays constant)
+```
+
+**Error: Wrong easing direction**
+```
+Bad: Title entrance with ease-in (feels like accelerating into wall)
+Fix: Title entrance with ease-out (decelerating to rest)
+```
+
+**Error: Inconsistent material**
+```
+Bad: Title card has paper timing (800ms) but metal deformation (2%)
+Fix: Use paper deformation (35%) to match timing
+```
+
+**Error: Not frame-aligned**
+```
+Bad: 347ms animation at 30fps (10.4 frames - fractional)
+Fix: 330ms (10 frames) or 363ms (11 frames) - whole frame counts
+```