Repolode
Enviar
OneMoh

OneMoh/html-explainer

An Agent Skill that turns a topic into a narrated explainer video with voiceover, hard subtitles and cover images, rendering HTML frames locally to MP4.

Alternativa open source a:SynthesiaLoom

Ver en GitHub
Estrellas
179
Forks
21
Issues abiertos
2
Último commit
hace 5 días

¿Qué es?

html-explainer is an agent skill that produces an explainer video from a topic. The pipeline covers research, narration script, text-to-speech voiceover, word-level subtitles, HTML/CSS/GSAP scene authoring, deterministic frame-by-frame rendering to MP4, quality checks, and 16:9, 3:4 and 9:16 cover images.

Rather than recording a browser, the renderer seeks GSAP timelines and CSS animations to each exact timestamp and screenshots the frame, so the same frame renders identically each time. Speech timing comes from TTS word boundaries, and animations anchor to subtitle text instead of hard-coded frame numbers. Voiceover can use the free edge-tts engine or Volcano Engine TTS with an API key.

The skill works with Claude Code, OpenAI Codex, WorkBuddy and similar agents, and its core pipeline runs locally without per-video API fees. Output options include 1080p or 4K at 30 or 60 fps, shutter motion blur, and multi-process rendering.

Funciones clave

  • 01Renders HTML scenes frame by frame via seek, so output is reproducible.
  • 02Aligns animations to subtitle text using beat markers instead of frame numbers.
  • 03Supports edge-tts (free) or Volcano Engine TTS for narration.
  • 04Generates hard subtitles in SRT and VTT formats plus a progress bar.
  • 05Offers a library of 40+ seekable motion primitives and 23 visual styles.
  • 06Produces 16:9, 3:4 and 9:16 cover images with layout checks.

Casos de uso

  • Turning an article or research topic into a narrated explainer video.
  • Producing a series of consistent explainer videos from a repeatable HTML template.
  • Making finance or data commentary videos with sourced figures and subtitles.
  • Running a fully local video pipeline without per-video API fees.

Temas

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

Preguntas frecuentes

¿Qué es html-explainer?
An Agent Skill that turns a topic into a narrated explainer video with voiceover, hard subtitles and cover images, rendering HTML frames locally to MP4. html-explainer is an agent skill that produces an explainer video from a topic. The pipeline covers research, narration script, text-to-speech voiceover, word-level subtitles, HTML/CSS/GSAP scene authoring, deterministic frame-by-frame rendering to MP4, quality checks, and 16:9, 3:4 and 9:16 cover images.
¿html-explainer es gratuito? ¿Qué licencia tiene?
html-explainer es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿html-explainer sigue mantenido?
Mantenimiento activo. El último commit de html-explainer fue el 14 oct 2026.
¿Para qué puedo usar html-explainer?
Turning an article or research topic into a narrated explainer video. Producing a series of consistent explainer videos from a repeatable HTML template. Making finance or data commentary videos with sourced figures and subtitles. Running a fully local video pipeline without per-video API fees.
¿Dónde consigo html-explainer?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/OneMoh/html-explainer

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados