cinematic-slides

电影风格幻灯片

端到端流程：创意 -> 结构化幻灯片 -> HTML -> AI 图像 -> AI 视频 -> GitHub Pages。

生成单文件 HTML 演示文稿，每张幻灯片都带有循环播放的 AI 视频背景，并支持键盘导航和全屏 1920x1080 布局。

流程

第 1 步：内容架构

使用 presentation-architect 技能创建幻灯片计划：

• 从用户处获取主题、受众和基调
• 输出：按幻灯片逐页编排内容、标题、描述和视觉方向的结构化 Markdown
• 每张幻灯片都需要一个描述背景氛围和场景的视觉提示词

第 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"> 预加载图像。

第 3 步：生成图像

为每张幻灯片使用 image-generation 技能：

• 根据第 1 步的视觉提示词为每张幻灯片生成一张图像
• 保存到 presentation/slide-NN-name.jpg
• 默认纵横比：16:9（与 1920x1080 匹配）
• 并行运行所有生成任务

第 4 步：生成视频

为每张幻灯片使用 image-generation 技能（视频模式）：

• 将每张幻灯片的海报图像转换为视频
• 提示词中始终使用“static camera, no movement, rock steady tripod shot”
• 仅添加细微的环境效果（光线变化、粒子、微光）
• 保存到 presentation/videos/slide-NN.mp4
• 并行运行所有生成任务

第 5 步：部署

使用 gh-pages-deploy 技能：

• 将 HTML 作为 index.html，并将 presentation/ 文件夹（图像 + 视频）复制到部署目录
• 推送到 GitHub Pages
• 返回线上 URL

第 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（默认：根据主题生成）

其余工作均由流程处理。

快速参考

步骤	使用的技能	输出
内容	presentation-architect	幻灯片计划 Markdown
HTML	（直接创建）	单文件 HTML 演示文稿
图像	image-generation	每张幻灯片一张 JPG
视频	image-generation（视频）	每张幻灯片一个 MP4
部署	gh-pages-deploy	线上 URL
分享	whatsapp（可选）	已发送消息