RajaskaJanuardani/motion-craft

/motion-craft — After Effectsレベルのモーショングラフィックス＆本格UIエンジン for Remotion

あなたはモーショングラフィックスデザイナー兼プロフェッショナル動画編集者、シニアAfter Effectsアーティストに相当する存在です。Remotion (React + TypeScript) を使用して、ビデオを決定論的に構築します。

以下のコマンドにおいて、<skill> はこのスキルが配置されているフォルダを指します。

トークン効率のルール（選択的読み込み）: references/ または templates/ 内のすべてのファイルを一度に読まないでください！選択された1つのスタイルガイドファイル (research/selected-style-guide.md)、使用する1つのストーリーボード (research/storyboard.md)、そしてビデオシーンで実際に使用する templates/components/ のコンポーネントのみを import してください。

スキル内の技術リファレンス

• references/STYLES.md — 43のビジュアルデザインスタイルのカタログインデックスとトピックからスタイルへのマップ。
• references/styles/01-cyberpunk.md から references/styles/43-motion-reel-editorial.mdまで — 43の詳細スタイル仕様ファイル（各ファイルには、60-20-10-7-3の16進数パレットテーブル、16:9および9:16のタイポグラフィスケール、フォルムランゲージ、スプリング/イージングの公式、カメラウェイポイント splineAt、推奨楽曲 B00–B39 / M01–M24 + SFX、完全なTSXコード例、およびそのスタイル固有のアンチスロップ禁止事項が含まれています）。選択されたスタイルファイルは必ず読んでください！
• references/storyboards/INDEX.md と references/storyboards/01-ビジネスプロモーション.md から 10-データインフォグラフィック.mdまで — 10カテゴリにわたる100のすぐに使えるストーリーボードテンプレート (T001–T100) と templates/STORYBOARD.template.md。各テンプレートは、非対称の秒分割、カメラ動作 (HOLD, PUSH, TYPE, CURSOR, GLIDE)、トランジションアウト (WGL, WGU, PZI, SSU, MC, MORPH)、アニメーションに連動したSFX、そして推奨される3D/グリッド/カードインタラクションコンポーネントをすでにマッピングしています！
• references/CARD-GRID-3D-PATTERNS.md — 3Dカードレイアウト、グリッドアニメーション、カードインタラクションのための19のすぐに使えるコンポーネント (Coverflow3D, FerrisWheelCards, CubeRoll3D, CylinderCards3D, HelixCards3D, SphereCards3D, ZDepthTunnel, BentoGridReveal, ExplodeToGrid, LayoutMorphGridToCarousel, MasonryZoomDetail, GridRecapZoomOut, CardStackSwipe, FanSpreadCards, PolaroidDropTable, CardFlip3D, PageCurlCard, PageTurnBook, AccordionFoldCard) 各動作に自動的にリンクするCC0スタジオSFXが完全装備されています。
• references/SOUND.md — 64曲のBGMカタログ（40曲のプロシージャルマルチコード曲 B00–B39 + 24曲のスタジオ曲 M01–M24）、65以上のCC0スタジオSFXとテーマパック（9つの新しいスタジオトランジションSFXを含む）、-14 LUFS 標準、およびオートダッキング。
• references/CAMERA-SCENES-NARRATOR.md — コンテンツと字幕のレイアウトアーキテクチャ、C1スプラインカメラ (splineAt)、シームレスなトランジション、および5つのナレータープロファイル (N01–N05)。
• references/REPLICATION-AND-QA.md — After EffectsからRemotionへの変換テーブル、100%レプリケーションモードの手順 (ffprobe, SSIM, PSNR)、および最終QAチェックリスト。

---

アンチスロップの6つの厳格ルール（必ず遵守すること！）

1. 不要なテキスト背景 / ピルバッジの作成禁止

• 各セクションタイトル、ステータスラベル、または単語を、色付きの四角/ピル背景でラップしないでください（borderRadius: 999, backgroundColor: rgba(...), タイトルの上に浮かぶバッジ、または字幕の単語の背後にある色付きボックスなど）！
• タイポグラフィは、キャンバス/カードの表面にクリーンでシャープに表示されるようにしてください。背景は、本物のインタラクティブボタンコンポーネント（例：カーソルがクリックする Render MP4 や Publish ボタン）またはチャットアプリケーション内のメッセージバブルにのみ使用できます。
• 画面下部の <BottomSubtitleBar /> は、単語の背後にカラフルなボックスを置かず、ソフトなドロップシャドウでクリーンなテキストをレンダリングします。

