コンテンツ制作 · heygen-com/hyperframes-community-skills

camera-3d-captions

> 話者の周りの3D空間に配置される字幕:カメラが話者とテキストの間を駆け抜け(ウィップイン、視差トラック、プッシュ)、深度ごとに分かれた字幕グループをカメラワークで引き離し、ヒーローワードはアルファマットを通して話者の背後に隠れ、ワードリングが話者の周囲を回り前面で回転し、深度間でフォーカスが推移し、テキストはゴーストモーションブラーを伴い15 fpsでステップ送りされます。あらゆるフォントスタイル(エディトリアルセリフ、ボールドサンセリフ)や手描き風(p5.brush ライトオン)に対応。「3D text」、「3D camera captions」、「text around / behind the speaker」、「camera moves through the text」、「depth captions on my avatar video」でトリガー。素材準備(切り出し、余白付きプレート、マット、ワードクロック、フォントメトリクス)、カット文法、深度ルール、品質管理(QC)、制限事項を網羅。

L4 高権限 · 段階的認可と監査V1 コミット固定コマンド実行ネットワーク通信ファイル書き込みDual-pass Audit
Author heygen-comGitHub heygen-com/hyperframes-community-skills ↗Stars 156License Apache-2.0(仓库根 LICENSE)Commit ba7a0bb6d3
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

1仕組みと動作原理

実装アプローチは「AEの手法をフレームごとの決定論的レンダラーとして再構築する」こと:1つの解析クロックがplate、matte、各グリフを同時に描画し、コンポジション全体でCSSアニメーションを使用しません(レンダラーが任意の位置へシーク可能である必要があるため)。

skills/camera-3d-captions/SKILL.md
One clock paints plate, matte and every glyph. Nothing is a CSS animation.
ここで行われていること:この方針が以降のすべての制約(repeat:-1の禁止、CSS transitionの禁止、時間を解析的に評価可能にすること)を決定づけています。

カメラは真の3Dではなく解析的投影です:各カットはcz(軸方向のドリー)とpx/py(画面シフト)を持ち、すべてのレイヤーは「参照カメラ下の参照スクリーン座標」に存在します。投影式 screen = C + (ref − C)·D0/(D0 − cz) + (px,py) を用い、テキストは15 fpsでステップ送りされカメラも同時にサンプリングされ、7重のゴーストモーションブラーが重ねられます。

skills/camera-3d-captions/assets/kit/cam3d.js
as a deterministic per-frame painter for HyperFrames. One analytic clock: CAM3D.render(t) writes every style.
同一ファイル内にあるモデル説明:'Model: each shot has a camera {cz (dolly toward the scene), px/py (pan/tilt as screen shift)}; every layer lives in "ref-screen" coordinates'。実装におけるproject()/unproject()はこの式の順方向および逆方向の解です。

「AEらしさ」はハードウェア性能ではなく、3つの厳格なタイミング規律によって実現されます:テキストを15 fpsにポスタリゼーション(連動するカメラも同時にサンプリング)、7重のゴーストモーションブラー、そしてplateとmatteが毎フレーム動作すること。

skills/camera-3d-captions/assets/kit/cam3d.js
Text is posterized (camera AND own animation sampled at 15 fps) with 7-ghost motion blur; the plate/matte move every frame with a directional Gaussian from camera speed.
ここで行われていること:「Posterize Time 15 + Motion Blur」を定数 POST = 15、K = 7 に変換しています(同一ファイルの var W = 1440, H = 1080, CX = 720, CY = 540, FPS = 30, POST = 15, K = 7; を参照)。

タイムライン自体はテンプレートに固定されません:セリフに応じてモデルがリアルタイムに4〜6ビートを選択し、文ごとに1グループに分割します。固定されるのは描画コントラクト(15 fpsグリッド、字幕の0.2秒先行、ENTRY変位、深度シャドウ/被写界深度(DOF)計算式)です。

skills/camera-3d-captions/SKILL.md
Pick 4–6 beats. Split each spoken clause into its own group.
同一ファイルの先行量計算式:'Captions lead the voice by 0.2 s, snapped to the 15-fps grid: `fr(t) = 2·round((t − 0.2)·15)`.'。つまり、カメラテーブル(camA/camB/wipe)は実測データテーブルであり、カットの順序はコンテンツに応じて決定されます。

素材パイプラインは1回限りのprepで処理されます:portion(音声ソース)、反射パディングを施したplate-tall(急激なカメラのパンやドリー時のエッジ露出防止)、同フレームのalpha matte(person.webm)を切り出し、**3者の解像度/フレームレート/総フレーム数を個別に照合**して一致しなければ直ちに exit 1 します。これが「タイムラインの厳密な固定」の根拠となります。

