Editframe
Start
/
Motion Design

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

Message + Emotion → Motion characteristics

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

2. Physics Model

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

One focus at a time. Sequence everything.

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

4. Systematic Iteration

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 first — it translates every concept to actual syntax.

Motion conceptEditframe mechanism
Easing / physicsCSS animation-timing-function + @keyframes
Staggeref-text split="word" + --ef-word-index CSS var
Progress-driven--ef-progress CSS var (0–1, updates every frame)
Per-frame proceduraladdFrameTask((ownCurrentTimeMs, durationMs) => {}) on timegroup
Exit timing--ef-transition-out-start CSS var
Scene overlapoverlap="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: