motion-dictionary

"Make a nice video" fails because nothing in it can be checked. A motion spec names the effect, the element, the time and the curve, so the result can be compared against it frame by frame.

The spec grammar

One line per element, in this order:

<element> <effect> [direction/amount] em <duration> com <easing> [, stagger <gap>] [, no beat <n> / em <t> ms]

Example (the "peça assim" pattern):

Title enters with slide in from the left in 0.4 s, ease out. Benefits revealed with stagger 0.15 s. Ends with a punch zoom on the product.

Rules when writing a spec or a beat table:

• Every animated element gets a dictionary name. If no name fits, describe start state, end state, duration and curve explicitly, never "smooth" or "dynamic".
• One focus per beat. Three new effects on the same beat is a crowded beat.
• Vary the curve. One easing and one speed for the whole piece is the most common "AI video" tell.
• Fade in alone is the default of every generator. Pair it (fade + slide, fade + blur) or replace it.

The dictionary

Defaults are starting values, not measurements. fx.js uses the same names and defaults.

Entradas suaves (soft entrances)

Entradas com impacto (impact entrances)

O ritmo do movimento (curves)

Entrances generally want ease out (fast start, soft landing). Ease in is for exits. Linear is only for continuous motion (scroll, rotation, progress) that never starts or stops on screen.

Texto em movimento (text)

Formas que mudam (shapes)

Transicoes de cena (scene transitions)

Principios de animacao (extension)

Prompt templates

prompts.md has 5 fill-in templates (app presentation, motion showreel, App Store style launch, product spot, personal intro), rewritten with dictionary names, durations and a beat order. Start from one when the user wants a whole video, then adjust the beats; never send a template with the placeholders still in it.

Motion on a web page

For a landing page or any scroll-driven page, read web.md before writing code. It covers the accepted choreography: smooth scroll, line mask reveals, picture unveils, one pinned scrub section, and a header that hides on scroll. It also lists what owners rejected as amateur: cursor followers, magnetic buttons, mouse tilt, velocity skew, rainbow accents and glow. Finally, it explains why motion can look absent on a machine with reduced motion turned on. fx.js is for clock-driven video; on a page, use GSAP ScrollTrigger as described there.

fx.js

fx.js (next to this file) implements every entry as a pure function of time, no dependencies:

<script src="fx.js"></script>
<script>
  window.__seek = (ms) => {
    const t = ms / 1000;
    FX.apply(title, FX.slideIn(t, 0.2, { from: [-140, 0] }));
    items.forEach((el, i) => FX.apply(el, FX.slideIn(t, FX.stagger(0.8, i, 0.15), { from: [0, 60] })));
    FX.apply(product, FX.punchZoom(t, 2.4));
  };
</script>

Contract: effect(t, t0, opts) with t, t0 in seconds returns numbers (x, y, scale, opacity, blur, clipPath, scaleX/scaleY...). FX.apply(el, ...parts) writes them, multiplying opacities. Because nothing reads a clock, any single frame renders alone and identically, which is what a frame-by-frame renderer needs and what makes a frame checkable.

Other stacks: the defaults translate one to one. CSS: cubic-bezier(0.16, 1, 0.3, 1) for outExpo, cubic-bezier(0.34, 1.56, 0.64, 1) for outBack. Framer Motion: transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}, staggerChildren: 0.15. Remotion: call the fx.js functions with frame / fps.

Reviewing motion against the dictionary

For a rendered piece, sample frames at each beat (a contact sheet) and check:

• Can every movement be named? Unnamed motion is usually drift without intent.
• Does each entrance have a direction and a curve with character, or is everything fading in together?
• Do overshoots land once, small? Bounce on serious content?
• Is text readable at phone size at the moment it is still (blur and swaps finish before the read)?
• Does every punch zoom and hard cut have a sound on the same frame?

Source

Vocabulary organised from the carousel "Dicionario de efeitos Motion" by @omatheusdaia (Instagram). Prompt templates adapted from the carousel "Prompts para criar motion graphics com o Claude" (Instagram; author handle not visible in the copy reviewed). Defaults, the spec grammar, the rewritten templates and fx.js are this skill's own. The block structure (inputs/direction/structure/build/gotchas/start) and the banned list in prompts.md follow the patterns collected on prompt-motion.com (gallery of Claude motion prompts curated by @p4nthera_), read 2026-11-05. Easing formulas are the standard Penner curves.