Repolode
Submit
OneMoh

OneMoh/html-explainer

An Agent Skill that turns a topic into a narrated explainer video with voiceover, hard subtitles and cover images, rendered locally from HTML.

Open-source alternative to:SynthesiaLumen5

View on GitHub
Stars
174
Forks
20
Open issues
2
Last commit
5 days ago

What is it?

html-explainer is an agent skill for producing explainer videos. You give an agent a topic, and it runs the pipeline: research, narration script, text-to-speech voiceover, subtitle and beat timing, scene HTML authoring, frame rendering and ffmpeg encoding, then cover images. Scenes are written as HTML/CSS/GSAP and rendered frame by frame by seeking animations to exact timestamps rather than recording a browser, so the same frame renders identically on every run.

Voiceover can use the free edge-tts engine by default or Volcano Engine speech synthesis 2.0, which needs an API key stored in a local env file. Subtitles are timed from word-level timestamps returned by the TTS engine, and scene animations anchor to subtitle text instead of hard-coded frame numbers, so editing the narration re-times the video automatically. The project includes a catalog of 23 visual styles and a library of about 40 motion primitives.

The skill works with Claude Code, OpenAI Codex, WorkBuddy and other agent tools that load SKILL.md files. Rendering supports 1080p or 4K at 30 or 60 fps, optional motion blur, and multi-process workers. Core rendering needs Python 3.9+, Node 18+, Chrome or Edge, and ffmpeg.

Key features

  • 01Renders scenes deterministically by seeking animations to exact timestamps, avoiding recording timing bugs.
  • 02Offers two voiceover engines: free edge-tts by default, or Volcano Engine TTS with an API key.
  • 03Times subtitles from word-level TTS timestamps and anchors animations to subtitle text.
  • 04Includes 23 visual style templates and a library of about 40 motion primitives.
  • 05Produces 16:9, 3:4 and optional 9:16 cover images alongside the MP4, SRT and VTT files.
  • 06Supports 1080p and 4K output at 30 or 60 fps, with optional motion blur and parallel rendering.

Use cases

  • Turning an article or documentation page into a narrated explainer video.
  • Producing a series of topic videos with consistent voiceover and subtitles from an AI coding agent.
  • Generating videos offline without per-video API fees, using the default edge-tts voice.
  • Making reproducible explainer renders where re-running the pipeline gives identical frames.

Topics

#agent-skill#video-generation#text-to-speech#html-to-video#claude-code#tts#subtitles#agent-skills#claude-code-skill#claude-code-skills

FAQ

What is html-explainer?
An Agent Skill that turns a topic into a narrated explainer video with voiceover, hard subtitles and cover images, rendered locally from HTML. html-explainer is an agent skill for producing explainer videos. You give an agent a topic, and it runs the pipeline: research, narration script, text-to-speech voiceover, subtitle and beat timing, scene HTML authoring, frame rendering and ffmpeg encoding, then cover images. Scenes are written as HTML/CSS/GSAP and rendered frame by frame by seeking animations to exact timestamps rather than recording a browser, so the same frame renders identically on every run.
Is html-explainer free to use? What license does it have?
html-explainer is open source under the MIT license. Check the license terms before using it in commercial products.
Is html-explainer still maintained?
Actively maintained. The last commit to html-explainer was on Oct 14, 2026.
What can I use html-explainer for?
Turning an article or documentation page into a narrated explainer video. Producing a series of topic videos with consistent voiceover and subtitles from an AI coding agent. Generating videos offline without per-video API fees, using the default edge-tts voice. Making reproducible explainer renders where re-running the pipeline gives identical frames.
Where can I get html-explainer?
The source code and installation instructions are on GitHub: https://github.com/OneMoh/html-explainer

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects