App 3D video
概要
このMac上で完全にレンダリングされる20秒の縦型ビデオ。明るいアイボリー色の世界に実在するSceneKit iPhone、アプリのマスコットキャラクター(跳ね回り実際のUIを押す)、価値を最優先した見出し、そして跳躍ごとにマリンバの音が合うオリジナルのスイング楽曲が含まれます。template/ は完全なサンプルプロジェクト(「MyApp」という服薬リマインダーアプリ)で、そのまま実行できます。ストーリー、UI、データ、ブランド、音楽は変更してください。ユーザーから特に指示がない限り、外観は維持します。
必須サブスキル: motion-video(エンジン、ビートグリッド計画、スチルレビュー)。すべての値(パレット、サイズ、ライト、音楽、落とし穴、セカンドデバイス、リアル vs イラストレーティブ)は、このファイルの隣にある reference.md に記載されています。
2つのスキルで異なる場合は、こちらが優先されます:template/ をコピーし、bash mv3d.sh(mv.sh ではありません)を実行し、マスコットのバウンス、キラキラ、紙吹雪は、motion-videoのヘルスプリセットでは避けられますが、こちらの外観の一部とします。データを表示するUIは依然としてディップとポップのみを行い、マスコットがバウンスします。
テンプレートから開始
cp -R ~/.claude/skills/app-3d-video/template ~/Movies/MotionVideo/<slug>
cd ~/Movies/MotionVideo/<slug>
bash mv3d.sh audio # score.swift -> music.wav、レベルを出力。スチルの前に実行
bash mv3d.sh stills 0.5,4.6,10.1 # BEATS -> stills/ + sheet.png
bash mv3d.sh video # out.mp4、1台の電話で20秒の場合約5分。バックグラウンドで実行
bash mv3d.sh frames out.mp4 2.5,6.3 # SECONDS -> check/ + check_sheet.png
ブランディングは scenes.swift の先頭にある BRAND ブロックにあります:APP_NAME(エンドカードのワードマーク)、APP_VERSION(3Dの数字。長さが変わったらサイズと位置をスチルで再確認)、LABEL(最初の見出しの上の小さなラベル)、END_PILL(エンドカードのグラデーションピル)、マスコットの色。次に、render() 内のすべての headline(...) 呼び出し、ヘッダーコメント、plan.md を置き換えます。「COMING IN …」と「COMING SOON」はティーザー用の文言です。ローンチの場合は、ユーザーにラベルとエンドカードのテキストを尋ねてください。
サンプルシーン(Live Activityカード、Lock Screenウィジェット、週間ピルボックス壁紙)はサンプルアプリのものです。ユーザー自身のUIに置き換え、テクニック(フレームごとの2Dキャンバスを電話画面にマッピング、マスコットが要素の上に立って押す、1つのクロックで駆動するタイムラプス)は維持してください。
ワークフロー
- 事実収集。 各機能についてユーザーのリポジトリを読み取ります。実際の文字列、レイアウト、パレット、状態、有料層のゲーティング、アプリアイコンの色(マスコットの色になります)。コードで答えられないこと(どの機能、正確な名前、無料か有料か、ティーザーかローンチか、長さ。デフォルトは20秒縦型)を尋ねます。リポジトリにUIがない機能:デザインまたはスクリーンショットを尋ねます。ない場合は、アプリのデザインシステムから描画し、イラストレーティブとしてリストにし、最初のスチルシートに表示します。
- マスコット。 デフォルトは、アプリのブランドカラーを使用した2トーンカプセルです。アプリに独自のマスコットやシンプルなアイコン形状がある場合は、
buildCapsule()でSceneKitプリミティブから構築します(CAP_HALF、ユニットサイズ、マテリアルリストはそのままにして、影と2パスが機能するようにします)。 - 計画
plan.mdをビートグリッド上に作成します(96 BPMスイング、8小節 = 20秒)。1機能 = マスコットが実際のUIと1回インタラクションします。午前中1回、1つのデータセット、1つのクロック。電話がステージです。セカンドデバイス(Watch、iPad)は、そこに存在する機能のためだけに登場します(reference.md、「Second device」)。リアル vs イラストレーティブをリストします。 - コピー。 見出し = ユーザーが得られるもの。機能名ではありません。有料のものにはサブラインにPROチップを付けます。ヒューマナイザースキルがインストールされている場合は、すべての行にそれを実行し、その後事実を再確認します。
- スコア。 サウンドは維持します(ウクレレ、マリンバ、ホイッスル、スナップ、Eメジャー、エンドカードのダウンビートのシンセチャイム)が、新しい振り付けに合わせて新しいコード、メロディ、ヒットを書き込みます。すべての着地は、その視覚的なビート上のマリンバノートです。アプリに独自の通知音がある場合は、シンセチャイムを置き換えることができます(
score.swiftの最後を参照)。スコアのキーをそれに合わせます(motion-videoreferences/score-guide.md)。ユーザーが別の音楽をリクエストした場合は、楽器も変更します。ターゲットは −13…−15 dBFS、クリッピング0%です。 - スチル、最低2ラウンド、ジャンプ中のビートも含みます。チェック:マスコットが情報を覆い隠していない、押している要素で一時停止する、影が見える、電話の上部が見出しの下にある、コピーの下に何も表示されていない、実際のUIの色がオレンジの見出しと競合していない。
- レンダリング をバックグラウンドで実行し、次にMP4で
framesを実行して確認します。 - 納品 先は
~/Downloads/<App>_<Topic>_3D_<N>s[_vN].mp4で、ファイルをユーザーに送信または表示します。秒単位でビートバイビート、リアル vs イラストレーティブ、オーディオは測定によって判断されたことを報告します。以前のバージョンはv1/に保存します。ユーザーが承認するまでビデオは1つの言語に保ちます。追加のロケールごとに完全な再レンダリングが必要なので、ユーザーが希望するロケールを尋ねます。
外観の契約
- 柔らかな日差しのあるアイボリー/オート麦の世界。暗いスタジオの背景、彩度の高いピンクは禁止。
- ニュートラルなチタン電話、フォトスタイルのベージュ壁紙、ダークインクの時計、画面上のカード用の明るいパレット。
- SF Pro Rounded ヘビー の見出し。2行目はオレンジのグラデーション。
- マスコットはインタラクションします(着地、踏みつけ、ヘッドバンプ、要素間を跳ねる)。ただ周回したりポーズを取ったりするだけではありません。
- リアルな柔らかい影。被写界深度なし、ブルームなし。
よくある間違い
| 間違い | 修正方法 |
|---|---|
frames にビートを渡す、または stills に秒を渡す | frames = 秒、stills = ビート(20秒 = 32ビート) |
| マスコットが着地した瞬間にボタンから離れる | 約0.2ビート留まり、押していることがわかるようにする |
| マスコットが時刻やラベルの上に立つ | 覆い隠す情報の横に配置する |
opacity でメッシュをフェードする | 移動、スケーリング、または非表示にする |
| ブランドカラーがオレンジの見出しグラデーションと競合する | ブランドはマスコットとバージョン番号に使用し、見出しのグラデーションはユーザーからリクエストがあった場合のみ変更する |