Communitygithub.com

Drama2557/4RealDigital-Video-Studio

映像制作におけるマスタールール。マルチシーン動画を、独立したアニメーションスライドの積み重ねではなく、1つの連続的なカメラ移動のように見せるための動作法則と制約を定義します。

4RealDigital-Video-Studio とは?

このスキルは、Claude CodeやCursorなどのAIエージェント向けに設計された、HyperFramesアニメーションおよび動画作成のための**ゲートウェイルール**です。複数のシーンからなる動画において、各シーンのつなぎ目(シーム)での視覚的な連続性と物語的な一貫性を強制する、最優先の動作ドクトリンを提供します。 主な内容は、ベクトル法則(出口の動きが入口を決定する、特にZ軸スケール符号のルール)、フィルムの「カレント」(進行方向の統一)、キャリア要素(視線を誘導する具体的なオブジェクト)、因果動作(動きに理由を与える)、シームゲート(自動検証スクリプトによる構文チェック)、アイドル揺れの禁止(動きは「待機」ではなく「性能」を発揮すべき)、クライマックス前の静止、そして持続動作ルートの割り当てです。 このドクトリンは、`cut-the-curve`(カーブカット技法カタログ)、`oversized-cursor`(特大カーソル)、`seam-craft`(シームレンダリング技法)などの下位スキルへのルートマップを提供し、`scripts/seam-stamp.mjs`と`scripts/seam-gate.mjs`という検証スクリプトによって、シームの一貫性を静的にチェックします。これにより、各シーンを個別に作成した結果、シームで視覚的な「死」が生じる問題を防止します。

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

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

動作ドクトリン(ゲートウェイ)

アニメーションを作成する前にこれを読むこと。これにより、すべてのシーム(つなぎ目)で何が起こるか、各シーンがどのようにパフォーマンスするかが決定されます。テクニックスキルはこれを実装します。これらのルールは、汎用的または上流の動作ガイダンスよりも優先されます。これが防止する失敗:シーンが個別に作成されることで、視線の勢いがカットごとに途絶え、シーンが入場と退場の間でその場で揺れることです。

ルートマップ

決定(このスキル)実装スキル
シーム遷移の選択 + パラメータ + コード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) → そこからマスターシームをスタンプ(scripts/seam-stamp.mjs --ledger ledger.json --write index.html)→ フェーズごとに持続動作ルートを割り当て → キャリアと原因 → ビルドコンポジション → 検証(scripts/seam-gate.mjs)。 ティアAのモーフ/マッチカットのみ手動で作成し、スタンプされたシームは構築上ゲートを通過します。


パート1 — シームの法則

ベクトル法則

シーンAの出口の仕方が、シーンBの入り方を決定する:同じ軸、同じ方向、一致した速度、両側で動作途中でカットすること。

  1. 軸 — XはXのまま、YはYのまま、ZはZのまま。カットをまたいで軸を交換してはならない。
  2. 方向 — ミラーリングしてはならない。Z軸の場合、方向 = スケール変化の符号:拡大 = 押し込み(カメラ前進)、縮小 = 引き(カメラ後退)。後退する出口に、小さくからの拡大入場で応えるのはミラーリングされたベクトル — 最も一般的な違反。なぜなら、小さくからの拡大はデフォルトの要素入場方法だから。
  3. 速度 — 入場初速度 ≈ 出口最終速度。ミラーリングされたイージングで実現(出口 power4.in + 入場 power4.out、同じ距離と継続時間;入場側が見かけの経路の50%以降で動きを引き継ぐ)。メカニクスは cut-the-curve にあり。
  4. フェーズ — カットは両側で動作途中に位置する。カット前に静止したり、カット後に静止から開始するのはデッドビートとなる。

カレント

すべてのフィルムは1つの支配的な方向(ハウスデフォルト:左)を選ぶ。通常のシームはすべてこれを使用する。他のベクトルは予約済み — それらを使用することには意味がある:

ベクトル意味
カレント(左)「次のビート」— 中立的な前進
上方向高揚 — 結論や啓示が先行するものより上に現れる
Z前進(ズームスルー)同じ思考をより深く掘り下げる
Z後退(逆ズーム)到着 — より大きな何かが着地する
スケールバースト(爆発的拡大)世界の離脱 — 表面がカメラを通り過ぎる
  • 連続するシームを反対方向に実行してはならない — ピンポンはエラーと解釈される。
  • 方向転換には、目に見える原因(クリック / バウンド / インパクト)またはチャプター境界が必要。

ベクトル台帳

マスタータイムラインを作成する前に、プロジェクトルートの ledger.json として作成すること(スキーマ:references/seam-gate.md)。シームごとに1行:カット時間、出口と入場のベクトル(軸 + 符号付き方向;Z行はスケール符号を含む)、セレクタ、テクニック。出口と入場は一致しなければならない。行が不一致の場合は、プランを修正し、イージングを調整してはならない。検証プログラムは、ランタイムサンプリングの前に、静的に行の一貫性をチェックする。

キャリア

