skills.rest
AnderHonorato
AnderHonoratoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

html-video-production

Builds editable scene-based HTML videos rendered to MP4 using HyperFrames and GSAP.

Updated Aug 28, 2026
Search Tags:#captions#motion graphics#mp4#video rendering#hyperframes#html video#gsap animation
One-click install
npx skills add https://github.com/AnderHonorato/Mem-rias-IA---Infinity --skill html-video-production-anderhonorato
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: html-video-production
Source: https://github.com/AnderHonorato/Mem-rias-IA---Infinity/tree/main/Manus/Skills/html-video-production
Command: npx skills add https://github.com/AnderHonorato/Mem-rias-IA---Infinity --skill html-video-production-anderhonorato

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires hyperframes, and includes references (resource) and assets (resource) components.

What problem does it solve? Creating videos from structured content like PDFs, GitHub PRs, CSVs, slide decks, or websites usually requires manual video editing that is hard to reproduce or update. This Skill turns those sources into scene-based, editable HTML compositions rendered to MP4, so copy, colors, timing, and branding can be changed and re-rendered at any time. ## Core Features & Use Cases - Workflow routing: A fidelity gate decides whether a request fits HTML-based video, native AI video generation, or a hybrid, then routes to one of 11 workflow skills such as product-launch-video, faceless-explainer, pr-to-video, motion-graphics, music-to-video, or slideshow. - Editable motion graphics: Compositions use HTML, GSAP timelines, kinetic typography, animated charts, lower thirds, and karaoke captions, all defined as code and re-renderable. - Media generation contract: Speech, music, and images are produced through native generate_speech, generate_music, and generate_image tools, with local open-source fallbacks like whisper.cpp transcription and bundled Pixabay sound effects. - Use Case: Turn a GitHub pull request into a code-change explainer video, or convert a product website URL into a launch promo with animated charts, captions, and a logo intro rendered locally to MP4. ## Quick Start Ask the agent to turn your product website URL into a 60-second launch video with animated charts and captions using the html-video-production skill.

Frequently Asked Questions about html-video-production

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

FAQPage Schema
How do I turn a GitHub pull request into a video?▼

Use the pr-to-video workflow referenced by this skill. Provide a GitHub PR link or owner/repo#N identifier, and the skill builds a code-change explainer composition in HTML, then renders it locally to MP4 with the HyperFrames CLI.

What is HyperFrames and how does HTML-to-video rendering work?▼

HyperFrames is an open-source HTML-to-video framework by HeyGen. Videos are authored as scene-based HTML compositions with GSAP animations, then linted, previewed, and rendered to MP4 locally using npx hyperframes render.

When should I use HTML video instead of AI-generated video?▼

Use this skill when content is graphic, typographic, data-driven, or comes from structured sources like PDFs, CSVs, repos, or URLs, and when you need to edit or re-render variations. Photoreal one-shot clips from a creative prompt should go to native AI video tools instead.

Can I add captions to an existing talking-head video?▼

Yes. The embedded-captions and talking-head-recut workflows layer designed captions, lower thirds, and callouts onto existing footage. Word-level timing comes from local whisper.cpp transcription via npx hyperframes transcribe.

Why is npx hyperframes init or lambda render not allowed?▼

The skill prohibits init and skills update because they re-fetch upstream files and can overwrite local patches, and prohibits lambda commands because they use paid AWS cloud rendering. Projects are scaffolded manually with npm install hyperframes and rendered locally.

How are voiceover, music, and images generated for the video?▼

Voiceover uses generate_speech, music uses generate_music, and images use generate_image. The skill hand-writes audio_meta.json and .media/manifest.jsonl ledgers so downstream caption and assembly steps consume the assets without running upstream orchestrator scripts.

Related Skills

Explore More Design & Creative Skills→
hmzainjamilhmzainjamil
1

md-slides

Convert Markdown content into Marp slide decks with export directives for PDF, PPTX, or HTML.

Community
Intermediate
rlagycksrlagycks
3

crosspost

Adapt and distribute social media content across X, LinkedIn, Threads, and Bluesky.

Community
Intermediate
cvenwucvenwu

hyperframes-media

Generate local TTS narration, word-level transcripts, and transparent overlays for HyperFrames.

Community
Intermediate
SeaCloudAISeaCloudAI
1

pixverse_v6_transition

Bridge two anchor images into cinematic video transitions via seacloud run commands.

Official
Intermediate