seflless 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
- One focus at a time - Never animate unrelated elements simultaneously
- Intent first - Every animation serves the message
- Material consistency - All elements of same material move similarly
- Exits faster than entrances - 30-40% shorter duration
- 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 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
- Material properties & durations: 2-physics-model.md
- Stagger delays & patterns: 3-attention.md
- Iteration workflow: 4-process.md