コンテンツ制作 · nateherkai/hyperframes-student-kit

motion-showreel

NateのOpus 5.5「CLAUDE / MOTION REEL」のスタイルで、10〜30秒のモーションデザイン・ショーリールまたはブランドリールを設計・構築します。HUDでラベル付けされた制作チャプターを通じて変形する単一のブランドモチーフ、常駐HUD、120〜130 BPMグリッドに同期したカット、1秒未満のフラリー(急激な連続カット)、オープニングと呼応するロゴロックアップを特徴とします。ショーリール、シズルリール、ブランドリール、モーションリール、「Opusのようなリール」、「<ブランド>のモーションデザイン訴求」、音楽に合わせた15秒のブランドフィルムの作成、またはリファレンスリールの構造を分析してその熱量を別ブランドで再現したい場合に使用します。

L4 高権限 · 段階的認可と監査V1 コミット固定コマンド実行ネットワーク通信ファイル書き込みDual-pass Audit
Author nateherkaiGitHub nateherkai/hyperframes-student-kit ↗Stars 1070License MIT(仓库根 LICENSE = MIT License, Copyright (c) 2026 Nate Herk);另有 licenses/PIPELINE-USE-PERMISSION.txt(教学包再分发授权)与 licenses/HYPERFRAMES-LICENSE(Apache-2.0,随包 HyperFrames skill 的上游许可);GitHub API 因附加许可把仓库标为 NOASSERTIONCommit 0d30152a82
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

1仕組みと動作原理

「ポートフォリオ級のショーリール」を再現可能な構造に分解:カットごとにバラバラなエフェクトを盛るのではなく、HUDで命名された6〜7の制作工種チャプターを1つのモチーフが一貫して変化し、最後にモチーフへと回帰する構成をとる。

.claude/skills/motion-showreel/SKILL.md
A showreel promises that every frame was a decision. … Hard cuts are reserved for the flurry.
ここでの処理内容:「モチーフ変形チェーン」を厳格な構文として定義—各トランジションで現在のオブジェクトを次のオブジェクトへと変形させ、ハードカットはflurryにのみ限定。その上にHUD、墨/紙/1つの強調色+1つの隠しアクセントカラー、拍同期、物理質感を重ね合わせる。

HUDは常駐レイヤー:トリムマーク、タイトル行、スペック行(解像度/フレームレート/実測BPM)、タイムコード、チャプタールーラー、チャプター名を表示し、背景の明暗に応じて墨/紙の反転を行う。

.claude/skills/motion-showreel/SKILL.md
**Persistent HUD.** Corner crop marks … It flips ink/paper with the background.
ここでの処理内容:HUDは単なる装飾ではなく、「全フレームが意図的な決定である」ことを可視化するメタ言語として機能。実装上は`templates/hud.html`の`hudFrame(t)`(tに対する純粋関数)によって駆動され、シーク安全性を担保する。

編集を120〜130 BPMグリッドに完全同期:ハードカット、白フラッシュ、階調反転はグリッド線の±2フレーム以内に収め、中間点直前に「ドロップ前のタメ(無音・休止)」を設ける。

.claude/skills/motion-showreel/SKILL.md
**Cut on the beat, animate on the off-beats.** … comes before the midpoint hit.
ここでの処理内容:「音楽に合わせて編集する」という感覚的な作業を計測可能な制約へ変換。`references/reference-breakdown.md`におけるリファレンス動画の拍ごとの定量的分解データを論拠とする。

拍数に基づく構成配分:展開約75% / flurry 13% / 結び12%の比率とし、加速させたのち維持する。密度にも呼吸(緩急)を持たせる(単一オブジェクト → タイポグラフィの壁 → 100分割グリッド → 数千のパーティクル → flurry → 単一の単語)。

.claude/skills/motion-showreel/SKILL.md
**Accelerate, then hold.** … and 12% resolve.
ここでの処理内容:15秒の編集に適用可能な比率テンプレートを定義(物理挙動 4拍 → タイポ 8拍 → 各4拍の3チャプター → 4拍flurry → 4拍ロゴロックアップ)。

