Communitygithub.com

運動法則(入門守則)

GATEWAY — 在編寫任何 HyperFrames 動畫或影片之前,請先載入此技能。這是一套高階運動法則,讓多場景影片感覺像是一次連續的鏡頭移動,而非一堆獨立動畫投影片的堆疊。涵蓋向量法則(如何退出決定如何進入,包含 Z 軸縮放符號規則)、影片流向、載體元素、因果運動、場景接縫閘門(建置與強制執行)、禁止空轉擺動(運動必須「表演」而非「呼吸」)、高潮前的靜止,以及持續運動路徑。並引導至低階技術技能(曲線切割 — 完整目錄,包含瀑布式進入 + 微調曲線、超大游標、接縫工藝)。這些規則**凌駕**於通用/上游的運動指導之上。[連貫性, 方向, 向量, 動量, 接縫, 過渡, 緩動, 表現, 空轉運動, 敘事運動, 影片語法]

運動法則(入門守則) 是什麼?

這是一個名為「運動法則(入門守則)」的高階 AI 代理技能,專門用於 HyperFrames 動畫和影片創作。它的核心功能是提供一套強制性的運動規則,確保多場景影片能夠實現連續、流暢的鏡頭移動,而不是各自為政的獨立動畫。此技能強制執行「向量法則」,即場景的退場方式決定了下一個場景的進場方式,必須在軸向、方向、速度和相位上完全匹配,並嚴格規範 Z 軸縮放的方向符號,以防止常見的視覺衝突。技能還引入了「影片流向」的概念,將一個主導方向(預設為向左)作為默認前進方向,其他方向(如上、下、Z 軸)則保留用於特定敘事意義。此技能支援 Claude Code、Cursor、Codex 等平台,並通過「向量分類帳」在專案根目錄的 `ledger.json` 中記錄每一個接縫的過渡參數。它還內建了自動化驗證腳本 `seam-gate.mjs`,用於靜態檢查所有規則的一致性,確保生成的動畫符合規定。此外,該技能涵蓋了「載體元素」、「因果運動」、「禁止空轉擺動」和「高潮前靜止」等進階概念,旨在提升影片的敘事節奏和視覺表現力,並通過一個路由地圖將高階決策與低階實現技能(如 `cut-the-curve`、`seam-craft`)連接起來。

相容平台~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/Drama2557/4RealDigital-Video-Studio/tree/HEAD/.agents/skills/motion-doctrine

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

運動法則(入門守則) 是做什麼的?

在編寫任何動畫之前,請先閱讀此份文件。它決定了每個接縫處會發生什麼事,以及每個場景如何表現;技術技能只是實現它的工具。這些規則凌駕於通用/上游的運動指導之上。此舉旨在防止的失敗模式:場景各自獨立創作——觀眾視線的動量在每個剪輯點中斷,而場景在進場和退場之間原地擺動。

路由地圖

決策(此技能)實作技能
接縫過渡選擇 + 參數 + 代碼cut-the-curve §1–5(目錄)
文字/元素進場級聯cut-the-curve §6(瀑布式進場)
場景內群組重新定位(無剪輯)cut-the-curve §7(微調曲線)
游標引導的動作/場景啟動/變形觸發oversized-cursor
接縫渲染機制/白光閃爍防護seam-craft
產品發布/解說/字幕工作在上游技能的基礎上疊加 text-beat-economics、brand-faithful、captions-overlay

創作順序:向量分類帳(ledger.json)→ 從中 STAMP 主接縫(scripts/seam-stamp.mjs --ledger ledger.json --write index.html)→ 每個階段的持續運動路徑 → 載體和原因 → 建立元件 → 驗證(scripts/seam-gate.mjs)。 僅手動處理 Tier-A 的變形/匹配剪輯;STAMP 產生的接縫預設可通過閘門檢查。


第一部分 — 接縫法則

向量法則

