汎用クレイ・ストップモーションテーマ動画
このスキルは、視覚スタイルが安定し、テーマが交換可能な短い動画を生成するためのものです。「クレイ質感＋レイヤード素材＋ストップモーション＋字幕と音声」の汎用的な製造方法を記述します。都市、日付、キャラクター、ランドマーク、乗り物、プロット、効果音はすべて、ユーザーの現在のブリーフから読み取る必要があり、特定のプロジェクトにハードコードしてはいけません。
最終成果物には、再実行可能な HyperFrames ソースプロジェクト、実際のローカル素材、オーディオ、MP4 エクスポート、および最終フレーム抽出チェック画像を含める必要があります。未レンダリングの HTML プレビューは完成品とは見なされません。
まずテーマ変数を明確にする
コードを書く前に、ユーザーの要件から以下を抽出して記録します：
- テーマを一文で：誰がどの世界で何を達成するか；
- 時間、場所、時代、ランドマーク、または世界観；
- キャラクターの数、外見、服装、小道具、アクション；
- ビジュアル素材：粘土、段ボール、布、木、金属、またはその他の手作り質感；
- 色のソースとオープニング/クロージングの言語；
- 長さ、アスペクト比、プラットフォーム、字幕、音声要件。
ユーザーがリファレンス動画のみを提供した場合、まずその素材、カットのテンポ、構図、字幕、音声を分析し、その後テーマ変数を DESIGN.md に書き込みます。リファレンス動画は手法と雰囲気を提供しますが、新しい動画のストーリーを自動的に決定することはありません。
標準ワークフロー
- リファレンスを分析し仮説を書く。 長さ、アスペクト比、カットのテンポ、ストップモーションの停止、素材、字幕の位置、音楽、イベント効果音を記録します。確認できない内容は仮説として書き、事実として偽装してはいけません。
- 最初にデザインドキュメントを書く。
DESIGN.md、STORYBOARD.md、および素材リストを作成します。テーマカラー、素材、フォント、カットのタイミング、字幕、オーディオのキュー、エンドクレジットのテキストを定義します。 - レイヤード素材を生成する。 背景、キャラクター、小道具、ランドマーク、テクスチャ、ローカルエフェクトをローカルの PNG/JPG/WAV として保存します。キャラクターと前景の小道具は透明 PNG を優先し、カメラ位置、照明、スケール、素材の一貫性を保ちます。
- 素材帰属監査を行う。 各キャラクター/小道具 PNG を開き、そこにすでに含まれているバッグ、カップ、カード、帽子、影などのオブジェクトをリストします。各可視オブジェクトは、キャラクター PNG、独立した素材レイヤー、または HTML/CSS のいずれか1つのソースのみを持つ必要があります。キャラクター PNG にすでに描画されているオブジェクトに、簡略化された CSS バージョンのレイヤーを追加してはいけません。詳細は
references/compositing-audit.mdを参照してください。 - 最初に静的画面を完成させる。 ルートエントリには
index.htmlを使用します。縦画面が必要な場合は、compositions/に独立したコンポジションを配置します。各カットを静的な状態で成立させてから、動きを追加します。 - 決定論的なストップモーションを追加する。 GSAP の一時停止タイムライン、シーンの開始/終了時間、および限られた回数の
steps(n)を使用します。小さな平行移動、スケーリング、回転、震え、停止を使用して、手作りのストップモーション感を表現します。Math.random()、Date.now()、repeat: -1、および互いに上書きする CSS/GSAP transform は禁止です。 - 字幕とエンドクレジットを追加する。 字幕は HTML レイヤーであり、異なるアスペクト比でも読みやすいことを保証します。エンドクレジットにはユーザーが必要とする正式なテキストのみを配置し、
preview、draft、test、Codex、または内部プロンプトを禁止します。 - レイヤード音声を追加する。 音楽とイベント効果音はそれぞれローカルオーディオとして使用します。各
<audio>にはdata-start、data-duration、data-track-index、data-volume、フェードイン/アウトを明確に記述します。ネストされた縦画面コンポジションの非ゼロ開始キューにはdata-hf-media-start-basis="local"を追加します。プレースホルダーオーディオは下書きにのみ使用でき、最終タイムラインに混入してはいけません。ホワイトノイズを波、風、炎などの自然環境音に直接代用してはいけません。適切な素材がない場合は空白にするか、音の密度を下げます。納品前にreferences/audio-layout.mdに従って各トラックとミックスを個別にチェックします。 - プラットフォームに合わせて再構図する。 縦画面は横画面を単に切り抜いてはいけません。
data-width="1080" data-height="1920"を設定し、テーマの主体、主要なランドマーク、字幕を保持し、テキストを中央安全ゾーンに配置し、キャラクターと小道具を再配置します。詳細はreferences/vertical-export.mdを参照してください。 - レンダリング、フレーム抽出、およびレビュー。 lint、validate、レンダリング、ffprobe、およびコンタクトシートを実行します。アスペクト比、長さ、字幕、素材の階層、重複オブジェクト、ドリフトする四角形、末尾の内部マーカー、H.264 ビデオ、AAC オーディオをチェックします。個別トラックと完成ミックスについて、実際に冒頭 0～5 秒、主要なトランジション、および末尾を聴取します。ffprobe とレベルチェックは聴感チェックの代わりにはなりません。詳細は
references/workflow.mdとreferences/audio-layout.mdを参照してください。
汎用プロジェクト規約
- 1つのルート
index.htmlを維持します。代替アスペクト比はcompositions/に配置し、HyperFrames が複数のルートエントリを検出しないようにします。 - 実際のランドマークやテーマの主体には実際のラスタ素材を使用します。CSS ジオメトリ図形は一時的なレイアウトにのみ使用でき、最終的なビジュアルアセットとして使用してはいけません。
- テーマコンテンツはブリーフによって決定され、スキル内に都市、路線、日付、職業、または固定キャラクターを事前に設定してはいけません。
- 各小道具は素材リストで「PNG に内蔵」または「独立レイヤー」として明記する必要があります。内蔵小道具の場合は、同じセマンティクスの CSS レイヤーを描画してはいけません。
- 環境小道具が必要な場合は、改札、ストーブ、ドア、列車、雨粒など、明確な ID とコメントを使用し、環境オブジェクトがキャラクターに貼り付いたマークのように見えないようにします。
- 実際の企業ロゴ、個人情報、または無許可の音楽は使用しません。汎用看板、生成テクスチャ、ローカル決定論的オーディオを優先します。
検証コマンド
npm install
npx hyperframes lint
npx hyperframes lint compositions/vertical.html
npx hyperframes validate --no-contrast
npm run render
npm run render:vertical
縦画面エクスポート後、実際のプロジェクトの ffprobe-static を使用してチェックします：
FFPROBE=$(node --input-type=module -e "import p from 'ffprobe-static'; console.log(typeof p === 'string' ? p : p.path)")
python3 scripts/check_render.py outputs/final-vertical.mp4 \
--ffprobe "$FFPROBE" --width 1080 --height 1920 --max-duration 60
最終コンタクトシートには、少なくともオープニング、メインアクション、トランジション、クライマックス/結果、およびエンディングを含める必要があります。レンダリング成功は視覚的正しさを意味しません。説明できない白、茶、青、灰色の四角形、重複するランドマーク、重複する小道具、ドリフトするオブジェクト、または内部プレビュー文字が現れた場合は、素材帰属監査に戻って再処理する必要があります。
サポートドキュメント
references/workflow.md：汎用ブリーフ、素材リスト、カット構造、および承認基準。references/compositing-audit.md：内蔵小道具の帰属、重複レイヤー、およびビジュアルアーティファクトのチェック。references/vertical-export.md：9:16 安全ゾーンと再構図ルール。references/audio-layout.md：汎用音楽/効果音のレイアウトとラウドネスチェック。