目はオブジェクトを追い、抽象概念を追わない。最も強力なシームは、一致した位置および速度で、具体的なキャリアをカットの向こう側に引き渡す:途中にあるカーソル、次のレイアウトに縮小/ドッキングするコンテナ、正確なスロットに飛び込むマーク、滝カットの単語グループ。自然なキャリアがない場合、シーンのヒーロー要素がそれを引き受ける(部分的な移動 + 早期フェードアウト、途中からの入場)。クロスフェードは決して使わない — それにはキャリアがまったくない。

因果動作

各動作が、前の動作によって目に見えて開始されるように連鎖させる:クリック → 押しつぶし → バネの解放 → 飛行 → インパクト → 反動 → リビール。

  • エフェクトは、原因となったフレーム上で開始する — 同じタイムライン位置で、「少し後」では決してない。
  • 反応は、暗黙の質量に比例する:大きな要素はよりゆっくりと跳ね返り、小さな要素は素早く反応する。
  • 力は方向転換のライセンスとなる;原因のないフリップはピンポンである。

シームゲート(ビルドゲート — 検証プログラムを実行し、終了コード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)は、シームごとに以下を数値的に強制する:台帳行の一貫性、出口がカット時点で動いていること、入場が飛行途中であること(静止からではない)、測定された方向が台帳の方向と一致すること、入口/出口速度の一致(WARN)、重なりゼロ(1フレームに1つの面のみ表示 — カットはディゾルブではない)、Z符号ルール(両側で d(scale)/dt の符号が同じ;入ってくるシーン自身の入場も符号競合についてスキャンされる)、および祖先スケールを含めたキャリア矩形の連続性。台帳作成時に各シームの真のキャリアセレクタを見つけるには、seam-gate.mjs probe --t <cut> を使用する。

スクリプトがチェックできないルール — 依然としてあなたの責任:

  1. 編集はシームを再オープンする。 シーンの最初/最後の約1秒に対する変更(新しいVOに合わせた再タイミングを含む)は、その境界の監査を無効にする — 検証プログラムを再実行すること。
  2. オーディオが時計である。 シーンのタイミングはVOの実際の単語タイムスタンプに合わせる;スロットに合わせて読み上げを急がせてはならない。VOの再生成はシームを再オープンする。
  3. クリップゲーティングの落とし穴(ゼロオーバーラップFAILの最も一般的な原因):data-start が入場トゥイーンより前にあるクリップは、初期不透明度で非表示解除される — 初期 autoAlpha: 0 を設定し、かつ data-start をカット時間に設定する。それより前にしてはならない。

パート2 — パフォーマンス(シーンはパフォーマンスし続ける)

アイドル揺れの禁止

アイドル状態のサインループ(呼吸、浮遊、ドリフト、グローパルス)は、持続動作として禁止される — これらは「動画が待機している」と解釈される。入場が完了してから数秒余っているシーンは、計画のバグである:揺れではなく、ストーリーを追加すること。入場と退場の間のすべてのフェーズは、以下のルートのいずれかによって所有される(計画内でルートを指定すること):

ルート説明
段階的リビールコンテンツを一部保留し、ナレーションビートで解放する — フレームは情報を獲得し続ける(2つ以上のコンテンツグループがある場合のデフォルト)
意図を持ったカメラマッピングされたスケール+パンのパス:全体像の確立 → 移動 → 被写体への到着
シーケンシャルUIライフプロダクトが時間とともに振る舞う:進捗が進む、ステップがハイライトされる、カウントが刻まれる
アニメーションシーケンス要素がビートを演じる:カードが山にファイルされる、アイテムがドラッグされる、結果が組み立てられる
カーソル主導のアクション特大のカーソルが視線をトリガーに導く;そのCLICKが次のビートを点火する(oversized-cursor)

テスト:任意の秒で一時停止 — 意味のある何かが途中でなければならない(リビールが着地中、カメラが移動中、UIがナレーションで言われていることを実行中)。

クライマックス前の静止

主要なアクションとその結果の間に 0.3~0.75秒の一時停止を計画する — 劇的なコンマ。アクションから結果に直接ジャンプするシーンは、その効果を失う。

タイミングの意図

  • 単一の入場 ≤ 約800ms;より長いビルドアップ = マルチエレメントのスタガーであり、1つの遅い要素ではない。
  • 退場 ≈ 入場の75%。例外:cut-the-curve はこれを逆転させる(入場 ≈ 退場の127%)。
  • 合計スタガー ≤ 500ms;8つ以上の要素がある場合、アイテムごとの遅延を短縮するか、最初の数個だけをスタガーする。
  • 禁止イージング:bounce.out / elastic.out。入場のオーバーシュート back.out(1.4–1.7) は問題ない。
  • 類似した要素は、1つのイージング+デュレーションの意図を共有する — 要素ごとにユニークなペアを決して使用しない。

遷移語彙

フィルム全体で2~3つのシーン間遷移のみを使用し、それらを繰り返す;デフォルトの境界は、カレントの方向への cut-the-curve である。手書きの共有要素モーフ(intent: morph)は、予算にカウントされない。


アンチパターン

禁止代わりに
各シーンの入場を個別に作成する最初にベクトル台帳を作成する
シーン間をクロスフェードするカレントの方向へ cut-the-curve を使用する
退場が完了してからシーンを変更する両側で動作途中でカットする
カット後に静止から入場を開始する見かけの経路の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

関連スキル