cinematic-slides

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Cinematic Slides

电影级幻灯片

End-to-end pipeline: idea -> structured slides -> HTML -> AI images -> AI videos -> GitHub Pages.

Produces a single-file HTML presentation with looping AI video backgrounds per slide, keyboard navigation, and fullscreen 1920x1080 layout.

端到端流程：创意构思 → 结构化幻灯片 → HTML → AI生成图像 → AI生成视频 → GitHub Pages部署。

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

Pipeline

流程步骤

Step 1: Content Architecture

步骤1：内容架构设计

Use presentation-architect skill to create the slide plan:

Get topic, audience, tone from user
Output: structured markdown with slide-by-slide content, headlines, descriptions, visual direction
Each slide needs a visual prompt describing the background mood/scene

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

获取用户提供的主题、受众、风格基调
输出：结构化Markdown文件，包含逐张幻灯片的内容、标题、描述及视觉方向
每张幻灯片需包含视觉提示词，用于描述背景氛围/场景

Step 2: Build HTML Presentation

步骤2：构建HTML演示文稿

Create a single

index.html

(or

slides.html

) with:

Layout specs:

1920x1080 fixed slides, centered with CSS transform scaling
```
position: fixed
```
slides, toggle
```
.active
```
class
Keyboard navigation (left/right arrows + click)
Slide counter at bottom
RTL direction for Hebrew content
Google Fonts (Heebo for Hebrew, or as needed)

Per-slide CSS pattern:

css

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

Video background CSS (global):

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;
}

Per-slide video element:

html

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

Navigation JS:

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

Preload images in

<head>

with

<link rel="preload" as="image">

for each slide.

创建单个

index.html

（或

slides.html

）文件，满足以下要求：

布局规范：

1920x1080固定尺寸幻灯片，通过CSS transform缩放居中显示
使用
```
position: fixed
```
定位幻灯片，切换
```
.active
```
类实现幻灯片切换
支持键盘导航（左右箭头键 + 点击）
底部显示幻灯片计数器
希伯来语内容支持RTL排版方向
集成Google Fonts（希伯来语使用Heebo字体，可按需调整）

单张幻灯片CSS模板：

css

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

视频背景全局CSS：

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;
}

单张幻灯片视频元素：

html

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

导航JS逻辑：

// 箭头键：右键/下键=下一页，左键/上键=上一页（标准逻辑，不随RTL翻转）
// 点击/触摸也可切换幻灯片
// 自动适配视口缩放

在

<head>

中通过

<link rel="preload" as="image">

预加载所有幻灯片图片。

Step 3: Generate Images

步骤3：生成图像

Use image-generation skill for each slide:

One image per slide based on visual prompt from Step 1
Save to
```
presentation/slide-NN-name.jpg
```
Default aspect ratio: 16:9 (matches 1920x1080)
Run all generations in parallel

使用image-generation技能为每张幻灯片生成图像：

根据步骤1的视觉提示词，为每张幻灯片生成一张图像
保存至
```
presentation/slide-NN-name.jpg
```
路径
默认宽高比：16:9（匹配1920x1080分辨率）
并行运行所有图像生成任务

Step 4: Generate Videos

步骤4：生成视频

Use image-generation skill (video mode) for each slide:

Image-to-video from each slide's poster image
Always use "static camera, no movement, rock steady tripod shot" in prompt
Add subtle ambient effects only (light shifts, particles, shimmer)
Save to
```
presentation/videos/slide-NN.mp4
```
Run all generations in parallel

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

基于每张幻灯片的海报图，将图像转为视频
提示词中必须包含"static camera, no movement, rock steady tripod shot"（固定机位，无移动，稳定三脚架拍摄）
仅添加细微环境特效（光影变化、粒子效果、微光）
保存至
```
presentation/videos/slide-NN.mp4
```
路径
并行运行所有视频生成任务

Step 5: Deploy

步骤5：部署

Use gh-pages-deploy skill:

Copy HTML as
```
index.html
```
+
```
presentation/
```
folder (images + videos) to deploy directory
Push to GitHub Pages
Return live URL

使用gh-pages-deploy技能：

将HTML文件重命名为
```
index.html
```
，连同
```
presentation/
```
文件夹（包含图像和视频）复制到部署目录
推送至GitHub Pages
返回可访问的在线链接

Step 6: Share (optional)

步骤6：分享（可选）

Use whatsapp skill to send the live URL if requested (WAME).

若用户要求，使用whatsapp技能发送在线链接（WAME）。

Video Background Guidelines

视频背景规范

Static camera only - no pans, zooms, or Ken Burns effects
Opacity 0.25 on video element - keeps text clearly readable over dark backgrounds
Gradient overlay on background image as fallback while video loads
autoplay muted loop playsinline - silent infinite loop
Ambient motion only: light shifts, floating particles, subtle glow

仅使用固定机位 - 禁止摇移、缩放或Ken Burns特效
视频元素设置opacity 0.25 - 确保深色背景下文字清晰可读
背景图片添加渐变叠加层，作为视频加载完成前的 fallback
使用autoplay muted loop playsinline属性 - 静音无限循环播放
仅保留环境动态效果：光影变化、漂浮粒子、细微光晕

File Structure

文件结构

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
      ...

project-folder/
  slides.html              # 主演示文稿文件（部署时重命名为index.html）
  presentation/
    slide-01-name.jpg      # 海报图像
    slide-02-name.jpg
    ...
    videos/
      slide-01.mp4         # 视频背景
      slide-02.mp4
      ...

User Input

用户输入要求

Minimum needed from user:

Topic/idea - what the presentation is about
Audience - who is watching
Language - Hebrew (default) or English
Slide count - approximate number (default: 8-12)
Repo name - for GitHub Pages URL (default: derived from topic)

Everything else is handled by the pipeline.

用户需提供的最少信息：

主题/创意 - 演示文稿的核心内容
受众 - 目标观看人群
语言 - 希伯来语（默认）或英语
幻灯片数量 - 大致数量（默认：8-12张）
仓库名称 - 用于生成GitHub Pages链接（默认：从主题衍生）

其余所有环节均由流程自动处理。

Quick Reference

快速参考

Step	Skill Used	Output
Content	presentation-architect	Slide plan markdown
HTML	(direct)	Single-file HTML presentation
Images	image-generation	One JPG per slide
Videos	image-generation (video)	One MP4 per slide
Deploy	gh-pages-deploy	Live URL
Share	whatsapp (optional)	Message sent

步骤	使用技能	输出结果
内容设计	presentation-architect	幻灯片规划Markdown
HTML构建	（直接实现）	单文件HTML演示文稿
图像生成	image-generation	每张幻灯片对应一张JPG图像
视频生成	image-generation（视频模式）	每张幻灯片对应一段MP4视频
部署	gh-pages-deploy	在线访问链接
分享	whatsapp（可选）	发送分享消息