---
name: editframe-motion-design
title: Motion Design
description: Professional motion graphics for video content — animations, transitions, title sequences, and time-based visual design for video production.
order: 40
license: MIT
status: draft
metadata:
  author: editframe
  version: "2.0"
---

# Motion Design

**For Video Content Creation**

Motion serves communication, not decoration. Every animation must guide attention and express intent.

## The 4 Core Concepts

All motion design derives from these four ideas:

### [1. Intent → Strategy](references/1-intent.md)
Message + Emotion → Motion characteristics

What should the viewer feel? This determines material selection and personality.

### [2. Physics Model](references/2-physics-model.md)
Material + Weight + Force → Timing + Deformation + Easing

Material properties determine how objects move. Contains reference tables for durations, deformation, bounce, and easing curves.

### [3. Attention Flow](references/3-attention.md)
One focus at a time. Sequence everything.

Plan viewer focus flow. Contains stagger patterns, timing, and sequencing strategies.

### [4. Systematic Iteration](references/4-process.md)
Broad strokes → Easing → Secondary → Polish

Don't perfect details before structure is right. Process for iterating from concept to polish.

## Decision Framework

```
START: What's the message?
  ↓
INTENT: What should viewer feel?
  → Determines material personality
  ↓
PHYSICS MODEL: What material expresses that?
  → Material determines timing/deformation/bounce
  → Weight scales duration
  → Force determines easing
  ↓
ATTENTION: What's the viewing sequence?
  → Determines stagger patterns
  → Ensures one focus at a time
  ↓
PROCESS: Iterate systematically
  → Broad strokes → Easing → Secondary → Polish
```

## Core Rules

1. **One focus at a time** - Never animate unrelated elements simultaneously
2. **Intent first** - Every animation serves the message
3. **Material consistency** - All elements of same material move similarly
4. **Exits faster than entrances** - 30-40% shorter duration
5. **Respect physics** - Unless intentionally stylized

## Video-Specific Considerations

- Work in **frames**, not just milliseconds (24fps, 30fps, 60fps)
- Consider **composition duration** and pacing for full sequence
- Think about **viewer distance** (mobile vs TV vs cinema)
- Plan for **audio sync** when applicable
- Account for **export format** constraints

## Editframe Implementation

Motion principles map to specific Editframe mechanisms. Always check [0-editframe.md](references/0-editframe.md) first — it translates every concept to actual syntax.

| Motion concept | Editframe mechanism |
|---------------|---------------------|
| Easing / physics | CSS `animation-timing-function` + `@keyframes` |
| Stagger | `ef-text split="word"` + `--ef-word-index` CSS var |
| Progress-driven | `--ef-progress` CSS var (0–1, updates every frame) |
| Per-frame procedural | `addFrameTask((ownCurrentTimeMs, durationMs) => {})` on timegroup |
| Exit timing | `--ef-transition-out-start` CSS var |
| Scene overlap | `overlap="1s"` on parent `ef-timegroup[mode="sequence"]` |

**`addFrameTask` rules:** callback must be a pure function of `ownCurrentTimeMs` — no `Date.now()`, no `Math.random()`. Renders must be deterministic.

## Quick Reference

For detailed tables and patterns, see:
- **Editframe implementation**: [0-editframe.md](references/0-editframe.md)
- **Material properties & durations**: [2-physics-model.md](references/2-physics-model.md)
- **Stagger delays & patterns**: [3-attention.md](references/3-attention.md)
- **Iteration workflow**: [4-process.md](references/4-process.md)