場景 A 的退場方式決定了場景 B 的進場方式:相同的軸向、相同的方向、匹配的速度、兩側都在運動中進行剪輯。

  1. 軸向 — X 保持 X,Y 保持 Y,Z 保持 Z。絕不在剪輯點交換軸向。
  2. 方向 — 絕不鏡像。在 Z 軸上,方向 = 縮放變化的符號:放大 = 推進(攝影機前進),縮小 = 拉遠(攝影機後退)。一個正在退縮的退場,搭配一個從小變大的進場,就是一個鏡像向量——這是最常見的違規,因為從小變大是預設的元素進場方式。
  3. 速度 — 進場初始速度 ≈ 退場最終速度,透過鏡像的緩動曲線實現(退場使用 power4.in + 進場使用 power4.out,距離和持續時間相同;進場側在概念路徑上完成 ≥50% 的進度)。具體機械原理請見 cut-the-curve。
  4. 相位 — 剪輯點落在兩側的運動過程中。在剪輯點前停止不動,或剪輯後從靜止開始,都是節奏停滯。

影片流向

每部影片選擇一個主導方向(預設值:向左)。每個普通接縫都使用它。其他向量是保留的——使用其中一個意味著某種意義:

向量意義
主要流向(向左)"下一個節拍" — 中性的向前進展
向上提升 — 結論或揭示的內容高於之前的畫面
Z 軸向前(穿透縮放)深入同一個想法
Z 軸向後(反向縮放)抵達 — 更大、更重要的東西登場
尺度爆炸(向外爆開)離開一個世界 — 一個表面向鏡頭爆裂開來
  • 絕不連續使用方向相反的接縫 — 來回擺盪會讓人感覺像錯誤。
  • 方向改變需要一個可見的原因(點擊/彈跳/撞擊)或一個章節邊界。

向量分類帳

在編寫任何主時間軸之前,先撰寫此分類帳 — 作為專案根目錄下的 ledger.json(結構定義:references/seam-gate.md)。每個接縫一行:剪輯時間、退場和進場向量(軸向 + 有符號的方向;Z 軸行需攜帶縮放符號)、選擇器、技術。退場和進場必須匹配;如果某一行不匹配,修正計劃,而不是修正緩動曲線。驗證器會在任何運行時取樣之前,靜態地檢查行的 consistency。

載體元素

眼睛跟隨的是物體,而不是抽象概念。最強的接縫會將一個具體的載體元素在匹配的位置和速度下傳遞過剪輯點:一個處於移動路徑中的游標、一個縮小/嵌入到下一個佈局中的容器、一個飛入其精確位置的標記、瀑布式剪輯中的詞組。如果沒有天然的載體,則由場景主角來承擔(部分移動 + 早期淡出,進場時已在半空中)。絕不使用交叉淡入淡出 — 它完全沒有載體。

因果運動

連結運動,使每個動作都明顯地由前一個動作觸發:點擊 → 擠壓 → 釋放彈簧 → 飛行 → 撞擊 → 反彈 → 揭示。

  • 效果在觸發的影格上開始 — 同一時間軸位置,絕不「稍後」。
  • 反應與預期的質量成比例:大元素反彈較慢,小元素反彈較快。
  • 一個力是改變方向的許可;一個無原因的翻轉就是來回擺盪。

接縫閘門(建置閘門 — 執行驗證器,退出碼為 0 否則接縫未完成)

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

該腳本(使用方式 + 分類帳結構定義:references/seam-gate.md)以數值方式強制執行每個接縫的下列檢查:分類帳列 consistency、退場時仍在移動、進場時已在半空中(絕非從靜止開始)、測量到的方向 = 分類帳方向、進場/退場速度匹配(WARN)、零重疊(每個影格僅可見一側 — 剪輯點不是溶解效果)、Z 軸符號規則(d(scale)/dt 在兩側符號相同;會掃描進場場景自身的進場動畫以檢查符號衝突)、以及包含祖先縮放比例的載體矩形連續性。在撰寫分類帳時,使用 seam-gate.mjs probe --t <cut> 來找出每個接縫真實的載體選擇器。