スタイルは形容詞ではなく秒単位の定量的分解から導出:BPM、ビートアンカー、各ハードカットのタイミング、輝度リズム、オーディオレベル。

.claude/skills/motion-showreel/references/reference-breakdown.md
- **Tempo:** 128 BPM … Grid anchor about 0.51s. … - **Hard cuts land on beats:** 1.77 (flash) … within 2 frames of a grid line.
ここでの処理内容:「なぜこのリファレンスが優れているのか」を再利用可能な数値データへと変換し(`references/`に格納)、同一のツールを用いて自身の制作結果を測定・比較検証する(Step 8)。

音楽はカット前に位相を測定:全帯域の位相ではなくKick帯域(120Hzローパス)の位相でアライメントを行い、スプライスごとの半拍のズレを防止する。

.claude/skills/motion-showreel/SKILL.md
`music-grid` prints the period, the **kick-band phase** (use it) … the script warns when the two disagree.
ここでの処理内容:拍合わせで陥りがちなミス(裏拍のハイハットへの誤吸着など)をスクリプトの動作仕様として防止。`music-grid.mjs`がKICKバンドの位相を抽出しコントラスト比を算出、不整合時に警告。カット後に再測定(25ms以内を要求)し、実測BPMをHUDに反映する。

アニメーションはフレームごとの純粋関数(時間 → 全状態)で駆動し、Canvasエフェクトはシード値から描画することでシークの決定論的再現性を担保。

.claude/skills/motion-showreel/SKILL.md
Put a **per-frame driver** on the timeline … never from `Math.random()` at draw time.
ここでの処理内容:HyperFramesの一時停止タイムラインと任意位置へのシークには完全な再現性が必須となるため、描画時の`Math.random`を禁止。複数Tweenが重複して操作するプロパティ(共有フラッシュレイヤー等)もフレームごとの直接計算にフォールバックし、後方シーク時のスタックを回避する。

検証は同一の物差しで行う:カットポイントの拍からのズレ≤35ms、チャプターごとの輝度交代、ドロップ前休止の有無、トランジションごとの10フレーム連続ストリップ抽出。HUDを隠してもブランドを認識できるかをブランドテスト基準とする。

.claude/skills/motion-showreel/SKILL.md
- Run `analyze-reference.mjs` on your own render with `--bpm` and `--phase`: cut … luminance must alternate by chapter … Brand test: pick 6 random frames. … read as the brand with the HUD covered.
ここでの処理内容:検収基準を「良さそうに見える」から同一計測ツールによるリグレッションテストへと昇華。HUDだけに依存した見栄えにならないよう、証跡を`VERIFY.md`に出力する。

2コア機能

0110〜30秒のブランド/モーションショーリールのエンドツーエンド制作フロー(BRAND.md取り込み → STORYBOARD.md → 音楽/拍グリッド → SFX/ミックス → ビルド → 検証)
02リファレンス動画の逆コンパイル定量分析:コンタクトシート、フレームごとの輝度差分、オーディオRMS、オンセット検出、各カット点と拍/半拍のオフセット算出
03ビートツールチェーン:BPM/位相測定(music-grid)、拍に基づくチャプター分割とフレームチャート出力(beatgrid)、カットグリッドへの音楽テイクの結合(splice-music)
04有償アセット生成連携(Kie.ai):Sunoによるインスト楽曲、SeedreamのImage-to-Imageによるロゴ輪郭保持、KlingのImage-to-Videoによる5秒カメラワーク生成
05SFXスイート生成とプリミックス:視覚イベントに合わせたキュー配置、単一のマスター音源(master.wav)の合成出力
06HyperFrames/GSAP構築規約:単一の一時停止タイムライン、チャプターClipレイヤー、最前面HUD、transform/opacityのみのTween、レイアウト計測の初回1回限定
07チャプター技法ライブラリ(物理スカッシュ&ストレッチ、キネティックタイポ、グリッド/パーティクル、マテリアルlookdev、flurry、ロゴロックアップ)の提供(各項にリファレンス手法、シーク安全な実装、ブランド差し替え指針を含む)