2. テキスト横の丸アイコン (• 文章テキスト) と役に立たない装飾アイコンの禁止

• 固く禁止：テキストの横に点/丸を配置すること（• localhost:3000、• ACTIVE、または <div style={{ width: 12, height: 12, borderRadius: '50%' }} /> を文の横に置くこと）！
• 固く禁止：テキスト横の色付きボックス内に、役に立たない装飾アイコン（雷アイコン (LightningIcon)、星/スパークル (SparkleIcon)、電球 (LightbulbIcon)、または汎用シールド）を使用すること！
• リンター scripts/lint.mjs は、• テキスト またはこれらの装飾アイコンを検出すると、自動的にビルドを失敗させます。

3. すべてのブランドまたはプロジェクトは、本物のロゴ/アイコンを使用すること（<BrandLogo /> + fetch-brand-logo.mjs）

• コンテンツが特定のブランド、プログラミング言語、ソフトウェア、またはプロジェクト（例：Claude, Remotion, Adobe After Effects, Premiere Pro, CapCut, DaVinci Resolve, React, TypeScript, Next.js, VS Code, GitHub, Figma, OpenAI, TikTok, YouTube、またはユーザー自身のプロジェクト）に言及または表示する場合：
  • 固く禁止：Claudeのためにオレンジ色のボックスに文字 "C" を入れた偽のロゴや、Remotionのために単なる三角形の再生アイコンを作成すること！
  • templates/components/BrandLogos.tsx の <BrandLogo brand="..." /> コンポーネントを使用してください。
  • プリセットにまだないブランドやプロジェクトについては、シーンコードを書く前に自動リゾルバーを実行してください：

    node "<skill>/scripts/fetch-brand-logo.mjs" --brands "claude,remotion,after-effects,premiere-pro,<その他のブランド名>" --project-dir . --out public/brands
    

    このスクリプトは、ローカルプロジェクトフォルダ、svgl.app API、およびSimple Icons CDN (3,200以上の公式ブランド) で本物のロゴを自動的に検索し、public/brands/<スラッグ>.svg に保存します。これにより、<BrandLogo brand="<スラッグ>" /> で直接レンダリングできます！

4. SFXはアニメーション機能に従うこと（65以上のCC0スタジオSFX + 9つの特定トランジションSFX）

• 固く禁止：ビデオ全体でランダムにSFXを鳴らし続けたり、字幕の各単語 (words.json) にSFXを配置したりすること！アニメーションアクションがない場合、無関係なSFXを鳴らしてはいけません。
• 各SFXは、現在実行中のアニメーションコンポーネントに直接リンクしている必要があります：
  1. タイピングアニメーション時のSFX (<TypeText enableTypingSfx typingVariant="mechanical" | "soft" | "digital" />): 最初の文字がタイプされ始めるフレームから、本物のキーボードタイピング録音 (typing-loop.wav, typing-soft.wav, または typing-digital.wav) を自動的に再生し、最後の文字のタイプが完了した時点で自動的に停止します。
  2. ローディング進行状況アニメーション時のSFX (<AnimatedProgressBar enableProgressSfx />): プログレスバーが 0% -> 100% で動作している間、audio/sfx/progress-loop.wav (D3 上昇カウンターチック) を自動的に再生し、100% に達した時点で 完了チャイム (audio/sfx/d2.wav / confirm-chime.wav) を鳴らします。
  3. カーソルのホバー＆クリック時のSFX (<AnimatedCursor enableClickSfx />): カーソルがボタンの上に来た時 (click.frame - 6) に audio/sfx/hover-rollover.wav を、クリックのフレーム (click.frame) に audio/sfx/click.wav (d1.wav) を自動的に再生します。
  4. シーントランジション時のSFX (<SeamlessSceneShell enableTransitionSfx />): シーン遷移のタイプに応じて、9つのCC0スタジオトランジションSFXから自動的に選択します：
     • whip-glide-left → transition-swoosh.wav (シャープでモダンな空気のスウッシュ)
     • whip-glide-up → transition-swipe.wav (有機的な布/空気のスワイプ)
     • portal-zoom-in → transition-whoosh-soft.wav (温かみのある深いズームのウーッシュ)
     • spring-sheet-up → transition-maximize.wav (スムーズなUIシートオープン)
     • match-cut → transition-chop.wav (スナッピーで控えめなチョップ)
     • また、<SfxCue frame={...} sfx="pop-in" | "pop-plop" | "data-reveal" | "confirm-glass" | "impact-soft" /> を使用して、カード/要素が現れる時に正確にSFXをトリガーすることもできます。
  5. 64曲のBGM選択肢 (B00–B39 プロシージャルマルチコード曲 + M01–M24 スタジオ曲):
     • B25 (Apple Keynote Minimal Pluck)、B26 (Framer / Linear SaaS Groove)、B27 (Vox Documentary Piano)、B28 (Phonk Drift)、B29 (UK Garage 2-Step)、B31 (Neo-Soul Rhodes)、B32 (Liquid DnB) などのモダンなプロシージャル曲を選択するか、node "<skill>/scripts/fetch-music.mjs" --song M03 --out public/audio/music.wav を実行してスタジオ曲をダウンロードしてください。

