motion-doctrine

GATEWAY — tải trước khi soạn bất kỳ hoạt cảnh hoặc video HyperFrames nào. Quy tắc chuyển động cấp cao giúp một video nhiều cảnh cảm giác như MỘT cú máy liên tục thay vì một chồng các slide hoạt hình độc lập. Bao gồm định luật vector (cách thoát ra quyết định cách đi vào, gồm cả quy tắc dấu tỷ lệ trục Z), dòng chảy của phim, các phần tử dẫn dắt, chuyển động nhân quả, Seam Gate (cưỡng chế xây cổng), lệnh cấm rung lắc thừa (chuyển động phải THỰC HIỆN, không phải thở), tĩnh lặng-trước-cao-trào, và...

npx skills add https://github.com/heygen-com/hyperframes --skill motion-doctrine

Motion Doctrine (Gateway)

Read this before composing any animation. It decides WHAT happens at every seam and how every scene performs; the technique skills implement it. These rules supersede generic / upstream motion guidance. The failure this prevents: scenes authored in isolation — the eye's momentum dies at every cut, and scenes wobble in place between entry and exit.

Route map

Decision (this skill)Implementation skill
Seam transition choice + parameters + codecut-the-curve §1–5 (the catalog)
Text / element entry cascadescut-the-curve §6 (waterfall entry)
In-scene group repositioning (no cut)cut-the-curve §7 (nudge curve)
Cursor-led action / scene kickoff / morph ignitionoversized-cursor
Seam render mechanics / white-flash guardseam-craft
Product-launch / explainer / caption workoverlays text-beat-economics, brand-faithful, captions-overlay on top of the upstream skill

Authoring order: vector ledger (ledger.json) → STAMP the master seams from it (scripts/seam-stamp.mjs --ledger ledger.json --write index.html) → sustained-motion route per phase → carriers and causes → build comps → VERIFY (scripts/seam-gate.mjs). Hand-author only Tier-A morphs/match-cuts; stamped seams pass the gate by construction.


Part 1 — The Seam Law

The Vector Law

How Scene A exits determines how Scene B enters: same axis, same direction, matched speed, cut mid-motion on both sides.

  1. Axis — x stays x, y stays y, Z stays Z. Never trade axes across a cut.
  2. Direction — never mirror. On Z, direction = the SIGN of scale change: growing = push (camera forward), shrinking = pull (camera back). A receding exit answered by a grow-from-small entry is a mirrored vector — the most common violation, because grow-from-small is the default element entrance.
  3. Speed — entry initial velocity ≈ exit final velocity, via mirrored eases (exit power4.in + entry power4.out, same distance and duration; the incoming side picks up ≥50% through the notional path). Mechanics in cut-the-curve.
  4. Phase — the cut lands mid-motion on BOTH sides. Settling to rest before the cut, or starting from rest after it, is a dead beat.

The Current

Every film picks ONE dominant direction (house default: LEFT). Every ordinary seam uses it. Other vectors are RESERVED — spending one means something:

VectorMeaning
The current (LEFT)"next beat" — neutral forward progress
Upwardelevation — a conclusion or reveal rises above what came before
Z forward (zoom-through)pushing deeper into the same thought
Z backward (inverse zoom)ARRIVAL — something bigger lands
Scale-burst (explode out)leaving a world — a surface blasts past camera
  • Never run consecutive seams in opposing directions — ping-pong reads as an error.
  • A direction change needs a visible cause (click / bounce / impact) or a chapter boundary.

The Vector Ledger

Write it before authoring any master timeline — as ledger.json at the project root (schema: references/seam-gate.md). One row per seam: cut time, exit and entry vectors (axis + signed direction; Z rows carry the scale sign), selectors, technique. Exit and entry must match; if a row mismatches, fix the plan, not the easing. The verifier checks row consistency statically before any runtime sampling.

Carriers

The eye follows objects, not abstractions. The strongest seams hand a concrete carrier across the cut at matched position AND velocity: a cursor mid-path, a container that shrinks/docks into the next layout, a mark that flies into its exact slot, the word group of a waterfall cut. With no natural carrier, the scene heroes carry it (partial travel + early fade, entry mid-flight). Never a crossfade — it has no carrier at all.

Causal Motion

Chain motion so each move is visibly launched by the last: click → squash → release spring → flight → impact → recoil → reveal.

  • Effects start ON the causing frame — same timeline position, never "shortly after."
  • Reactions scale with implied mass: big elements rebound slower, small ones snap.
  • A force is a license to change direction; an uncaused flip is a ping-pong.