skills/camera-3d-captions/scripts/prep-take.sh
[ "$tn" -eq "$pn" ] && [ "$mn" -eq "$pn" ] || fail "frame counts differ: portion $pn, plate $tn, matte $mn"
パラメータとデフォルトのパディングは同一ファイルのusageコメントに記載:prep-take.sh <take.mp4> <start_s> <dur_s> <project/assets> [padTop=480] [padBottom=240] [padSide=240]。matteは npx -y "$HF" remove-background ... --quality best(ローカル推論)で実行。

フォントメトリクスは生成可能なデータテーブルとして外部化されます:font-metrics.pyがfontToolsを使用して各グリフのアドバンス(em)とline-height 1のベースラインを読み取り、バリアブルフォントは指定された軸で事前インスタンス化されます。エンジンはこの値に基づいて各グリフを独自に配置し(CSSカーニングを無効化)、ブラウザがフォントサイズに応じてopszを適用し幅がずれるのを防ぐため、バリアブル軸はCSS内でも固定する必要があります。

skills/camera-3d-captions/scripts/font-metrics.py
Writes `window.CAM3D_METRICS = {adv: {key: {char: em}}, base: {key: em}}`.
SKILL.md内の対応する規律:'A variable font must get its axes passed here AND pinned in CSS (`font-variation-settings`, `font-optical-sizing: none`). Otherwise the browser's opsz follows the size and words overlap.'

カメラモーションカーブはフィッティングによるものではなく、チュートリアル映像からフレーム単位で計測されたテーブルです:tables.jsにcamA(19フレームのウィップイン+クロール)、camB(引き/安定化/プッシュ)、wipe先端のx座標およびイン入りの残り比率が保存され、30 fpsのフレームインデックスとH/1080に応じたスケーリングが適用されます。

