mira-slide-to-video

name

mira-slide-to-video

description

Gera um .mp4 de um ou mais slides de um deck do Mira gravando a animacao real (Chrome headless + ffmpeg): cada slide dispara do zero, sem vazar o anterior, preenchendo o frame. Recebe quais slides (um, varios ou todos) e a resolucao (16:9, 9:16, 1:1), encadeia com transicao (4 segundos por slide, alteravel), toca animacoes finitas como o chart-race por inteiro e nunca toca no deck original. Use SEMPRE que o usuario disser /mira-slide-to-video, gerar video do slide, transformar slide em video, exportar slide como mp4, gravar a animacao do slide, video do deck, quero um mp4 do slide, renderizar o slide em video, ou fazer um Reels/Short a partir do slide.

Skill: Slide (ou slides) do Mira em video .mp4

Grava a animacao real de um ou mais slides de um deck e entrega um unico .mp4. Casos tipicos: exportar um slide para Reels/Shorts, gerar um teaser do deck, mandar um trecho animado por WhatsApp.

Abre o deck no Chrome headless, grava cada slide pedido em tempo real (animacao do zero, sem vazar o slide anterior, preenchendo o frame) e junta os clipes num video com transicao entre eles.

Regra de Ouro: nunca toca no deck original

Grava a partir do index.html (ou de um index-9x16.html etc.) sem editar nada. A saida .mp4 vai para a pasta do deck (ou o caminho que o usuario pedir).

Modelo de tempo (o "4 segundos")

• --seconds N (padrao 4): quanto tempo CADA slide fica no video. Esse e o 4s padrao, alteravel.
• --durations 2:17,5:8: override por slide. Slides com animacao finita (chart-race, que toca uma vez e para) devem receber aqui a duracao total da animacao, senao o video corta no meio. Para chart-race, leia o durationMs (linhas) ou stepMs x (nperiodos-1) (barras) no JS do slide e use esse valor (some ~1s de folga para segurar o quadro final).
• --transition D (padrao 0.6): crossfade entre um slide e o proximo. Para uma transicao longa de 4s, use --transition 4.

Regra pratica: slide de loop continuo = 4s (ou o valor pedido); slide de animacao finita = duracao total da animacao (via --durations).

Dependencias (instalar sob demanda, padrao Mira)

Precisa de ffmpeg no PATH (ou em MIRA_FFMPEG) e dos pacotes puppeteer + puppeteer-screen-recorder. Nao sao dependencia do Mira: instale numa pasta temporaria reaproveitavel (como o mira-qrcode faz com o qrcode) e rode os scripts com NODE_PATH apontando para o node_modules dela.

1. Conferir ffmpeg: ffmpeg -version. Se nao houver, avise o usuario (Windows: baixar em gyan.dev e por no PATH, ou setar MIRA_FFMPEG). Sem ffmpeg a skill nao roda.
2. Instalar os pacotes uma vez (pule se node_modules/puppeteer-screen-recorder ja existir na pasta temp):

   npm install puppeteer puppeteer-screen-recorder --no-save --prefix "<pasta-temp>"
   

   (ex. de pasta-temp: %TEMP%/mira-s2v no Windows.) O puppeteer baixa um Chromium proprio; se preferir usar o Chrome ja instalado, sete MIRA_CHROME para o chrome.exe (o script ja tenta locais comuns no Windows sozinho).
3. Rodar com NODE_PATH para a pasta temp:

   NODE_PATH="<pasta-temp>/node_modules" node "<skill>/scripts/build-video.cjs" <deck.html> <saida.mp4> [flags]
   

   No Windows/PowerShell: $env:NODE_PATH="<pasta-temp>\node_modules"; node ....

Enquadramento e preenchimento