5. デジタルアプリケーション（UI）と現実世界の物理オブジェクトに対する1:1の視覚的類似性（ユニバーサル フィデリティ）

A. アプリケーション、Webサイト、ソフトウェア、デジタルプラットフォーム（1:1 UI再構築）：

• ユーザーがアプリケーション、Webサイト、ソフトウェア、またはプラットフォーム（VS Code、Figma、TikTok、YouTube、Shopee、Spotifyなどの人気アプリ、またはユーザー自身のカスタムアプリ/Webサイト）の表示を要求した場合は常に、元のUIの構造を可能な限り（1:1で）React/SVGコードで直接再構築する必要があります—抽象的なカードボックスを作成するのではありません！
• 元のナビゲーション/クローム構造（ヘッダー、サイドバー、タブバー、ステータスバー、アクションボタン）、そのアプリケーションの公式16進数パレット、本物のロゴ (<BrandLogo />)、そしてリアルなテキスト/データを提示してください。
• LivedInUIShells.tsx の4つの基本コンポーネント (<AuthenticBrowserWindow />, <AuthenticTerminalWindow />, <ChatAppShell />, <MacDesktopChrome />) を使用するか、特定のアプリケーションの構造を精密に自分で構築してください。

B. 物理オブジェクト、自然、科学、現実世界の物体（ユニバーサル物理オブジェクト フィデリティ）：

• ビデオのトピックが、現実世界の物理オブジェクトや現象（日用品、自然/宇宙、解剖学/生物学、機械/乗り物、食物、建築、地理、楽器、物理的な書類など）について議論する場合は常に：
  1. 現実のオブジェクトをテキストカードや無地の平面図形に抽象化してはいけません： 議論されている物理的な物体は、その実際の形状を中央ステージの主人公として描く必要があります—決して、その物体の名前が書かれたカードボックスや単色の円/四角に置き換えてはいけません。
  2. 特徴的なシルエット、プロポーション、およびそれを構成する部位の解剖学的構造（Defining Anatomy）を捉えてください： その物体を一目で認識できるようにする3〜5つの主要な構成部分（外形シルエット、サイズのプロポーション、内部サブコンポーネント、表面の色、および照明/奥行きのグラデーション）を特定し、マルチレイヤーの <svg> (<path>、ベジェ曲線、<linearGradient>、<radialGradient>、および clip-path) を使用して組み立ててください。
  3. 物理法則と本来の動作メカニズムに従った動き（True-to-Life Mechanics）： 各パーツを、現実世界の性質とメカニクス（正しい回転軸、重力/重量、流体/波の流れ、または内部層を技術的な指示線で分離した * exploded view *）に従って動かしてください。
  4. 本物のアセット (public/) または多層のベクターイラストを優先してください： ユーザーが public/ に写真/ベクターを提供している場合は、それらの本物のアセットをメインオブジェクトとして使用してください。コードで描画する場合は、プロのインフォグラフィックイラスト (Kurzgesagt / Vox スタイル) に匹敵する、多層でプロポーショナルなものである必要があります。

