ローンチビデオ — リキッドグラス製品ショーケース

リキッドグラス美学（暗黒の虚空、3D浮遊パネル、パーティクルエフェクト、スプリングアニメーション、確かなペーシング）を用いて、映画的な製品ローンチビデオを制作します。

複合スキル

スキル	役割
`/remotion-best-practices`	構成構造、`spring()`、`<Sequence>`、レンダーパイプライン
`/content-creation`	AIアセット生成 (Imagen 4.0、Veo 3.1)
`/arcan-glass`	BroomVAブランドトークン (AI Blue、ダークファーストパレット)
`/google-veo`	映画的なBロール生成プロンプト
`/blog-post`	配信パイプライン (X、LinkedIn、Instagramへの公開)

リキッドグラス美学

コアビジュアル原則

暗黒の虚空背景 — ピュアブラック (#000000) またはニアブラック (#0A0A0A)。ベースにグラデーションはなし。コンテンツは暗闇に浮かびます。
3Dパースペクティブパネル — スクリーンショットとUIレンダリングを8〜15°傾け、perspective(1200px) を適用。決してフラットではなく、常に浮遊感を持たせます。
ガラス素材 — パネルは曇りエッジ、微妙な反射、角丸とグロー、半透明の境界線を持ちます。
パーティクルフィールド — 小さな浮遊パーティクル (2〜4px、低透明度、ゆっくり漂流) が虚空を満たし、奥行きと生命感を生み出します。
スプリングモーション — すべての出入りはRemotion spring() を使用。CSSトランジションは不使用。リニアも不使用。有機的で確かな動き。
確かなペーシング — 各シーン最低3〜5秒。素早いカットは避け、それぞれのビジュアルを味わわせます。
最小限のタイポグラフィ — サンセリフ (Inter、SF Pro、またはシステムフォント)、白字、中央揃え。タイトルカードは最大8ワード。

カラーパレット

トークン	値	用途
`void`	`#000000`	背景
`panel-bg`	`rgba(20, 20, 25, 0.85)`	ガラスパネル塗りつぶし
`panel-border`	`rgba(255, 255, 255, 0.08)`	ガラスエッジ
`panel-glow`	`rgba(59, 130, 246, 0.15)`	エッジグロー (AI Blue)
`text-primary`	`#FFFFFF`	タイトルテキスト
`text-secondary`	`rgba(255, 255, 255, 0.6)`	サブタイトル、URL
`accent`	`#3B82F6`	AI Blue ハイライト
`success`	`#22C55E`	チェックマーク、ポジティブ状態
`particle`	`rgba(255, 255, 255, 0.15)`	背景パーティクル

3DパネルCSS (Remotion)

const panelStyle: React.CSSProperties = {
  perspective: '1200px',
  transform: `rotateY(-8deg) rotateX(5deg)`,
  borderRadius: 16,
  border: '1px solid rgba(255, 255, 255, 0.08)',
  boxShadow: `
    0 25px 50px rgba(0, 0, 0, 0.6),
    0 0 30px rgba(59, 130, 246, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05)
  `,
  background: 'rgba(20, 20, 25, 0.85)',
  backdropFilter: 'blur(20px)',
  overflow: 'hidden',
};

スプリング設定

import { spring, useCurrentFrame, useVideoConfig } from 'remotion';

// 標準的な入場
const entrance = spring({
  frame,
  fps,
  config: { damping: 15, stiffness: 80, mass: 0.8 },
});

// 微妙な漂流 (浮遊パネル用)
const drift = spring({
  frame: frame - delay,
  fps,
  config: { damping: 200, stiffness: 10, mass: 2 },
  durationInFrames: 120,
});

シーンタイプ

1. タイトルカード

長さ: 3〜4秒内容: 製品名またはキャッチフレーズ、中央揃え、白字、黒背景 アニメーション: 微妙なスケールスプリング (0.95 → 1.0) でフェードイン例: 「Build your ideas with Gemini」

2. プロンプト / 入力シーン

長さ: 4〜6秒内容: チャット入力またはターミナルプロンプト、角度付き3Dパネル アニメーション: パネルが下からスプリングイン、テキストはタイプライターエフェクト テクニック: 3D CSSトランスフォームを適用したスクリーンショットを <Img> で表示、タイプライターはフレームベースの文字列スライスで実現

3. 分割パネルシーン

長さ: 4〜5秒内容: 2つのUIパネルを並べて表示 (例: プロンプト + コード出力) アニメーション: パネルが両側からスプリングイン、パネル間にパーティクル テクニーク: 2つの <Img> コンポーネントを逆向きの rotateY トランスフォームで配置

4. 製品デモシーン

長さ: 5〜8秒内容: 製品UI全体を浮遊ガラスパネルとして表示 アニメーション: ゆっくりとしたドリフト回転 (微妙な rotateY 振動)、映画的なズーム テクニック: <Img> または <OffthreadVideo> をアニメーション付き scale および rotateY で使用

5. 詳細ズームシーン

長さ: 3〜4秒内容: 特定のUI要素や機能にズームイン アニメーション: 全体表示からトリミング詳細へのスプリングスケール テクニック: パネル画像にアニメーション付き scale + translate を適用

6. CTA / ブランドカード

長さ: 3〜4秒内容: ロゴ + URL またはインストールコマンド アニメーション: フェードイン、静止、フェードアウト テクニック: 中央揃えテキスト、ブランドアイコン、微妙なグロー

7. AIシネマティックフレーム (Imagen 4.0)

長さ: 3〜5秒内容: AI生成のヒーローレンダリングまたはコンセプトアートをGlassPanel内に配置 アニメーション: スプリング入場、ゆっくりとしたドリフト回転、微妙なズーム テクニック: Imagen 4.0で生成し、public/に配置。GlassPanel内で3Dトランスフォームを使って <Img src={staticFile('render.png')} /> で表示 使用タイミング: 抽象概念、アーキテクチャ図、ムードビジュアルなど、スクリーンショットよりもAI生成画像が効果的な場面

<GlassPanel rotateY={-10} rotateX={6} delay={5}>
  <Img src={staticFile('imagen-hero-render.png')} style={{ width: '100%' }} />
</GlassPanel>

8. AIビデオBロール (Veo 3.1)

長さ: 4〜8秒内容: 映画的なAI生成ビデオクリップをトランジションまたは雰囲気として使用 アニメーション: ガラスパネルの背後または内部で再生、オプションでオーバーレイテキスト テクニック: Veo 3.1で生成、ffmpeg -movflags +faststart で前処理、Remotionで <OffthreadVideo> を使用

// フルブリードの映画的Bロール (シーン間)
<OffthreadVideo
  src={staticFile('veo-broll-corridor.mp4')}
  style={{ width: '100%', height: '100%', objectFit: 'cover' }}
/>

// ガラスパネル内のBロール
<GlassPanel rotateY={-5} rotateX={3}>
  <OffthreadVideo
    src={staticFile('veo-product-demo.mp4')}
    style={{ width: '100%', borderRadius: 12 }}
  />
</GlassPanel>

Veo 3.1のBロール用プロンプトパターン:

[カメラの動き]、[被写体/環境]、[動作/モーション]、[照明 + ムード]。
暗い背景、[アクセントカラー]のグロー。映画的、プロフェッショナル。[アスペクト比]。

使用タイミング: シーングループ間のトランジション、雰囲気のあるイントロ/アウトロ、静止スクリーンショットよりも動きが価値を高める映画的な製品デモ。

前処理 (<OffthreadVideo> + parseMedia() に必須):

ffmpeg -i veo-clip.mp4 -c:v libx264 -crf 18 -movflags +faststart -r 30 processed.mp4

ハイブリッド構成パターン

最も洗練されたビデオは、3つのアセットタイプすべてを組み合わせます:

タイトルカード (テキスト)
  → GlassPanel内のImagenフレーム (コンセプトアート)
    → Veo Bロールトランジション (映画的4秒)
      → GlassPanel内のスクリーンショット (製品デモ)
        → Remotionアニメーションデータ (パイプラインノード、ファイルツリー)
          → Veo Bロールアウトロ (雰囲気)
            → CTAカード (テキスト)

ルール: Remotionがタイミング、トランジション、テキストを制御します。AIアセットは視覚的な豊かさを提供します。AIにペーシングを制御させないでください — それはRemotionの役割です。

制作パイプライン

1. ストーリーボード → シーンをタイプ(1-8)、長さ、コンテンツで定義
2. アセット → すべてのビジュアルアセットを生成/キャプチャ
   a. スクリーンショット — agent-browserまたは手動キャプチャで製品UIを取得
   b. Imagen 4.0 — ヒーローレンダリング、コンセプトアート、抽象ビジュアル
      → ai.models.generateImages({ model: 'imagen-4.0-fast-generate-001', prompt: '...' })
      → public/ ディレクトリに保存
   c. Veo 3.1 — 映画的なBロールクリップ (各4〜8秒)
      → ai.models.generateVideos({ model: 'veo-3.1-fast-generate-preview', prompt: '...' })
      → 前処理: ffmpeg -i clip.mp4 -c:v libx264 -movflags +faststart -r 30 processed.mp4
      → public/ ディレクトリに保存
3. コンポーズ → Remotionコンポジションを構築
   - プリロード用のpremountForを備えた <Sequence>
   - 画像には <Img> + staticFile() (決して <img> は使わない)
   - Veoクリップには <OffthreadVideo> + staticFile() (決して <video> は使わない)
   - 3Dトランスフォームと入場には GlassPanel + spring()
   - 背景レイヤーとして ParticleField
   - テキストオーバーレイ用の Subtitle コンポーネント
4. レンダリング → npx remotion render src/Root.tsx CompositionId out/video.mp4
5. 後処理 → 別ファイルのオーディオを追加する場合
   - ffmpeg -i video.mp4 -i audio.mp3 -c:v copy -c:a aac final.mp4
6. レビュー → /creative-review でスタイルブリーフに対するスコアを評価 (目標: ≥75)
7. 配信 → /blog-post 公開パイプラインでプラットフォームにプッシュ

Remotionプロジェクト構造

launch-video/
├── src/
│   ├── Root.tsx                 # registerRoot
│   ├── Composition.tsx          # <Sequence> シーンを含むメインコンポジション
│   ├── scenes/
│   │   ├── TitleCard.tsx        # シーンタイプ1
│   │   ├── PromptScene.tsx      # シーンタイプ2
│   │   ├── SplitPanel.tsx       # シーンタイプ3
│   │   ├── ProductDemo.tsx      # シーンタイプ4
│   │   ├── DetailZoom.tsx       # シーンタイプ5
│   │   └── CTACard.tsx          # シーンタイプ6
│   ├── components/
│   │   ├── GlassPanel.tsx       # ガラス素材の3Dパースペクティブパネル
│   │   ├── ParticleField.tsx    # 背景パーティクルシステム
│   │   ├── TypewriterText.tsx   # フレームベースのタイプライターアニメーション
│   │   └── SpringFade.tsx       # 再利用可能なスプリングフェードラッパー
│   └── styles/
│       └── tokens.ts            # リキッドグラスの色/スペーシングトークン
├── public/                      # staticFile() アセット (スクリーンショット、レンダリング)
├── package.json
└── remotion.config.ts

パーティクルフィールドコンポーネント (参考)

const ParticleField: React.FC<{ count?: number }> = ({ count = 40 }) => {
  const frame = useCurrentFrame();
  const particles = useMemo(() =>
    Array.from({ length: count }, (_, i) => ({
      x: (i * 37 + 13) % 100,
      y: (i * 53 + 7) % 100,
      size: 2 + (i % 3),
      speed: 0.1 + (i % 5) * 0.05,
      opacity: 0.05 + (i % 4) * 0.04,
    })), [count]);

  return (
    <AbsoluteFill>
      {particles.map((p, i) => (
        <div key={i} style={{
          position: 'absolute',
          left: `${p.x}%`,
          top: `${(p.y + frame * p.speed) % 110}%`,
          width: p.size,
          height: p.size,
          borderRadius: '50%',
          background: `rgba(255, 255, 255, ${p.opacity})`,
        }} />
      ))}
    </AbsoluteFill>
  );
};

GlassPanelコンポーネント (参考)

const GlassPanel: React.FC<{
  children: React.ReactNode;
  rotateY?: number;
  rotateX?: number;
  scale?: number;
}> = ({ children, rotateY = -8, rotateX = 5, scale = 1 }) => (
  <div style={{
    transform: `perspective(1200px) rotateY(${rotateY}deg) rotateX(${rotateX}deg) scale(${scale})`,
    borderRadius: 16,
    border: '1px solid rgba(255, 255, 255, 0.08)',
    boxShadow: '0 25px 50px rgba(0,0,0,0.6), 0 0 30px rgba(59,130,246,0.1), inset 0 1px 0 rgba(255,255,255,0.05)',
    background: 'rgba(20, 20, 25, 0.85)',
    overflow: 'hidden',
    transition: 'none',
  }}>
    {children}
  </div>
);

お気に入りのAIに質問する

ドキュメント

ローンチビデオ — リキッドグラス製品ショーケース

複合スキル

リキッドグラス美学

コアビジュアル原則

カラーパレット

3DパネルCSS (Remotion)

スプリング設定

シーンタイプ

1. タイトルカード

2. プロンプト / 入力シーン

3. 分割パネルシーン

4. 製品デモシーン

5. 詳細ズームシーン

6. CTA / ブランドカード

7. AIシネマティックフレーム (Imagen 4.0)

8. AIビデオBロール (Veo 3.1)

ハイブリッド構成パターン

制作パイプライン

Remotionプロジェクト構造

パーティクルフィールドコンポーネント (参考)

GlassPanelコンポーネント (参考)

品質チェックリスト

Individual skills in this repo

broomva/skills

broomva/skills

broomva/skills

broomva/skills

broomva/skills

broomva/skills

broomva/skills

関連スキル

steipete/video-frames

steipete/summarize

openclaw/openclaw

obra/superpowers

affaan-m/ECC

affaan-m/everything-claude-code