• 16:9 (padrao): --width 1920 --height 1080. O script mede a caixa do conteudo do slide e da um scale (--fill, padrao 0.92) para preencher o frame sem distorcer. Sobra faixa lateral quando o conteudo e mais estreito que 16:9 (inerente, mantem a proporcao).
• 9:16 / 1:1: para um vertical/quadrado que preenche de verdade, grave a partir do deck ja adaptado ao formato (index-9x16.html do mira-vertical, index-1x1.html do mira-squared) com --width 1080 --height 1920 (ou 1080 1080) e --fill 0 (o deck ja preenche). Gravar o 16:9 direto num quadro 9:16 deixa o conteudo como uma faixa fina no meio.
• Deck de cena unica (sem body > section): decks que sao UMA cena full-screen (ex.: a cena de digitacao do mira-animated-typing, com .mira-frame no lugar de <section>) nao tem slides. A skill detecta isso (0 secoes), grava a pagina inteira como um unico clipe e, para um t=0 limpo, limpa a tela e carrega o deck do zero ja gravando. Passe --seconds cobrindo a duracao total da cena. Para 1:1 sem cinza, grave o index-1x1.html com --width 1080 --height 1080: o quadro do deck (lado 100vh) preenche o frame quadrado e as laterais cinza nem aparecem. O --slides e ignorado nesse caso.

Passos

1. Descobrir o alvo. Qual deck (ache o index.html em decks/<deck>/; se houver varios e o usuario nao disser, pergunte) e quais slides (um, lista 2,3, ou todos). Qual formato (16:9 padrao, 9:16, 1:1). Se pedir 9:16/1:1, confirme se existe o deck adaptado do formato; se nao, ofereca rodar antes o mira-vertical/mira-squared.
2. Definir as duracoes. Para cada slide alvo: loop continuo usa --seconds (4 padrao); animacao finita (chart-race) recebe a duracao total via --durations (leia durationMs/stepMs no JS do slide). Confirme a transicao (--transition, 0.6 padrao; ou o que o usuario pedir).
3. Garantir dependencias (secao acima): ffmpeg + instalar puppeteer/recorder na pasta temp.
4. Rodar o build-video.cjs com as flags. Ele grava cada slide (animacao do zero, sem vazamento) e junta com crossfade.
5. Conferir o resultado. Extraia 2-3 frames com ffmpeg (inicio, meio, fim) e verifique: (a) o t=0 e o slide certo, sem vazar o anterior; (b) a animacao roda inteira; (c) o enquadramento preenche o frame; (d) as transicoes entre slides estao suaves.
6. Reportar. Caminho do .mp4, resolucao/duracao, quais slides e com que duracao cada um, e que o deck original ficou intacto.

Exemplos

# um slide, 16:9, animacao finita de ~16s (chart-race no slide 2):
node build-video.cjs decks/meu/index.html decks/meu/slide-2.mp4 --slides 2 --durations 2:17

# tres slides de loop, 4s cada, transicao de 0.6s:
node build-video.cjs decks/meu/index.html decks/meu/teaser.mp4 --slides 1,3,4

# vertical (deck ja reflowado pelo mira-vertical):
node build-video.cjs decks/meu/index-9x16.html decks/meu/reels.mp4 --slides 2 --durations 2:17 --width 1080 --height 1920 --fill 0

Edge cases

• Sem ffmpeg: aborte com mensagem clara (é obrigatorio). Nao tente gerar so frames.
• Slide finito cortado: se o video termina antes da animacao acabar, a duracao daquele slide ficou curta; aumente via --durations.
• 9:16 com faixa fina no meio: foi gravado o 16:9 direto; grave o index-9x16.html com --fill 0.
• Transicao maior que o clipe: o script reduz o crossfade automaticamente e avisa.
• Chart-race que ainda nao entrou na viewport: o script ja resolve, faz shim do IntersectionObserver e dispara a animacao no inicio da gravacao.
• Deck sem body > section (cena full-screen): a skill grava a pagina inteira como clipe unico, recarregando o deck no inicio da gravacao (t=0 limpo). Ajuste --seconds para a duracao da cena; --slides nao se aplica. Para 1:1 sem cinza, grave o index-1x1.html em 1080x1080.

Checklist

• Deck original intacto (a skill so le o HTML, nunca edita).
• .mp4 gerado na pasta do deck (ou caminho pedido), na resolucao certa.
• Cada slide expressa exatamente o slide: t=0 correto (sem vazar o anterior), animacao inteira, enquadramento preenchendo o frame.
• Slides de animacao finita (chart-race) com duracao total via --durations (nao cortados).
• Transicao entre slides aplicada (padrao 4s de tempo por slide; crossfade --transition).
• ffmpeg presente; puppeteer + puppeteer-screen-recorder instalados na pasta temp; rodou com NODE_PATH.
• Nenhum travessao (—); acentuacao correta (segue agents/_shared/idioma.md).