3外部依存関係

KindDependency / Endpoint
cliFFmpeg / ffprobe(接触表、亮度/RMS 分析、音乐拼接、premix)
apiKie.ai 任务 API(Suno 音乐 / Seedream 图 / Kling 视频;付费、消耗本人额度)
apiKie.ai 文件上传(把本地参考图以 base64 上传换 downloadUrl)
apiElevenLabs 音效生成(付费)
cliHyperFrames CLI(lint / Studio 预览 / draft render / 最终 render)
package兄弟 skill 依赖:hyperframes、gsap,与仓库根 MOTION_PHILOSOPHY.md / video-storytelling
network字体:要求下载到项目 assets/fonts/ 用 @font-face(远端拉取发生在取材期,不在渲染期)

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

安全運用のための推奨統制措置
Agent 向け
段階的・都度認可、サンドボックス推奨
管理者向け
承認フロー、ロールバック可能、全履歴監査
判定根拠(ファイルパスと抜粋)
  • scripts/: ローカルスクリプト・コマンドの実行: node scripts/analyze-reference.mjs <video> <out>(ffmpeg/ffprobeのspawnSync呼び出し)
  • 网络端点: 外部ネットワークアクセスの宣言: https://api.kie.ai/api/v1/jobs/createTask(生成タスクの作成)
  • 本地工作目录: ファイル読み書きおよび成果物の出力: video-projects/<slug>/:BRAND.md、STORYBOARD.md、assets/{audio,img,video,fonts}
監査ノート: オレンジ判定(中リスク)のトリガーとなった2点はいずれもスキル自身のディレクトリ内で特定されています:① **環境変数の認証情報を読み取り、キーを用いて外部生成サービスを呼び出す挙動**—`scripts/kie.mjs`は`process.env.KIE_API_KEY`を取得し、未設定の場合は上位ディレクトリを最大8階層探索して`.env`から正規表現で`KIE_API_KEY`を抽出した上で、`Authorization: Bearer`ヘッダーを付与して`api.kie.ai`の有償タスクAPIを呼び出し、ローカル画像をBase64形式で`kieai.redpandaai.co`へアップロードします。`scripts/sfx.mjs`も同様に環境変数または親ディレクトリの`.env`から`ELEVENLABS_API_KEY`を読み込み、ElevenLabsの音効APIを呼び出します。② **ユーザーアセットの外部送信およびアカウントクレジットの消費**—`kie`の`image`/`video`サブコマンドはユーザー提供のロゴや静止画をアップロードして生成(Seedream/Kling)を実行します。また、`SKILL.md`では音楽およびSFX生成を有償呼び出しと明記し、事前のユーザー確認を義務付けています。なお、セキュリティ低下(TLSの無効化や`--no-verify`など)、自動化検知回避、サンドボックス無効化、任意コード実行の余地は確認されていません。子プロセス呼び出しは`ffmpeg`/`ffprobe`等の固定バイナリのみに限定されており、全スクリプトは配布物に含まれ1行ずつ監査可能です。キー欠落時も静かに縮退動作することはなく、明示的にエラー終了します。