腳本無法檢查的規則 — 仍由您負責:

  1. 編輯會重新打開接縫。 對場景首尾 ~1 秒所做的任何更改(包括根據新的配音重新調整時間),都會使該邊界的審計失效 — 請重新執行驗證器。
  2. 音訊是時鐘。 根據配音的真實單詞時間戳來調整場景時間;絕不為了配合時間槽而催促一段朗讀。配音重新生成會重新打開其接縫。
  3. Clip-gating 陷阱(零重疊 FAIL 的常見原因):一個 data-start 早於其進場補間動畫的 clip,會以其初始透明度解除隱藏 — 請設定初始 autoAlpha: 0 以及 data-start = 剪輯時間,絕不能更早。

第二部分 — 表現(場景持續表演)

禁止空轉擺動

禁止將空轉的正弦循環(呼吸、漂浮、漂移、光暈脈動)作為持續運動 — 它們會讓人覺得「影片正在等待」。一個完成進場後還有好幾秒空檔的場景是規劃上的錯誤:增加故事內容,而不是增加擺動。進場和退場之間的每個階段都歸屬於以下其中一條路線(在計劃中指明路線):

路線說明
分階段揭示保留部分內容;在旁白節拍上揭示它 — 畫面不斷獲得新資訊(適用於 ≥2 個內容群組的預設選項)
有意圖的鏡頭一個映射好的縮放+平移路徑:建立廣角 → 移動 → 到達主體上
序列化 UI 生命週期產品隨時間表現:進度條前進、高亮步驟、計數器跳動
動畫序列元素演出一個節拍:一張卡片歸檔到堆疊中、一個項目被拖動、一個結果組合完成
游標引導動作一個超大游標引導眼睛到一個觸發器;它的點擊引發下一個節拍(oversized-cursor)

測試:在任何一秒暫停 — 必須有一些有意義的事情正在進行中(一個揭示正在落地、鏡頭正在移動、UI 正在執行旁白所述的動作)。

高潮前的靜止

在主要動作和其結果之間安排一個 0.3–0.75 秒的停頓 — 戲劇性的逗號。一個從動作直接跳到結果的場景會失去這種張力。

時間意圖

  • 單一進場 ≤ ~800ms;更長的鋪墊 = 多元素交錯,而不是一個緩慢的元素。
  • 退場 ≈ 進場的 75%。例外:cut-the-curve 反轉此規則(進場 ≈ 退場的 127%)。
  • 總交錯時間 ≤ 500ms;對於 8 個或更多元素,縮短每個項目的延遲,或只交錯前幾個元素。
  • 禁止的緩動:bounce.out / elastic.out。進場超越 back.out(1.4–1.7) 是允許的。
  • 相似元素共享一個緩動 + 持續時間意圖 — 絕不為每個元素設定獨特的配對。

過渡詞彙

每部影片僅使用 2–3 種場景間過渡,並重複使用它們;預設邊界是沿主要流向方向的曲線切割。手寫的共享元素變形(intent: morph)不計入此預算。


反模式

不要這樣做應該這樣做
各自獨立編寫每個場景的進場先撰寫向量分類帳
在場景之間使用交叉淡入淡出沿主要流向方向進行曲線切割
退場完成,然後場景才切換兩側都在運動中進行剪輯
剪輯後進場從靜止開始在概念路徑上完成 ≥50% 的進度時再進入
反向縮放退場 → 從小變大進場(或推進 → 超大回縮)匹配縮放速度的符號(接縫閘門規則 7)
進場場景在 Z 軸接縫交接下有自己的彈出介紹保持其開場畫面已組裝好,或匹配符號
用空轉擺動/呼吸/漂浮來填充時間指定一個持續運動路線;或增加故事內容
沒有原因的轉向使用一個力,或保持主要流向
為了變化而使用保留向量預設使用主要流向;只有在有意義時才動用保留向量
反應比原因晚幾個影格同一個影格觸發
動作直接跳到結果安排高潮前的靜止(0.3–0.75 秒)

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

