Motion

Motion craft

Measured frame by frame from the official HyperFrames launch films. These are defaults: a reference the person gave, or a Moment that does otherwise on purpose, wins for its own beat.

• Moves: a fast move takes 0.3–0.6 s and carries motion blur on its own ease, peaking at its fastest frame: 6–12 px on text-sized elements, 15–20 px full-frame, horizontal-only on a horizontal move. One move is one tween.
• Render-time blur: for fast 2D movers, data-motion-blur="on" on the composition root smears them along their real path in preview and render (opt-in; also data-motion-blur-shutter for a longer smear, 360 is strong; -events="on" when the motion is set from a timeline callback such as a render(t) function). Suggest it when the person asks for blur or a filmic look and the piece moves fast. It draws with a per-element filter that works over WebGL and in any Chrome (cost varies by film; on two real films it cost more than capture) (spins and zooms soften rather than streak); data-motion-blur-tier="capture" opts into the truer capture, which loses anything in front of a mover and ignores blend modes. It is off only for HDR and distributed renders. Opt a subtree out with data-motion-blur="off", e.g. a seam that already carries its own blur. After adding it run hyperframes check. Guide: /guides/motion-blur.
• Arrive slow, leave clean: long-tailed ease-outs on arrivals; landing takes longer than leaving. An exit is one smooth motion, never slide, stop, then leave. Entrances that are too snappy read as glitches; slowing the whole video by about a second often fixes it.
• Ease by role: an arrival lands on a long tail (expo.out, power4.out), a camera move or a colour flood eases both ways (power2.inOut), a zoom through or an exit accelerates (power3.in). The same power2.out at 0.5 s on everything is the flat default that makes a film feel generated. Linear only for rotation, progress and constant speed that is the point.
• Springs are named by damping ratio: 1.0 never bounces, 0.7-0.85 reads premium, 0.4-0.6 playful, under 0.3 a cartoon. Position and size may bounce; opacity and colour never do. GSAP's elastic.out(1, 0.5) and back.out(1.4) are the nearest built-ins; a closed-form spring of t keeps any frame renderable on its own.
• Exits are 40-50% shorter than their entrances. Overlap: the next element starts when the previous is 30-50% done; fully sequential looks robotic, all at once looks cheap. Stagger: letters a frame apart, words 60-120 ms, list items 40-80 ms.
• Beat grid: frames per beat = fps × 60 / BPM; compute each beat from its index and round it, never add a rounded beat repeatedly (at 128 BPM and 30 fps that drifts 2 frames in 32 beats). Cut on the beat, change the layout on the bar.
• Cuts: cut at the fastest frame of a move, with matching direction and speed on both sides. A click into a new screen is a match cut on the click's rebound; the new screen comes in slightly large and settles.
• Titles: a landed title is dead still; the motion moves to the next element, the camera or the world behind. Vary the entrance within a film, never a fade and slide-up for each:
• per word: blur(6px) → 0 and opacity 0 → 1 in 0.13 s, 0.067 s apart, no translate;
• per word from light grey to ink, 0.07–0.1 s apart, no position change;
• the whole line blurring in, 8 px → 0 in 0.13–0.2 s;
• per letter for a name, 0.1 s apart, opacity 0.3 → 1 with a slight blur;
• behind the subject: the title between the plate and a matte of the person;
• one word of the sentence rolling through options like a slot machine, about 0.1 s a roll.
• Holds: a line the viewer must read holds about 0.5 s plus 0.3 s a word, the film's last line at least 2 s; a one- or two-word chapter line may hold 0.4 s. Then exit with a blur-out and fade of 0.13–0.25 s, word by word, or with the scene's move.
• Title size: 4–9% of the frame height, one or two lines; quiet lines at 2.5–4% against hero words that fill 60–90% of the width. One highlighted word in the accent colour, which carries meaning.
• Rhythm: contrast speeds. Montages cut every 0.13–0.8 s; a demo holds one framing for 7–10 s while the UI acts; shots average 1.8–3 s with motion inside them. Hold 0.3–0.75 s before the payoff, which plays at normal speed.
• Continuous motion that works: the product's UI working, footage playing, a character acting, a 3D world turning, a slow orbit of a background stage (3–5° a second).
• Defaults that look generated: breathing, floating or pulsing loops standing in for motion on titles and UI; titles that keep sliding or scaling after they land; a slow creeping scale on a title or a slow push late in a scene; bounce on UI; click rings; every scene entering the same way; every element fading and sliding up. A character's idle and overshoot are acting, not these (types/character.md).

Transitions with a cause

Use 3–5 kinds in a film, each caused by something on screen. Hard cuts belong inside a scene (punch-ins); at most a third of the seams between beats are hard cuts, and worlds never crossfade into each other. Measured on the official films:

Registry versions: npx hyperframes catalog --tag transition --json.

The right mechanism

Ready-made moves: npx hyperframes catalog --tag camera --json, or catalog --query "<the move>" --tag motion-primitive --json.

Seeing motion

The whole-film pass (beat sheet, cuts, phone width, the craft warnings) is review.md. For one move:

• npx hyperframes keyframes --json [--selector '#id'] [--runtime all] lists keyframes and motion paths (GSAP, CSS, anime.js): property, time, value, ease.
• npx hyperframes keyframes --shot motion.png --selector '#id' draws the real element's samples over time with its path (9 samples; --samples N). --layout strip for motion in place, --from/--to for one stretch, --angle iso|top|side|'yaw,pitch' for 3D, --ghost for a <canvas>.
• npx hyperframes snapshot --range 2,4 --frames 8 samples one stretch; --composition <id> samples one scene; --at <t,…> exact instants; --zoom '#id' a sharp crop; --angle iso depth and overlap.
• Against a reference video: snapshot --at <t,…> --against ref.mp4 writes a side-by-side sheet.
• Assert intent instead of eyeballing it: a <name>.motion.json next to the composition makes check verify it on the seeked timeline, as errors (motion_appears_late, motion_out_of_order, motion_off_frame, motion_frozen):

{
  "assertions": [
    { "kind": "appearsBy", "selector": "#headline", "bySec": 0.5 },
    { "kind": "before", "a": "#headline", "b": "#cta" },
    { "kind": "staysInFrame", "selector": ".card" },
    { "kind": "keepsMoving", "withinSelector": ".scene" }
  ]
}

Common faults

Studio's keyframe diamonds and motion-path handles rewrite the GSAP script in the composition file, so the person may have changed motion since you wrote it.