skills.rest
Marshal-Nguyen
Marshal-NguyenCOMMUNITY
Explore all skills by this author →
GitHub

od-video

Renders HTML/CSS/GSAP compositions into MP4 marketing videos with local TTS voiceover and ducked background music.

1|Updated Aug 17, 2026
Search Tags:#text-to-speech#ffmpeg#video generation#gsap#kokoro#marketing video#hyperframes
One-click install
npx skills add https://github.com/Marshal-Nguyen/Skill_Claude_Agent --skill od-video-marshal-nguyen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: od-video
Source: https://github.com/Marshal-Nguyen/Skill_Claude_Agent/tree/main/claude/skills/od-video
Command: npx skills add https://github.com/Marshal-Nguyen/Skill_Claude_Agent --skill od-video-marshal-nguyen

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires kokoro-onnx, espeakng-loader, numpy, soundfile, and includes references (resource) components.

What problem does it solve? Producing marketing videos (reels, promos, explainers) usually requires paid AI video APIs or manual editing tools. This Skill builds vertical or horizontal videos locally using HyperFrames inside Open Design — rendering HTML/CSS/GSAP compositions to MP4 with zero API credits, plus Kokoro text-to-speech voiceover and ffmpeg-ducked background music. ## Core Features & Use Cases - Local video rendering: Converts deterministic HTML/CSS/GSAP compositions into MP4 via headless Chrome and ffmpeg, with no API key or credit cost. - Offline voiceover generation: Generates narration with the Kokoro-82M TTS model running fully offline, including per-line duration checks against scene timing. - Audio mixing with ducking: Pre-processes background music with ffmpeg sidechain compression so music ducks under the voiceover deterministically. - Verification discipline: Enforces lint checks, real frame extraction for visual review, and audio stream probing to catch silent renders and layout defects. - Use Case: Given a product doc and brand images, produce a 45-second 1080x1920 promo reel with kinetic typography, Ken Burns image motion, English voiceover, and ducked background music — entirely on the local machine. ## Quick Start Ask the assistant to create a 45-second vertical promo video from your product document and images using HyperFrames, with an English voiceover and background music.

Frequently Asked Questions about od-video

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

FAQPage Schema
How do I render an HTML/CSS animation to MP4 video locally?▼

Use HyperFrames, which renders an HTML/CSS/GSAP page to MP4 via headless Chrome and ffmpeg on your own machine. Define a root composition element with data-duration, add clip elements with timing attributes, and register a paused GSAP timeline on window.__timelines.

How do I add a voiceover to a video without paying for TTS APIs?▼

Use the Kokoro-82M model, which runs fully offline through the project's .venv-tts Python environment. The gen-vo.py template generates per-line audio, checks each line against its scene duration, and outputs a single continuous track or separate files per line.

Does Kokoro TTS support Vietnamese or voice cloning?▼

No. Kokoro supports en-us, en-gb, es, fr-fr, hi, it, pt-br, ja, and zh, and cannot clone voices. For Vietnamese or custom voices, use a paid provider like ElevenLabs, a local model like F5-TTS or XTTS-v2, or record your own voice.

Why is my rendered video silent even though rendering succeeded?▼

The most common cause is an <audio> element missing an id attribute — the renderer requires ids to discover media elements and produces silent output without a runtime error. Run the check command, which flags this as media_missing_id, and verify with ffprobe.

How do I make background music duck under a voiceover in ffmpeg?▼

Use ffmpeg's sidechaincompress filter with the voiceover track as the sidechain key, for example threshold=0.025:ratio=9:attack=25:release=450. This must be re-run every time the voiceover script changes, since the ducked music is locked to the old vocal timing.

When should I not use HyperFrames for video generation?▼

HyperFrames only produces motion graphics, kinetic typography, animated slideshows, and UI mockups — anything drawable with HTML/CSS. It cannot generate real footage, real people, or b-roll; cinematic AI video requires a paid provider like Veo or Seedance.

Related Skills

Explore More Marketing & Sales Skills→
indiearkindieark
1

video-gen-storyboard

Produces high-resolution grid, script-composed, and four-column layouts for video storyboards.

Official
Advanced
TheTesseractAITheTesseractAI

ad-creative

Design static social media and display ad creatives with platform-specific sizes.

Community
Intermediate
0xobat0xobat

direct-response-copy

Generate marketing and sales copy using direct response frameworks.

Community
Intermediate
nexu-ionexu-io
93.2k

sora

Generate, remix, and manage short video clips using the OpenAI Sora API.

Official
Intermediate