5二重目の独立検証

  • [ok] KIE_API_KEY 是否真的被读取并外发(橙档关键证据) — kie.mjs:19 `if (process.env.KIE_API_KEY) return process.env.KIE_API_KEY;`,随即 loadKey() 向上 8 层找 .env 并抓 KIE_API_KEY,无 key 抛 'KIE_API_KEY is not set. Add it to .env (see docs/TOOLS-AND-API-KEYS.md).';带 Authorization: Bearer 调 createTask/recordInfo/credit。调用点真实存在。
  • [ok] ELEVENLABS_API_KEY 读取与外发是否属实 — sfx.mjs:15 `if (process.env.ELEVENLABS_API_KEY) return process.env.ELEVENLABS_API_KEY;`(无 key 抛错);文件头注释声明 PAID 并要求先确认。
  • [ok] 是否存在文档未提及的隐藏网络调用或脚本 — 全目录 URL/网络 token 扫描只命中上述网络点与 docs.kie.ai 文档链接;beatgrid.mjs 纯计算,其余 mjs 仅 ffmpeg 子进程。未发现混淆代码、动态 eval 或静默外发。
  • [unlocatable] 参考片量化数字能否在源码内复现 — references/reference-breakdown.md 的 128 BPM、各切点时间、亮度序列与 RMS 值,是作者对一条私有样片(Opus 5.5 的 CLAUDE / MOTION REEL)跑 analyze-reference.mjs 的结果;pin 仓库内既无该样片也无原始报告输出,本次只读侦查不运行分析,故这些数值仅作「文档声明」记录,不当已核事实使用(分析器能力本身已可读验证)。
  • [discrepancy] 「付费调用先确认」是技术门禁还是提示层约束 — [判定:提示层,非技术强制]脚本头注释显式声明 PAID,SKILL.md 在音乐与 SFX 两处也写 paid call / confirm before running;但脚本没有任何交互式确认开关或 --dry-run,门禁靠 agent 遵守。已在 risks 中如实标注。
  • [ok] HUD 模板与 SKILL.md 的 HUD 规格是否一致(文档/资产是否脱节) — templates/hud.html 头注释要求把 <style> 粘进合成、#hud 作为 #root 最后子节点、由 hudFrame(t)(t 的纯函数)驱动,并提供 --hud-acc / .hud-tl / .hud-tr / #ptime / CH / SEGB / paperRanges 的品牌替换清单,与 SKILL.md 第 4 条规格一一对应。

6結論

  • 「ポートフォリオ級のクオリティ」を抽象的な形容詞ではなく、実行可能な構文と定量的比率に落とし込んでいる点
  • 映像に先行するリズム設計:Kick位相とBPMを事前に測定した上で32拍をスプライスし、編集後に再測定して実測BPMをHUDに書き出す仕組み
  • コンパクトかつ単機能で、全コードが監査可能なスクリプト群(解析、拍抽出、結合、ミックス、生成クライアントの完全分業化)
  • 同一の基準による検収:自作の完成動画を解析ツールで測定し、各トランジションの10フレーム連続ストリップを確認。HUDなしでもブランドを識別できる品質を担保
  • シーク安全性と決定論の厳格なルール化(フレーム単位の純粋関数、シード値固定、レイアウト属性のTween禁止、レイアウト測定の1回化、時間制御外動画クリップの排除)
  • 有償機能利用におけるクォータ管理と承認意識:スクリプトコメントとドキュメントの両方でPAIDを明記し、既存アセットの再生成をスキップする仕様
  • 最適な用途: 10〜30秒のブランドまたはモーションデザインショーリールを制作したいクリエイターに最適:明確なブランドアセットと音楽予算を持ち、拍グリッドに沿った制作や「まずリファレンスを定量測定し、完成品も同じ物差しで測定する」というエンジニアリング的ワークフローを受け入れられるユーザー。また、リファレンス映像が優れている要因を逆引き分析するテンプレート(まずはreferences/reference-breakdown.mdを参照)としても適しています。納品物はHyperFramesのindex.html、レンダリングMP4、およびVERIFY.mdの検証ログとなります。
    不向きな用途: 不向きなケース:① ナレーション、実写主体の映像、または複数の異なるロケーションを要する長尺動画(当スキルは純粋なモーションデザイン/音楽駆動型です);② 予算がない、または有償生成APIの利用を希望しないユーザー(音楽、SFX、キービジュアル/カメラワーク生成は有償パスを使用します。持ち込み素材での代替は可能);③ ブランド素材を外部サービスにアップロードできない環境;④ Node 22+またはFFmpegが利用できない環境;⑤ テンプレートをそのまま適用して出力したいユーザー—SKILL.mdは、サンプルの指示書を複製用テンプレートではなくチャプターマッピングの概念モデルとして扱うことを厳格に義務付けています。
    Install Agent-Ready
    ① Verified Mirror 2026-09-28
    Option A · Direct DownloadDownload motion-showreel.tar.gz
    sha256: cc870e83245405bd…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 0d30152a82.