HyperFrames — Vídeos Explicativos com Claude Code

Curso completo sobre a Skill video-explicativo: criar vídeos explicativos narrados (HTML→MP4 via HyperFrames) com Claude Code, animados, em PT-BR e renderizados localmente sem chave de API, em 16:9 e 9:16. Do conceito de Skill ao render final; a própria Skill vive em repo próprio, linkado no curso.

Abrir o curso

Também em: English · Español

Resumo do curso

Formato
Online
Autor
Nei Maldaner
Atualização
2026-06-01

Estrutura do curso

  1. As 4 trilhas
  2. Do conceito de Skill até a sua biblioteca de vídeos rodando no Reels.
  3. Skills no Claude Code — O que é uma Skill, o arquivo SKILL.md, name + description, divulgação progressiva e onde elas vivem. O conteúdo do vídeo, por escrito.
  4. Pipeline: HTML → MP4 — Como criar um vídeo no HyperFrames: setup, roteiro, narração TTS local, composição de cenas, GSAP, lint, inspect e render nos dois formatos.
  5. Por dentro do skill — Como o skill video-explicativo foi construído e o que ele faz: estrutura de arquivos, house style, o gerador build-index.mjs e as armadilhas resolvidas.
  6. Aplicações & Prompts — Onde usar a ferramenta: YouTube, Shorts/Reels, onboarding de produto, aulas, lançamentos. Com biblioteca de prompts prontos pra colar no Claude Code.
  7. Como funciona, em 1 minuto
  8. Você dá um assunto — O Claude escreve o roteiro em 6–9 cenas, gera a narração em PT-BR com TTS local (Kokoro) e mede as durações reais.
  9. Vira HTML animado — Um gerador monta cada cena em HTML + GSAP, com áudio e animação batidos pelo mesmo array de tempos. Dark premium, accent âmbar.
  10. Renderiza em MP4 — HyperFrames roda Chrome headless + FFmpeg e exporta o vídeo em 16:9 (YouTube) e 9:16 (Shorts/Reels). Sem nuvem, sem API.

O que você aprende

  • O que é uma Skill, o arquivo SKILL.md, name + description, divulgação progressiva e onde elas vivem. O conteúdo do vídeo, por escrito.
  • Como criar um vídeo no HyperFrames: setup, roteiro, narração TTS local, composição de cenas, GSAP, lint, inspect e render nos dois formatos.
  • Como o skill video-explicativo foi construído e o que ele faz: estrutura de arquivos, house style, o gerador build-index.mjs e as armadilhas resolvidas.
  • Onde usar a ferramenta: YouTube, Shorts/Reels, onboarding de produto, aulas, lançamentos. Com biblioteca de prompts prontos pra colar no Claude Code.
  • O Claude escreve o roteiro em 6–9 cenas, gera a narração em PT-BR com TTS local (Kokoro) e mede as durações reais.
  • HyperFrames roda Chrome headless + FFmpeg e exporta o vídeo em 16:9 (YouTube) e 9:16 (Shorts/Reels).

O que você constrói

  • Do conceito de Skill até a sua biblioteca de vídeos rodando no Reels.
  • Transforme HTML em vídeo com o Claude Code.
  • Vídeos explicativos narrados, animados e renderizados localmente — sem chave de API.
  • Um vídeo no HyperFrames: setup, roteiro, narração TTS local, composição de cenas, GSAP, lint, inspect e render nos dois formatos.
  • A biblioteca de prompts prontos pra colar no Claude Code.

Temas

  • Claude Code
  • Skills
  • Vídeo
  • HyperFrames
  • IA

Continue aprendendo

Não sabe por onde começar? Veja o guia como aprender IA do zero ao avançado, com a ordem recomendada dos cursos, ou as respostas diretas sobre IA.