Drama2557/4RealDigital-Video-Studio

Overlay doctrine for the embedded-captions workflow — the caption MODEL (drop / rail / embed) and the rule that captions are an OVERLAY composited on top of the film, never a reserved bottom band you shift content up to avoid. Load when adding captions/subtitles to a talking-head or launch video, when deciding whether a phrase should be dropped, ride the verbatim rail, or be promoted to a scarce embedded climax, when laying out a composition that will carry captions (do NOT reserve a keep-out band), or when centering a composition on the true frame center under captions. Quotes the rail+embed model from embedded-captions and constraint #13 (captions overlay, keep-out band retired) from the product-launch-video scene agent. Applies ON TOP of embedded-captions.

Drama2557/4RealDigital-Video-Studio

Turn a weekly changelog .md into a finished branded changelog video (square 1080, ~45-60s, Annie VO, animated brand background, mock-UI visualizations, lowkey captions). Use when the user provides a changelog/digest markdown and wants the weekly video, or says "changelog video". Self-contained — fonts, background, lexicon, and scripts ship in this skill.

Drama2557/4RealDigital-Video-Studio

The technique catalog: five velocity-matched SEAMS (zoom-through, INVERSE zoom-through, cut-the-curve, waterfall cut, rack-focus blur-cut) plus the two in-scene techniques — waterfall ENTRY (staggered arrival cascades for title cards / segment openers) and the nudge curve (slow-fast-slow three-phase group slides). Covers partial-travel (~12% of frame) velocity matching via mirrored power4 eases, the Z scale-sign rule, size-scaled blur (10px text / 18-20px full-frame), word-by-word staggered cuts, cascade pacing by element weight, and the 10/65/25 slide ratio. Read before authoring any transition, text-beat handoff, kinetic text entry, or group reposition. [depth, zoom, inverse-zoom, scale-sign, mirrored-zoom, rack-focus, pacing, velocity, cut-the-curve, waterfall, stagger, cascade, kinetic-text, title-card, segment-opener, nudge, slide, easing, group-motion, z-depth, motion-graphics, cinematic, transition, blur, directional-continuity]

Drama2557/4RealDigital-Video-Studio

Add captions or subtitles to an existing single-subject talking-head video without editing the footage. Use for plain verbatim captions, cinematic captions embedded behind the subject, VFX captions, “炸/特效/酷炫字幕,” or a named identity from the 35-style catalog. Route by visual identity, not by backend engine. The quiet `anchor` rail is the default; embed every word only when the user explicitly wants a fully cinematic treatment. The workflow runs locally end to end, including transcription and subject matting; split multi-shot footage before applying it.

Drama2557/4RealDigital-Video-Studio

Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes.

Drama2557/4RealDigital-Video-Studio

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

Drama2557/4RealDigital-Video-Studio

Author or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, static loops, static title cards, footage remixes, and freeform builds. Use motion-graphics instead for a short unnarrated motion-first unit, including an animated title. Route fresh creation through hyperframes before using this skill.

Drama2557/4RealDigital-Video-Studio

Use the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, cloudrun, feedback, lambda, doctor, browser, info, upgrade, skills, compositions, docs, benchmark, telemetry, transcribe, auth, tts, and remove-background. Also use when diagnosing build or render failures. validate, inspect, and layout are deprecated aliases; use check. Covers local, HeyGen-hosted cloud, AWS Lambda, and Google Cloud Run rendering.

Drama2557/4RealDigital-Video-Studio

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Also covers Tailwind projects and the STORYBOARD.md / SCRIPT.md plan formats. Read before writing composition HTML.

Drama2557/4RealDigital-Video-Studio

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.

Drama2557/4RealDigital-Video-Studio

Install, discover, and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add or hyperframes catalog, installing one item or every block matching a tag, wiring an installed item into index.html, or working with hyperframes.json. Covers discovery, install locations, block sub-composition wiring, component snippet merging, and authoring a new block or component to contribute upstream (idea → scaffold → validate → PR).

Drama2557/4RealDigital-Video-Studio

