Back to skills
SkillHub ClubAnalyze Data & AIFull StackDevOpsData / AI
cinematic-slides
Create cinematic HTML presentations with AI video backgrounds, deployed to GitHub Pages. Use for: slides, presentation, deck, cinematic slides, video presentation, animated slides, live presentation.
Packaged view
This page reorganizes the original catalog entry around fit, installability, and workflow context first. The original raw source lives below.
Stars
20
Hot score
87
Updated
March 20, 2026
Overall rating
C1.8
Composite score
1.8
Best-practice grade
A92.4
Install command
npx @skill-hub/cli install aviz85-claude-skills-library-cinematic-slides
Repository
aviz85/claude-skills-library
Skill path: plugins/cinematic-slides/skills/cinematic-slides
Create cinematic HTML presentations with AI video backgrounds, deployed to GitHub Pages. Use for: slides, presentation, deck, cinematic slides, video presentation, animated slides, live presentation.
Open repositoryBest for
Primary workflow: Analyze Data & AI.
Technical facets: Full Stack, DevOps, Data / AI.
Target audience: everyone.
License: Unknown.
Original source
Catalog source: SkillHub Club.
Repository owner: aviz85.
This is still a mirrored public skill entry. Review the repository before installing into production workflows.
What it helps with
- Install cinematic-slides into Claude Code, Codex CLI, Gemini CLI, or OpenCode workflows
- Review https://github.com/aviz85/claude-skills-library before adding cinematic-slides to shared team environments
- Use cinematic-slides for development workflows
Works across
Claude CodeCodex CLIGemini CLIOpenCode
Favorites: 0.
Sub-skills: 0.
Aggregator: No.
Original source / Raw SKILL.md
---
name: cinematic-slides
description: "Create cinematic HTML presentations with AI video backgrounds, deployed to GitHub Pages. Use for: slides, presentation, deck, cinematic slides, video presentation, animated slides, live presentation."
enhancedBy:
- presentation-architect: "Design slide structure and narrative"
- image-generation: "Generate poster images and videos for each slide"
- gh-pages-deploy: "Deploy final presentation to GitHub Pages"
- whatsapp: "Send the live URL after deployment"
---
# 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:**
```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:**
```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 |