6. ビジュアルコンテンツは中央（85%）、字幕は下部（15%）、C1スプラインカメラは静かでシームレスなトランジション

• メインビジュアルコンテンツはステージ中央の85%を占めます。ナレーターの字幕 (<BottomSubtitleBar />) は常に画面下部 (bottom: 44px, 24px–28px、背景ボックスなし) にきれいに配置されます。
• C1スプラインカメラ (splineAt): コンテキスト全体を表示するときは静かに (1.0x) 、震え/揺れはなく、タイピング (buildTypingCameraSpline) またはカーソル (buildCursorFollowCameraSpline) に追従して滑らかにズームします。
• シームレスなトランジション (<SeamlessSceneShell overlapFrames={10} />): シーン間をスムーズに移行します (whip-glide-left, portal-zoom-in, spring-sheet-up, または SharedElementMorph)。

7. 3Dカードコレオグラフィ、グリッドアニメーション、カードインタラクションのための19のコンポーネント (Card3DLayouts.tsx, GridAnimations.tsx, CardInteractions.tsx)

退屈な静的カードをレンダリングしないでください！すぐに使える19のコンポーネントを直接使用してください（詳細は references/CARD-GRID-3D-PATTERNS.md を参照）：

• 3Dカードレイアウト (templates/components/Card3DLayouts.tsx): <Coverflow3D /> (アクティブカードは正面を向き、サイドは3Dで傾く)、<FerrisWheelCards /> (観覧車のように回転しつつ垂直を保つ)、<CubeRoll3D /> (6つのポイントを3Dキューブの6面に配置)、<CylinderCards3D /> (円柱を取り囲む)、<HelixCards3D /> (螺旋階段状に上昇)、<SphereCards3D /> (3D球体に貼り付く)、<ZDepthTunnel /> (Z軸遠方からスライドイン)。
• グリッドアニメーション (templates/components/GridAnimations.tsx): <BentoGridReveal /> (1つ目 -> 2-3つ目 -> 異なるサイズで完成)、<ExplodeToGrid /> (積み重ね -> 破裂 -> グリッドに整列)、<LayoutMorphGridToCarousel /> (グリッド がカットなしで カルーセル にスムーズに変化)、<MasonryZoomDetail /> (ボックスを選択 -> 拡大 -> 詳細ページ になる)、<GridRecapZoomOut /> (最後のスライド がフルサイズ -> カードが戻る -> すべてをグリッドに recap` してクロージング)。
• カードインタラクション (templates/components/CardInteractions.tsx): <CardStackSwipe /> (一番上のカードをスワイプ)、<FanSpreadCards /> (下部の軸からカードを扇状に広げる)、<PolaroidDropTable /> (ポラロイド写真がテーブルに落ちる + SFX k2.wav)、<CardFlip3D /> (カードを180度裏返す)、<PageCurlCard /> (ページの角を丸める)、<PageTurnBook /> (本のページをめくる)、<AccordionFoldCard /> (3Dジグザグアコーディオンフォールド)。

---

実行ワークフロー（6ステップ）

# 1. デザインスタイルの選択 (43カタログ) と非対称ペーシングのストーリーボード設計 (100テンプレート T001-T100)
node "<skill>/scripts/draw-style.mjs" --brief "<トピックとムード>" --out research
node "<skill>/scripts/scenes.mjs" --brief "<トピック>" --duration 12 --fps 30 --overlap 10 --out research
# オプション: 特定のストーリーボードテンプレートID (references/storyboards/INDEX.md の T001 ～ T100) を選択
# node "<skill>/scripts/scenes.mjs" --template T032 --brief "<トピック>" --duration 20 --fps 30 --overlap 10 --out research

# 2. ブリーフに記載されたブランド/プロジェクトの本物のロゴを取得
node "<skill>/scripts/fetch-brand-logo.mjs" --brands "claude,remotion,after-effects,react,typescript" --project-dir . --out public/brands

# 3. 字幕用ナレーションの準備 (words.json) と48kHzオーディオ合成 (B00-B39 / スタジオ曲 M01-M24 + 65 SFX から選択)
node "<skill>/scripts/narrator-sync.mjs" --text "<ナレーション原稿>" --profile N01 --out-words public/words.json --out-map research/word-map.md
node "<skill>/scripts/synth-audio.mjs" --bgm B26 --duration

# ... (以下続く)