cinematic-slides

シネマティックなスライド

アイデア → 構成済みスライド → HTML → AI 画像 → AI 動画 → GitHub Pages までを網羅するパイプラインです。

スライドごとにループ再生される AI 動画の背景、キーボード操作、1920x1080 の全画面レイアウトを備えた、単一ファイルの HTML プレゼンテーションを作成します。

パイプライン

Step 1: コンテンツ構成

presentation-architect スキルを使って、スライドの構成案を作成します。

• ユーザーからトピック、対象者、トーンを取得します
• 出力：スライドごとのコンテンツ、見出し、説明、ビジュアルの方向性を含む、構造化された Markdown
• 各スライドには、背景の雰囲気やシーンを説明するビジュアルプロンプトが必要です

Step 2: HTML プレゼンテーションの作成

以下の内容で、単一の index.html（または slides.html）を作成します。

レイアウト仕様：

• 1920x1080 の固定サイズのスライドを、CSS の transform による拡大縮小で中央に配置
• position: fixed のスライドを使用し、.active クラスを切り替え
• キーボード操作（左右矢印キー＋クリック）
• 下部にスライド番号を表示
• ヘブライ語のコンテンツには RTL 方向を指定
• Google Fonts（ヘブライ語には Heebo、または必要に応じたフォント）

スライドごとの CSS パターン：

#slideN {
  background: [gradient-overlay], url('presentation/slide-N.jpg') center/cover no-repeat;
}

動画背景の CSS（全体）：

.slide-video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.25;
}
.slide > *:not(.slide-video) {
  position: relative;
  z-index: 1;
}

スライドごとの動画要素：

<video class="slide-video" autoplay muted loop playsinline>
  <source src="presentation/videos/slide-N.mp4" type="video/mp4">
</video>

ナビゲーション JS：

// Arrow keys: Right/Down = next, Left/Up = previous (standard, NOT RTL-flipped)
// Click/touch also advances
// Auto-scale to viewport

各スライドの画像に対して <head> 内に <link rel="preload" as="image"> を記述し、画像を事前読み込みします。

Step 3: 画像の生成

各スライドの画像生成にはimage-generationスキルを使用します。

• Step 1 のビジュアルプロンプトに基づき、スライドごとに画像を1枚生成
• presentation/slide-NN-name.jpg に保存
• デフォルトのアスペクト比：16:9（1920x1080 に適合）
• すべての生成を並列で実行

Step 4: 動画の生成

各スライドの動画生成にはimage-generationスキル（動画モード）を使用します。

• 各スライドのポスター画像から動画を生成
• プロンプトには必ず "static camera, no movement, rock steady tripod shot" を使用
• 繊細な環境効果のみを追加（光の変化、粒子、きらめき）
• presentation/videos/slide-NN.mp4 に保存
• すべての生成を並列で実行

Step 5: デプロイ

gh-pages-deploy スキルを使用します。

• HTML を index.html として、presentation/ フォルダー（画像＋動画）とともにデプロイディレクトリにコピー
• GitHub Pages にプッシュ
• 公開 URL を返す

Step 6: 共有（任意）

希望があれば、whatsapp スキルを使用して公開 URL を送信します（WAME）。

動画背景のガイドライン

• カメラは固定のみ — パン、ズーム、Ken Burns 効果は使用しません
• 動画要素の不透明度は 0.25 — 暗い背景でもテキストをはっきり読めるようにします
• 背景画像にグラデーションオーバーレイを適用 — 動画の読み込み中に代替として表示します
• autoplay muted loop playsinline — 音声なしで無限ループ再生します
• 環境の動きのみ：光の変化、浮遊する粒子、繊細な輝き

ファイル構成

project-folder/
  slides.html              # Main presentation (renamed to index.html on deploy)
  presentation/
    slide-01-name.jpg      # Poster images
    slide-02-name.jpg
    ...
    videos/
      slide-01.mp4         # Video backgrounds
      slide-02.mp4
      ...

ユーザー入力

ユーザーから最低限必要な情報：

• トピック／アイデア — プレゼンテーションの内容
• 対象者 — 誰が見るか
• 言語 — ヘブライ語（デフォルト）または英語
• スライド数 — おおよその枚数（デフォルト：8～12）
• リポジトリ名 — GitHub Pages の URL 用（デフォルト：トピックから生成）

それ以外はすべてパイプラインが処理します。

クイックリファレンス

Step	使用するスキル	出力
コンテンツ	presentation-architect	スライド構成案の Markdown
HTML	（直接）	単一ファイルの HTML プレゼンテーション
画像	image-generation	スライドごとに JPG を1枚
動画	image-generation（動画）	スライドごとに MP4 を1本
デプロイ	gh-pages-deploy	公開 URL
共有	whatsapp（任意）	メッセージを送信