Agent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + ledger record (one verb, `resolve`); generate via TTS / music / image models when the catalog misses; produce voiceover, transcription, captions, and background removal through one shared audio engine; operate on media (cut / reframe / transform); and reuse assets across projects. Also use for vague feedback that real footage looks dark, flat, boring, should feel retro/camcorder/print/ASCII, needs privacy, or needs a media reveal.

Drama2557/4RealDigital-Video-Studio

A short, design-led motion graphic where motion is the message — kinetic typography, stat count-up, chart/data-viz hit, logo sting / brand lockup, lower-third / callout / social overlay, animated map (highlight regions, connect places, zoom to a location), animated tweet / news-article / headline, webpage / UI animation (scroll, cursor, callouts), or fusing a real image's geometry into a chart. Usually under 10s (up to ~30s), no narration or live-action subject; renders to MP4 or transparent overlay. Longer / narrated / multi-scene → /general-video. Unclear → /hyperframes.

Drama2557/4RealDigital-Video-Studio

Turn a music track (an audio file, a video to pull audio from, or a track generated from a mood brief) into a beat-synced video — lyric video, slideshow, or kinetic promo. The music drives all pacing; any user-supplied images/videos are cut onto the same beat grid, and a complete video needs zero assets. Narrated pieces → the input-matched workflow (see /hyperframes). Unclear → /hyperframes.

Drama2557/4RealDigital-Video-Studio

House-style oversized macOS cursor technique for HyperFrames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene, when igniting a morph/transition/typing run with a click, or when a scene reads as static, dead, or stale and needs a cheap high-yield source of motion to carry the viewer's eye and segment them out of the stale state. Covers cursor size/look (incl. brand-motif cursors), the off-screen entry law, tip-targeting and the click tap, click-ignites-the-next-beat, and exit / cross-scene handoff.

Drama2557/4RealDigital-Video-Studio

Turn a GitHub pull request (a PR URL, owner/repo#N, or 'this PR' in a checked-out repo) into a code-change explainer video — changelog, feature reveal, fix, or refactor walkthrough built from the diff, commits, and files: the input is a code change, not a website. Not a product promo (/product-launch-video) or a no-PR topic explainer (/faceless-explainer). Unclear → /hyperframes.

Drama2557/4RealDigital-Video-Studio

Render-correctness doctrine for scene-to-scene seams in HyperFrames launch videos — the prerequisites that make transitions composite correctly on the master timeline. Load when assembling the master timeline / index.html, when a white flash appears at a cut or crossfade seam (especially on dark films), when reasoning about why a transition opacity dip shows through, or when verifying the render-side mechanics of how overlapping scene wrappers blend. Covers the opaque stage-ground (#root background) white-flash guard and how the injector overlaps wrappers, holds final frames, ping-pongs tracks, and stamps lint-clean template code onto the master timeline. Does NOT contain the per-transition catalog — see the transition registry for individual transition entries.

Drama2557/4RealDigital-Video-Studio

Author a HyperFrames slideshow — a presentation, pitch deck, or interactive deck with discrete slides, fragment reveals, branching, hotspot navigation, and built-in presenter mode with speaker notes; also converts an existing page into a deck. Output is a navigable deck, not a rendered MP4. If the user didn't explicitly ask for a slideshow, confirm before authoring. Unclear → /hyperframes.

Drama2557/4RealDigital-Video-Studio

Package an existing talking-head / interview / podcast video with timed, designed GRAPHIC OVERLAY cards — kinetic titles, lower-thirds, data callouts, quotes, side panels, picture-in-picture — synced to the transcript, on a 16:9 / 9:16 / 4:5 canvas of your choice; the clip plays untouched underneath. Trigger on "graphic overlays", "on-screen graphics", "package / dress up my video". Not plain subtitles (/embedded-captions). Unclear → /hyperframes.

Drama2557/4RealDigital-Video-Studio

Agent skill / project related to launch or product demo video: Drama2557/4RealDigital-Video-Studio

相關技能