Skill

cinematic-slides

Creates single-file HTML presentations with looping AI video backgrounds per slide, keyboard navigation, and GitHub Pages deployment. For cinematic slides and decks.

Html

Css

npx claudepluginhub aviz85/claude-skills-library

Tool Access

This skill uses the workspace's default tool permissions.

Preview

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

SKILL.md

Similar Skills

cinematic-slides

Creates single-file HTML presentations with looping AI video backgrounds per slide, keyboard navigation, and GitHub Pages deployment. For cinematic slides and decks.

cinematic-slides

presentation-chef

Generates self-contained Apple Keynote-style HTML presentations from markdown, text descriptions, topics, or files, with cinematic animations and glassmorphism design.

skillkit

frontend-slides

36.4k

Creates zero-dependency, animation-rich HTML presentations from scratch or by converting PPT/PPTX files. Ensures viewport-fitting slides with distinctive typography, colors, and motion.

5 files

antigravity-awesome-skills

Stats

Stars27

Forks8

Last CommitFeb 18, 2026

Used By2 plugins

Actions

View Source View Plugin View on GitHub View README

Help us improve

Share bugs, ideas, or general feedback.

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