Cinematic Slides
- 91 installs
- 44 repo stars
- Updated July 8, 2026
- aviz85/claude-skills-library
cinematic-slides is a Claude Code skill that builds a single-file HTML presentation with AI video backgrounds and deploys it to GitHub Pages.
About
A Claude Code skill that builds a single-file HTML presentation with AI-generated video backgrounds and deploys it to GitHub Pages. It plans slide content, generates a poster image and looping video for each slide, assembles a 1920x1080 deck with keyboard navigation, and pushes it live. A developer uses it to turn a topic into a cinematic, shareable slide deck.
- End-to-end pipeline: idea to HTML slides with AI video backgrounds on GitHub Pages
- Single-file 1920x1080 HTML deck with looping AI video backgrounds per slide
- Chains presentation-architect, image-generation, and gh-pages-deploy skills
Cinematic Slides by the numbers
- 91 all-time installs (skills.sh)
- Ranked #803 of 1,337 Generative Media skills by installs in the Skillselion catalog
- Data as of Jul 28, 2026 (Skillselion catalog sync)
cinematic-slides capabilities & compatibility
Requires image-generation API keys (Gemini/fal.ai) via its chained skill; GitHub Pages deploy is free.
- Capabilities
- presentations · image generation · video generation
- Works with
- github
- Use cases
- presentations · image generation · video generation
- Pricing
- Bring your own API key
What cinematic-slides says it does
Create cinematic HTML presentations with AI video backgrounds, deployed to GitHub Pages.
Produces a single-file HTML presentation with looping AI video backgrounds per slide, keyboard navigation, and fullscreen 1920x1080 layout.
npx skills add https://github.com/aviz85/claude-skills-library --skill cinematic-slidesAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 91 |
|---|---|
| repo stars | ★ 44 |
| Last updated | July 8, 2026 |
| Repository | aviz85/claude-skills-library ↗ |
What it does
Turn a topic into a single-file HTML slide deck with AI video backgrounds, deployed live to GitHub Pages.
Who is it for?
Producing a shareable cinematic slide deck with per-slide AI video backgrounds from just a topic.
Skip if: Editable native slide formats, since output is a single-file HTML deck.
When should I use this skill?
You want cinematic slides, a video presentation, or an animated deck deployed live.
What you get
A live GitHub Pages URL for a single-file HTML deck with looping AI video backgrounds.
- Single-file HTML deck
- Per-slide AI images and videos
- Live GitHub Pages URL
By the numbers
- 6-step pipeline
- 1920x1080 fixed slides
- default 8-12 slides
Files
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: fixedslides, toggle.activeclass- 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 viewportPreload 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 |
Related skills
Remotion Best PracticesGet Remotion-specific coding guidance that prevents common video rendering mistakes when creating animated React videos.451k4.2k
Ai Video GenerationGenerate videos using 40+ AI models including Veo, Seedance, and others via inference.sh442k665Ai Image GenerationGenerate images using 50+ AI models including FLUX, Gemini, and Replicate via inference.sh441k665Ai Avatar VideoGenerate videos featuring AI avatars for product demos, tutorials, marketing, or explainers441k665Remotion RenderRender videos programmatically using React components and Remotion framework441k665
Remotion RenderGenerate high-quality MP4 videos from React code using Remotion inside an AI coding agent.363k665FAQ
What is the output format?
A single-file HTML presentation with looping AI video backgrounds, keyboard navigation, and a fullscreen 1920x1080 layout, deployed to GitHub Pages.
What skills does it chain?
presentation-architect, image-generation, gh-pages-deploy, and optionally whatsapp to share the URL.