cinematic-slides

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.

Pipeline

Step 1: Content Architecture

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

Step 2: Build HTML Presentation

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:

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

Video background CSS (global):

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

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

Step 3: Generate Images

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

Step 4: Generate Videos

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

Step 5: Deploy

Use gh-pages-deploy skill:

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

Step 6: Share (optional)

Use whatsapp skill to send the live URL if requested (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

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

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.

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