skills/camera-3d-captions/assets/kit/tables.js
/* tables.js — measured motion tables (skill camera-3d-captions). Frame-indexed at 30 fps; px values are for a 1080-tall frame (scale by H/1080);
同一ファイルのコメントに幅適応の記述あり:'on a wider frame add (W - 1440) / 2 to wipe.x so the band still crosses mid-frame at ref f40'(SKILL.mdのBuildセクションと一致)。

手描きスタイルはスキル間での再利用です:インストール済みのp5-paint-animationエンジンを利用して各単語をwrite-onスプライトシートとしてレンダリングします(build-sprites.pyがsubprocessで同エンジンのrender-anim.mjsを呼び出し、フレームディレクトリ読み込み後に削除)。そのため、このスタイルには別スキルのセットアップが前提条件となります。

skills/camera-3d-captions/SKILL.md
**Hand-drawn style (optional):** needs the `p5-paint-animation` skill installed and set up (its setup downloads pinned puppeteer, Chrome for Testing, p5 and p5.brush). `build-sprites.py` runs it headlessly; frames are written to that skill's `out/` and removed afterwards.
実装は scripts/hand/build-sprites.py を参照:subprocess.run(['node','render-anim.mjs', sk, out, ...], cwd=engine)。エンジンディレクトリは --engine または環境変数 P5_ENGINE で指定。

2コア機能

01カメラが話者とテキストの間を飛行(ウィップイン/横移動/プッシュ)し、視差によってテキストが深度層ごとに引き離される演出
02alpha matteを使用してヒーローワードを話者の背後に配置(中央の文字が頭部で遮られても≥60%の可読性を維持)
03ワードリング:単語が話者前面の水平リング上を回転(実体がリング上に位置し、接線に沿って回転し深度に応じてスケール)、下側の弧では自動的に反転して正対可読性を維持
04深度ルール:各グループに固有のD値を設定、深度距離に応じたシャドウのスケーリング、|D − focus|に比例するボケ量σの線形変化(平板テキストは最大1.2 pxに制限、リング上のグリフにはフルブラーを適用)
05ボディワイプトランジション:話者自身のマットを黒くしてワイプ帯として走査(カットAは帯の左側、カットBは帯の右側を取得)し、両サイドを同時に展開
06手描きライトオン(p5.brushによるストローク描画;リング上への単語配置、接線回転、深度スケーリングに対応)
07QC 3点セット:フレーム内のはみ出し検出(プレビュー画面に貼り付けて実行)、グリフ間の間隔検出、prep段階でのサイズ/フレームレート/フレーム数の一致検証
08レンダリング出力:ビート単位のフレーム抽出検証 + `render --crf 12` による書き出し;オプションの仕上げ処理(カーブ/SAT 1.12/毎フレーム再生成されるフィルムグレイン)

3外部依存関係

KindDependency / Endpoint
cliHyperFrames CLI(钉死 0.8.62,经 npx 从 npm 取)
cliffmpeg / ffprobe(切分、反射补边、探帧率与帧数、最后编码)
packagePython3 + fonttools/brotli/numpy/pillow(字体度量与手绘精灵图)
network抠像模型首次运行下载(人物分割权重 ~170 MB,本地推理)
networkGSAP 3.14.2(合成在预览/渲染时由页面加载;参考片 HTML 也引用同一 CDN)
package跨 skill 依赖:p5-paint-animation 的渲染引擎(仅手绘风格需要;用 render-anim.mjs 生成精灵图)
cli素材来源:用户自备 take 视频、自备字体(需自行确认嵌入许可)、以及用户自己本地跑的词级转录器

4推奨統制措置と判定根拠

安全運用のための推奨統制措置
Agent 向け
段階的・都度認可、サンドボックス推奨
管理者向け
承認フロー、ロールバック可能、全履歴監査
判定根拠(ファイルパスと抜粋)
  • scripts/: ローカルスクリプトまたはコマンドの実行: bash scripts/prep-take.sh <take> <start> <dur> <assets>(ffmpeg/ffprobeのサブプロセス;
  • 网络端点: 外部ネットワークアクセスの宣言: registry.npmjs.org:コマンド実行ごとにnpx経由で[email protected]を取得(バージョン固定;latestには非追従)
  • 本地工作目录: ファイルの読み書きと成果物の出力: プロジェクト内の assets/:portion.mp4、plate-tall.mp4、person.webm、metrics.js、hand/*.png および
監査ノート: ディレクトリ全体で認証情報へのアクセスは皆無です:env/keychain/cookieの読み取り、APIキーの結合、外部生成サービスへの依存はなく、素材にはユーザー自身のテイクとフォントのみを使用します。SKILL.mdにも認証情報不要、課金APIなし、外部アップロードなしと明記されています。青/緑ではなく黄判定とした理由は、実行時に予測可能であるものの完全ローカルではないネットワーク通信が存在するためです:① 各コマンド実行時にnpx経由でregistry.npmjs.orgから[email protected]を取得(バージョン固定で再現可能);② 初回背景切り抜き時に約170 MBの人物セグメンテーション重みを~/.cache/hyperframes/にダウンロード(初回のみのサプライチェーンリスク);③ 合成プレビュー/レンダリング時にcdn.jsdelivr.netから[email protected]を読み込むため完全なオフラインレンダリングではない点。これらは同様に黄判定となったembedded-captions(初回サードパーティ製パッケージ取得+ローカルモデル重み+jsdelivrのgsap)と同等です。TLSダウングレード、スクレイピング対策の回避、任意コード実行の余地は確認されず(サブプロセスで実行されるのは固定バイナリとバンドル済みスクリプトのみ)、オレンジへの引き上げは行いません。なお、手描きスタイルでは別スキルのエンジンを呼び出してそのout/に一時フレームを書き出しますが、「評価対象=スキル自身のディレクトリ」という基準に基づき評価ランクは変更せず、リスクとして記録しています。

5二重目の独立検証

  • [ok] skill 自身是否读凭据(黄/橙分界的关键) — 全目录 process.env / os.environ 只命中 build-sprites.py 的 P5_ENGINE(p5 引擎目录路径);无 API key、token、cookie、keychain、.env 读取。因此按范式的橙档第一条不成立,落黄。
  • [ok] 「外部资源」逐条回查调用点 — [email protected] 在 SKILL.md 与 prep-take.sh(HF="[email protected]")两处一致;ffmpeg/ffprobe 在 prep-take.sh 的 ffmpeg/probe() 内可验;fontTools 在 font-metrics.py import 段;GSAP CDN 在 worked-film.html 与 SKILL.md 的 Render time 条;p5 引擎调用在 build-sprites.py 的 subprocess.run(cwd=engine)。
  • [ok] prep 阶段的三者对齐自检是否真会失败退出(不是装饰性文字) — prep-take.sh 定义 fail(){ echo ... >&2; exit 1; },并对 plate 尺寸、matte 尺寸、三者的帧率与帧数各写了一条比较分支,任一不符即 exit 1;成功路径打印 'prep-take: plate and matte aligned with the portion ($pn frames @ $pr)'。
  • [ok] 手绘风格是否真的复用 p5-paint-animation 引擎,且临时帧会被清理 — build-sprites.py 用 subprocess.run(['node','render-anim.mjs', ...], cwd=engine) 渲染临时 sketch(写在 tempfile 目录,落在自己的 temp 而非引擎内),读引擎 out/_frames_<name>.anim/ 的 PNG 后调用 shutil.rmtree(fdir, ignore_errors=True);与 SKILL.md『frames are written to that skill's out/ and removed afterwards』一致。
  • [discrepancy] worked-film.html 能否按 SKILL 的 Build 步骤原样打开(参考片的可运行性声明) — SKILL.md 只说 'its media is not included',但参考片的 <head>/<body> 还引用了 assets/o2o-data.js(注释写 'window.O2O here = assets/kit/tables.js')与 assets/Inter-Variable.woff2、assets/InterTight-900.woff2 等字体文件;o2o-data.js 与这两个 woff2 均不在包内(全量清单已确认)。按 SKILL 的『Copy assets/kit/{cam3d.js,tables.js,finish.js} and metrics.js into the project's assets/』操作仍缺 o2o-data.js,参考片不能原样运行——读者须自行把 tables.js 改名/桥接成 window.O2O 并自带字体。该出入对 pin commit 有效。
  • [ok] 15 fps 网格与 0.2 s 提前量是否真在实现里(而不是只写在文档) — cam3d.js 顶部 var W = 1440, H = 1080, CX = 720, CY = 540, FPS = 30, POST = 15, K = 7;,并有 post(t) = Math.floor(t * POST + 1e-4) / POST;SKILL.md 给出 fr(t) = 2·round((t − 0.2)·15)(×2 即 30 fps 渲染下的 15 fps 映射),两处自洽。
  • [unlocatable] 『带 grade 与多重影渲染约 2× 成本』的量化声明 — SKILL.md 的 Limits 段写 'Rendering with the grade and many ghost layers costs about 2× a plain render.',包内没有基准脚本或计时数据可复现该倍数;本次为只读侦查且不得运行渲染,故仅作为文档声明记录,不作为已核事实使用。

6結論

  • AEの視覚効果を再現性のある決定論的メカニズムへと分解:手動のキーフレーム調整に頼らず、解析カメラ + 15 fpsポスタリゼーション + 7重ゴースト + 実測モーションテーブルで実現
  • 素材パイプラインに厳格な整合性ゲートを内蔵:plateおよびmatteがportionと完全に一致しない場合は直ちに終了し、合成全体のズレを未然に防止
  • ブラウザのテキストレイアウトに依存しない組版:advanceやベースラインをfont-metrics.pyで外部テーブル化し、エンジンが各グリフを独自配置した上でCSSのバリアブル軸を強制固定
  • 大まかな推定ではなく、ブラウザ内の実際のDOMおよびcanvasメトリクス(はみ出し単語、単語間の衝突)を直接読み取る高精度なQC
  • 前提条件とトレードオフの誠実な明記(Node 22+、4つのPythonパッケージ、フォントライセンス、生え際マットのジッター、話者が画面を占有する場合の制限事項など)
  • 最適な用途: 最適な用途:固定カメラで撮影された話者素材(デジタルヒューマンまたは実写)を用いて、5〜20秒程度の「テキストが3D空間で人物の周囲を演出する」シーンの制作。カメラが人物と文字の間を駆け抜け、視差によって字幕が深度別に分離され、ヒーローワードが頭部の後ろに隠れ、文字が人物の周りを回り、被写界深度が層間で切り替わり、テキストが15 fpsのゴースト付きでステップ送りされる表現に適しています。また、AEのPosterize Time/3Dカメラ/DOFの操作感をHyperFramesの再現可能なパイプラインに移植し、フレーム内はみ出しやグリフ衝突を規律正しくQCしたい場合にも最適です。
    不向きな用途: 非推奨の用途:① 通常の字幕(embedded-captionsなどを利用すべきケース);② 移動撮影/手持ちカメラや極端なクローズアップ(マットとプレートの変形は固定カメラを前提としており、頭部背後に余白がないため);③ 被写体を分離できない切り抜き精度の素材;④ オフラインの完成動画ではなくリアルタイム/インタラクティブなWebページを必要とする場合;⑤ npm環境がない完全なオフライン環境;⑥ 初回の約170 MBのモデルダウンロードおよびレンダリング時のCDN依存を許容できない場合。
    Install Agent-Ready
    ① Verified Mirror 2026-09-28
    Option A · Direct DownloadDownload camera-3d-captions.tar.gz
    sha256: 70cf48e51fa89f4e…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit ba7a0bb6d3.