🧭 Onboarding de produto
Explicar uma feature nova em ~90 segundos é o caso de uso mais imediato do HyperFrames. Em vez de um tour de screenshots estático, você entrega um MP4 narrado que o usuário assiste no próprio app — e pode regenerar toda vez que a feature mudar.
Screenshots envelhecem: a cada release a UI muda e o carousel fica desatualizado. Com HyperFrames, o SCRIPT.md é a fonte da verdade. Você edita o roteiro, roda node build-index.mjs && npx hyperframes render e tem um vídeo novo em minutos — sem editor, sem gravador de tela.
Escrever SCRIPT.md
6 cenas, ~100 s de narração no total. Descreva a feature do ponto de vista do usuário, não do dev.
Gerar narração com Kokoro
Voz pf_dora --speed 0.98, medir duração com ffprobe, preencher AUDIO[] no gerador.
Compor cenas no build-index.mjs
Cada cena = um estado da UI recriado em HTML dark premium. Use GSAP para animar entradas e highlights.
Renderizar e distribuir
npx hyperframes render --quality high --output renders/onboarding-v2.mp4 — sobe ao CDN ou embeds diretamente no app.
- ✓ Narração de 1–3 frases por cena (≤20 s)
- ✓ UI recriada em HTML, não screenshot real
- ✓ CTA final com link direto para a feature
- ✓ Versão 9:16 para mobile onboarding
- ✗ Vídeo de 5+ minutos — usuário abandona em 30 s
- ✗ Screenshots em vez de HTML (fica desatualizado)
- ✗ Narração muito rápida — use
--speed 0.98, não 1.2 - ✗ Sem versão muda: esquecer de rerenderizar após update
Nomeie os renders como onboarding-v1.mp4, onboarding-v2.mp4. Assim o CDN não cacheia o vídeo antigo e você mantém histórico para rollback.
🎓 Micro-aulas e cursos
Transformar um conceito em uma aula curta narrada — com código animado, diagrama SVG e captions sincronizados — é o que o HyperFrames faz melhor. Cada aula é um SCRIPT.md; um curso é uma pasta de SCRIPTs.
O array CAPTIONS[] no build-index.mjs define as legendas sincronizadas com o áudio. Em micro-aulas, preencha todas as cenas — quem assiste sem som (feed do LinkedIn, celular no silencioso) ainda absorve o conteúdo.
📣 Lançamento / changelog em vídeo
Anunciar um release com um vídeo narrado em vez de um post de texto aumenta o engajamento — especialmente no LinkedIn e no canal do Discord do produto. O HyperFrames produz o vídeo do changelog no mesmo CI que publica a release.
Posts de release notes são ignorados por 80%+ dos usuários. Vídeos de 60–90 s com narração e animação da nova feature têm taxa de abertura 3–5× maior em canais como Discord, Slack e e-mail de produto.
- ✓ Foque em 3 mudanças, não em todas as 47 do release
- ✓ Mostre o "antes" e o "depois" animado
- ✓ Versão 9:16 para Stories/Reels do produto
- ✓ Automatize no CI:
npx hyperframes renderno pipeline de release
- ✗ Listar bugs corrigidos — o usuário não se importa
- ✗ Mais de 2 min de duração — a atenção cai
- ✗ Narrar jargão interno da empresa ("refactor da camada de serviço")
- ✗ Esquecer a CTA: "atualiza agora em inema.club/app"
🧑🤝🧑 Explicar um conceito técnico ao time
Alinhar entendimento interno sem reunião. Um vídeo de 90 s explica uma decisão arquitetural, um novo padrão de código ou um processo de deploy — e fica disponível para consulta assíncrona no Notion, Confluence ou canal do Slack.
Reuniões de alinhamento têm alto custo de atenção e baixa retenção. Um vídeo narrado de 90 s, com diagrama animado e código real, pode ser pausado, retrocedido e assistido quando o dev estiver focado — não quando foi convocado.
| Aspecto | Vídeo HyperFrames | Reunião síncrona |
|---|---|---|
| Custo de tempo do time | 90 s por pessoa | 30–60 min × N devs |
| Disponibilidade | Assíncrono, 24/7 | Depende de agenda |
| Retenção do conteúdo | Pode pausar/rever | Depende de notas |
| Atualização | Rerun do build | Nova reunião |
Use a função sceneN() do build-index.mjs para injetar SVG futurista com setas animadas (GSAP gsap.from() + stagger) mostrando o fluxo do sistema. Muito mais claro que um slide de texto.
📄 Documentação em vídeo que não desatualiza
A maior queixa de docs em vídeo é que ficam desatualizados em semanas. Com HyperFrames, o vídeo é um artefato de build — quando o conteúdo muda, é só editar o SCRIPT.md e rodar o build de novo. Nenhum editor de vídeo aberto.
API muda — docs ficam errados
Endpoint renomeado, parâmetro novo, comportamento alterado. O vídeo antigo está desatualizado.
Editar SCRIPT.md e assets/txt/sN.txt
Ajuste as linhas de narração e HTML da cena afetada. ~5 min de trabalho.
Rerrodar narração somente das cenas alteradas
npx kokoro-tts assets/txt/s3.txt --voice pf_dora --speed 0.98 --output assets/audio/s3.wav
Rebuild e render
node build-index.mjs && npx hyperframes lint && npx hyperframes render --quality high --output renders/docs-api-v3.mp4
Vídeo atualizado publicado
Do zero ao MP4 novo: ~10 min. Sem abrir editor de vídeo, sem gravar tela novamente.
🎨 Adaptar o house style à marca do cliente
O HyperFrames tem uma paleta dark premium padrão (#0D1321 bg, #FFC300 accent). Mas o design.md é o único arquivo que você precisa trocar para adaptar todo o visual a uma marca diferente — mantendo o pipeline inteiro.
Muda com o design.md:
- ✓ Cor de fundo (
bg) - ✓ Accent color (botões, bordas, highlights)
- ✓ Fontes (títulos, corpo, mono)
- ✓ Cor e texto da CTA final
- ✓ Logo/ícone da empresa na cena inicial
Não muda (o pipeline permanece igual):
- — Estrutura de cenas (SCRIPT.md)
- — TTS (pf_dora, Kokoro local)
- — Render (Chrome headless + FFmpeg)
- — Comandos npx hyperframes lint/render
- ✓ Fundo sempre escuro (dark premium — não ceda ao "fundo branco")
- ✓ Accent com contraste ≥4.5:1 contra o fundo
- ✓ Fonte do título com peso 700 ou 800
- ✓ Testar com
npx hyperframes inspect --samples 16antes de entregar
- ✗ Fundo branco — fontes antialiased ficam pixeladas no render
- ✗ Accent muito claro (ex.:
#FFFF00) — ofusca o texto - ✗ Trocar o
LEAD/TAIL/FADEsem testar (LEAD=0.5 TAIL=0.9 FADE=0.45são os valores validados) - ✗ Usar fonte não disponível no Google Fonts — quebra o
fetch-fonts.mjs
Os valores LEAD=0.5 (silêncio antes da narração), TAIL=0.9 (pausa após a narração) e FADE=0.45 (duração do fade entre cenas) foram calibrados para a voz pf_dora --speed 0.98. Se você trocar a voz ou a velocidade, recalibre esses valores.
📋 Resumo do Módulo 4.2
- ✓ Onboarding de produto: vídeo narrado em ~90 s, regenerável a cada release
- ✓ Micro-aulas: estrutura de 6 cenas com CAPTIONS[] para acessibilidade
- ✓ Changelog em vídeo: max. 3 features, narração de linguagem de produto
- ✓ Alinhamento técnico assíncrono: SVG animado substitui reunião de 30 min
- ✓ Docs em vídeo: MP4 é artefato de build, atualiza em ~10 min
- ✓ Adaptação de marca: só o design.md muda — pipeline inteiro permanece
- →
pf_dora --speed 0.98— voz padrão PT-BR - →
LEAD=0.5 / TAIL=0.9 / FADE=0.45— timings validados - →
npx hyperframes lintantes de todo render - →
npx hyperframes inspect --samples 16para checar layout - →
bg #0D1321 / accent #FFC300— paleta dark premium padrão - →
--quality highpara o render final (não draft)
🧰 Biblioteca de prompts
Coleção de prompts prontos para os casos de uso mais comuns — onboarding, micro-aula, changelog e mais.