Setting the file. One moment.
Subchapter 14.11
references/motion-vocabulary.mdMarkdown5 KBView on GitHub
10 motion primitives the skill uses. Each has a specific timing + easing + situational fit. Agent picks by content tone, not default to one.
Easing philosophy: cubic-bezier(.2,.7,.2,1) is the “considered confident” default. is almost always wrong. Back-easing (elastic) is for playful content only — never documentary.
Also bundled
Gitignore
linearExit rules: Default exit is the same tween reversed at 60% duration. Never exit with a different motion than entry unless doing a rhetorical pivot. Never fade out during speech — only during the gap between phrases.
Char-by-char reveal, 25–35ms/char, linear easing. Documentary / data-heavy / tense / interrogative.
// GSAP
words.forEach((w, i) => {
const chars = w.textContent.split("");
w.textContent = "";
chars.forEach((c, j) => {
const span = document.createElement("span");
span.textContent = c;
span.style.opacity = 0;
w.appendChild(span);
tl.to(span, { opacity: 1, duration: 0 }, wordStart + j * 0.028);
});
});Per-word, 80ms stagger, opacity 0→1 + translateY 8→0, cubic-bezier(.2,.7,.2,1) (ease-out). Default for conversational content.
tl.fromTo(
word,
{ opacity: 0, y: 8 },
{ opacity: 1, y: 0, duration: 0.45, ease: "power2.out" },
wordStart,
);Per-word, 60ms stagger, scale 0.85→1 + opacity 0→1, elastic-light cubic-bezier(.34,1.56,.64,1). Energetic / YouTube-vlog / high-tempo. Never for documentary.
Whole phrase at once, 400ms, clip-path inset 0 100% 0 0 → 0 0 0 0, expo cubic-bezier(.77,0,.175,1). Keynote / tech product / announcement.
.cap {
clip-path: inset(0 100% 0 0);
}
/* animate to inset(0 0 0 0) */Per-word, 120ms stagger, y: -30→0 with back-bounce cubic-bezier(.68,-.55,.27,1.55). Playful but controlled. Not for documentary.
Whole word at once, 600ms, opacity ramp 0→1 with slight blur→sharp transition. Ease-in-out. Poetic / lyrical / “quote on wall” direction.
Per-word, 200ms total: two 1px lines converge on word center (linear 150ms), then word snaps in (expo-out 50ms). Thriller / investigative doc.
Static but alive. No entry animation. Once visible, micro-scale loop 1.00↔1.008 over 2s, sine ease. Used on climax lines held 1.5s+.
Each word from alternating direction: L, R, L, R. translateX: ±40→0, ease-out 300ms. Rhythm-break move — use sparingly, once per 30s max.
Zero animation. Sudden 1-frame opacity 1. No fade, no transform. Interview-doc style. Use for every 6–8th phrase in a documentary direction for variety (Standard mode; see direction-catalog §1).
| Tone | Stagger | Hold | Entry move |
|---|---|---|---|
| documentary | 150ms | 600ms | burn-in (70%) + word-fade-up (30%) |
| conversational | 80ms | 400ms | word-fade-up |
| energetic | 50ms | 300ms | word-pop |
| poetic | 250ms | 1200ms | etch |
| broadcast | 0 (burn-in) | BBC timings | burn-in |
| investigative | 25ms/char | 500ms | typewriter |
| keynote | 0 per-word (phrase swipe) | 600ms | swipe-reveal |
Agent picks tone → this table → GSAP parameters. Data, not guesswork.
Orthogonal to the 10 moves above.
w.start timestamp. Tight sync with speech.g.in/g.out. Words appear together. Used for:
Rule: per-word for content that tracks speech; per-phrase for moments that step outside the speech flow.
Fine-tune stagger within a tone:
letter-spacing → reflowfilter:blur → reflow + can wash out textMath.random() / Date.now() in timeline → non-deterministic renderThe 10 moves are a comfortable coverage, not a ceiling. For Standard mode, invent new moves when the scene demands it:
When inventing: stay deterministic, stay transform+opacity only, state the motion in terms of the 4 axes (entry, hold, exit, stagger).