skills.rest
mayconspirlandelli
mayconspirlandelliCOMMUNITY
Explore all skills by this author →
GitHub

mira-slide-to-video

Records Mira deck slide animations in headless Chrome and exports them as MP4 videos.

Updated Sep 2, 2026
Search Tags:#puppeteer#ffmpeg#slide deck#mp4#headless chrome#video export#animation recording
One-click install
npx skills add https://github.com/mayconspirlandelli/slides-podcast-ia-home-office --skill mira-slide-to-video-mayconspirlandelli
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mira-slide-to-video
Source: https://github.com/mayconspirlandelli/slides-podcast-ia-home-office/tree/main/.agents/skills/mira-slide-to-video
Command: npx skills add https://github.com/mayconspirlandelli/slides-podcast-ia-home-office --skill mira-slide-to-video-mayconspirlandelli

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires puppeteer, puppeteer-screen-recorder, ffmpeg, and includes scripts (resource) components.

What problem does it solve? Turning an animated HTML slide deck into a shareable video usually means manual screen recording, which leaks the previous slide, cuts animations short, and produces wrong aspect ratios. This Skill records each slide's real animation from a clean t=0 and delivers a single polished .mp4. ## Core Features & Use Cases - Real animation capture: Records slides in headless Chrome with puppeteer-screen-recorder and ffmpeg, triggering each animation from zero so no previous slide leaks into the frame. - Flexible timing and formats: Set per-slide durations (4s default, or full length for finite animations like chart-race), crossfade transitions, and 16:9, 9:16, or 1:1 resolutions. - Use Case: Export slide 2 of a deck as a vertical Reels video by recording the 9:16-adapted deck at 1080x1920 with the chart-race animation playing in full. ## Quick Start Ask the AI to generate an mp4 video of slide 2 from your Mira deck in 16:9, letting the chart-race animation play for its full duration.

Frequently Asked Questions about mira-slide-to-video

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert an HTML slide deck to an MP4 video?▼

Run the build-video.cjs script with the deck's HTML file and an output path, selecting slides via --slides and duration via --seconds. It records each slide's animation in headless Chrome with puppeteer-screen-recorder and joins clips with ffmpeg crossfades.

How do I record a slide animation without the previous slide leaking in?▼

The recorder shims the deck's IntersectionObserver, positions the target slide, starts recording, and only then triggers the animation. This guarantees a clean t=0 where the animation fires from zero with no prior slide visible.

What dependencies are needed to record slides with puppeteer and ffmpeg?▼

You need ffmpeg on PATH (or set via MIRA_FFMPEG) plus the npm packages puppeteer and puppeteer-screen-recorder, installed in a temp folder and loaded via NODE_PATH. Chrome is auto-detected or can be set with MIRA_CHROME.

Why does my exported video cut off the chart-race animation?▼

Finite animations like chart-race need their full duration passed via --durations (e.g., 2:17), otherwise the default 4-second clip truncates them. Read durationMs or stepMs times the period count from the slide's JS and add about one second of slack.

Can I export a slide as a vertical 9:16 video for Reels or Shorts?▼

Yes, but record from a deck already adapted to vertical (index-9x16.html) with --width 1080 --height 1920 and --fill 0. Recording the 16:9 deck directly into a 9:16 frame leaves the content as a thin band in the middle.

Related Skills

Explore More Design & Creative Skills→
sandecosandeco
158

mira-squared

Convert Mira 16:9 decks into square 1080x1080 index-1x1.html files.

Community
Intermediate
1veso1veso

using-vizard-api

Automate video clipping, editing, and AI captions via the Vizard.ai API.

Community
Intermediate
wyrmspirewyrmspire

video-to-website

Convert video files into scroll-driven animated websites with FFmpeg, GSAP, and Lenis.

Community
Advanced
aroidoaroido

Screenshot Automation

Automates application screenshots and creates GIFs via Playwright and ffmpeg.

Official
Intermediate