The Seam Gate (build gate — run the verifier, exit 0 or the seam is not done)

node <SKILL_DIR>/scripts/seam-stamp.mjs --ledger ledger.json --write index.html  # generate
node <SKILL_DIR>/scripts/seam-gate.mjs  verify --ledger ledger.json --project .  # verify

The script (usage + ledger schema: references/seam-gate.md) numerically enforces, per seam: ledger-row consistency, exit still moving at the cut, entry mid-flight (never from rest), measured direction = ledger direction, entry/exit speed match (WARN), zero overlap (one side visible per frame — the cut is not a dissolve), the Z sign rule (d(scale)/dt same sign both sides; the incoming scene's own entrances are scanned for sign-fighting), and carrier rect continuity with ancestor scale included. Use seam-gate.mjs probe --t <cut> to find each seam's true carrier selectors when authoring the ledger.

Rules the script cannot check — still yours:

  1. Edits re-open the seam. Any change to a scene's first/last ~1s (including re-timing to new VO) invalidates that boundary's audit — re-run the verifier.
  2. Audio is the clock. Re-time scenes to the VO's real word timestamps; never rush a read to fit a slot. A VO regen re-opens its seams.
  3. Clip-gating gotcha (the usual cause of a zero-overlap FAIL): a clip whose data-start precedes its entry tween is un-hidden at its initial opacity — set initial autoAlpha: 0 AND data-start = the cut time, never earlier.

Part 2 — Performance (the scene keeps performing)

No idle wobble

Idle sine loops (breathe, float, drift, glow pulse) are BANNED as sustained motion — they read as "the video is waiting." A scene that finishes entering with seconds left is a planning bug: add story, not wobble. Every phase between entry and exit is owned by one of these routes (name the route in the plan):

RouteWhat it is
Staged revealsHold content back; pay it off on narration beats — the frame keeps gaining information (default for ≥2 content groups)
Camera with intentA mapped scale+pan path: establish wide → travel → arrive on the subject
Sequenced UI lifeThe product behaves over time: progress advances, highlights step, counts tick
Animated sequencesElements act out a beat: a card files into a stack, an item gets dragged, a result assembles
Cursor-led actionAn oversized cursor walks the eye to a trigger; its CLICK ignites the next beat (oversized-cursor)

Test: pause at any second — something meaningful must be mid-flight (a reveal landing, the camera traveling, the UI doing what the narration says).

Stillness before climax

Schedule a 0.3–0.75s pause between the major action and its result — the dramatic comma. A scene that jumps straight from action to result loses it.

Timing intents

  • Single entry ≤ ~800ms; longer buildup = multi-element stagger, not one slow element.
  • Exit ≈ 75% of entry. Exception: cut-the-curve inverts this (entry ~127% of exit).
  • Total stagger ≤ 500ms; with 8+ elements, tighten per-item delay or stagger the first few.
  • Forbidden eases: bounce.out / elastic.out. Entry overshoot back.out(1.4–1.7) is fine.
  • Similar elements share one ease+duration intent — never a unique pair per element.

Transition vocabulary

Use only 2–3 inter-scene transitions per film and repeat them; the default boundary is cut-the-curve in the current's direction. Hand-written shared-element morphs (intent: morph) don't count against the budget.


Anti-Patterns

Don'tInstead
Author each scene's entrance in isolationWrite the vector ledger first
Crossfade between scenesCut-the-curve in the current's direction
Exit completes, THEN the scene changesCut mid-motion on both sides
Entry starts from rest after a cutEnter ≥50% through the notional path
Inverse-zoom exit → grow-from-small entry (or push → oversized retraction)Match the scale-velocity sign (Seam Gate 7)
Incoming scene's own pop-in intro under a Z-seam handoffHold its opening frame composed, or match the sign
Idle wobble / breathe / float to fill timeAssign a sustained-motion route; or add story
Direction flip without a causeSpend a force, or keep the current
Reserved vectors used as varietyDefault to the current; spend them on meaning
Reaction a few frames after its causeSame-frame ignition
Action jumps straight to resultSchedule stillness-before-climax (0.3–0.75s)

Thêm skills từ heygen-com

hyperframes-audio
heygen-com
Use when audio already placed in a HyperFrames composition needs to be mixed: a music bed that fights a voiceover (voiceover carve), effects on a track (EQ, compressor, limiter, gate, saturation, delay, reverb, chorus, phaser, bitcrush), or automation envelopes drawn on a track's volume or any effect parameter. Don't use for sourcing or generating audio — finding BGM, SFX, or making a voiceover is `/media-use`. Don't use for clip timing or track layout, which is `/hyperframes-core`.
hyperframes-cli
heygen-com
HyperFrames CLI dev loop — `npx hyperframes` for scaffolding (init), validation (lint, inspect), preview, render, and environment troubleshooting (doctor, browser, info, upgrade). Use when running any of these commands or troubleshooting the HyperFrames build/render environment. For asset preprocessing commands (`tts`, `transcribe`, `remove-background`), invoke the `hyperframes-media` skill instead.
developmenttestingapi
hyperframes-animation
heygen-com
Tất cả kiến thức hoạt hình cho HyperFrames — quy tắc chuyển động nguyên tử, bản thiết kế cảnh đa pha, chuyển tiếp cảnh, kỹ thuật thiết kế chuyển động rộng hơn, VÀ bảy bộ điều hợp thời gian chạy (GSAP mặc định, cộng với Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Sử dụng cho bất kỳ tác vụ chuyển động hoặc hoạt hình nào: chọn 2-4 quy tắc và soạn, hoặc tải bản thiết kế, hoặc tra cứu API thời gian chạy cụ thể (ví dụ: GSAP eases / Lottie player / Three.js mixer). Gốc HyperFrames: dòng thời gian tạm dừng đơn, an toàn t
creativedevelopmentdesign
hyperframes-core
heygen-com
Hợp đồng soạn thảo HTML HyperFrames. Sử dụng cho cấu trúc soạn thảo, thuộc tính dữ liệu, clip, track, hợp đồng phụ, biến, phát lại phương tiện, quy tắc kết xuất xác định và xác thực các dự án có thể kết xuất tối thiểu.
developmentmediacreative
hyperframes-media
heygen-com
Tiền xử lý tài sản cho các bản phối HyperFrames — TTS đa nhà cung cấp (HeyGen / ElevenLabs / Kokoro local), BGM đa nhà cung cấp (Google Lyria / local MusicGen), phiên âm Whisper, xóa nền, và biên tập phụ đề. Sử dụng cho npx hyperframes tts, bgm, transcribe, remove-background, lựa chọn giọng nói/nhà cung cấp, gợi ý tâm trạng nhạc, phụ đề / chú thích / lời bài hát / karaoke / tạo kiểu theo từng từ.
mediaaudiovideo
hyperframes-registry
heygen-com
Cài đặt và kết nối các khối registry cùng thành phần vào các tổ hợp HyperFrames. Sử dụng khi chạy hyperframes add, cài đặt một khối hoặc thành phần, kết nối một mục đã cài đặt vào index.html, hoặc làm việc với hyperframes.json. Bao gồm lệnh add, vị trí cài đặt, kết nối khối phụ trong tổ hợp, hợp nhất đoạn mã thành phần, khám phá registry, và tạo một khối hoặc thành phần mới để đóng góp ngược lên (ý tưởng → tạo khung → xác thực → PR).
developmentapicode-review
general-video
heygen-com
Sử dụng làm phương án dự phòng cho việc biên soạn video HTML HyperFrames tùy chỉnh khi không có quy trình chuyên biệt nào phù hợp. Bao gồm các tác phẩm dài hoặc nhiều cảnh, video thương hiệu/sizzle reel, dựng cảnh, thẻ tiêu đề, áp phích chuyển động dài, vòng lặp tĩnh và các tác phẩm tự do ở bất kỳ độ dài hoặc định dạng nào. Không dành cho quảng cáo sản phẩm tiếp thị (product-launch-video), chụp màn hình trang web thành video tổng quát (website-to-video), video giải thích chủ đề (faceless-explainer), video GitHub PR (pr-to-video), phụ đề cho cảnh quay có sẵn...
videocreativemedia
motion-graphics
heygen-com
Sử dụng khi người dùng muốn một đồ họa chuyển động ngắn, thiên về thiết kế, nơi chuyển động là thông điệp: kiểu chữ động, đếm số liệu hoặc số, hiệu ứng biểu đồ/trực quan hóa dữ liệu, logo sting, brand lockup, lower-third, callout, lớp phủ mạng xã hội, tiêu đề/tweet/tin tức động, poster chuyển động, hoặc điểm nhấn trang đã chụp nhanh. Thường dưới 10 giây và tối đa khoảng 30 giây, không có mạch tường thuật, lồng tiếng hoặc chủ thể quay thực. Có thể xuất ra MP4 hoặc lớp phủ trong suốt. Không dành cho các tác phẩm dài hơn, nhiều cảnh,
creativevideodesign