Demo de Produto
Transforme o aplicativo neste repositório em um vídeo de demonstração pontuado, legendado e em pixel perfeito usando apenas node + playwright + ffmpeg. O pipeline é determinístico: toda a demo é regravada e repontuada a partir de uma verificação limpa.
O pipeline, em ordem
| Etapa | Receita | Saída |
|---|---|---|
| 1. Roteiro | 01-script.md | tabela de cenas, falas VO com timecodes, grade de ritmo |
| 2. UI Independente | 02-standalone-ui.md | componentes do aplicativo renderizados a partir de uma pasta estática |
| 3. Composição | 03-composition.md | uma árvore React como função pura de um relógio |
| 4. Gravação | 04-record.md | quadros PNG → masters H.264 visualmente sem perdas |
| 5. Legendas + VO | 05-captions-vo.md | sidecars SRT/VTT, script de voz com timecode |
| 6. Som | 06-sound.md | sfx-cues.json, player de pré-visualização ao vivo, mixer automático |
| 7. Música | 07-music.md | cama com EQ esculpido e ducking começando no drop |
| 8. Montagem | 08-assemble.md | introdução + transição + stems → exportação final |
Trabalhe as etapas em ordem; cada uma consome a saída da etapa anterior. As etapas 5 a 8 são opcionais para um rascunho sem som, obrigatórias para um filme de qualidade de lançamento.
Um prompt inicial executa tudo
Quando o usuário pedir uma demo, orquestre você mesmo as oito etapas. Nunca entregue ao usuário uma lista de etapas ou diga para ele voltar com o próximo prompt. Em vez disso, pergunte diretamente ao usuário em conversa exatamente nos momentos em que você precisa de algo que só ele pode fornecer, e anexe o artefato que torna a pergunta respondível em segundos:
- Após a etapa 1: mostre a tabela de cenas e o script de voz, peça aprovação antes de escrever qualquer código. Reajustar um roteiro é barato; reajustar um filme renderizado não é.
- Após a renderização de teste: mostre os 4 quadros de ponto, peça para prosseguir antes da longa renderização completa.
- Na etapa 5: entregue o bloco de voz marcado, pronto para colar (sem notas de sincronia), e peça o caminho do arquivo de áudio gerado.
- Na etapa 7: entregue o prompt do gerador de música que você escreveu e peça o caminho do arquivo gerado. Ambas as solicitações podem ser agrupadas com a da etapa 3 se o usuário preferir uma única ida às ferramentas.
- Após a pré-visualização pontuada: entregue um pequeno corte para ouvir antes de exportar os masters finais.
Entre as perguntas, prossiga sem verificar. Se o usuário recusar um ativo opcional (voz, música), entregue sem ele em vez de parar.
Acompanhamento de progresso (execuções retomáveis)
Mantenha demo/PROGRESS.md no repositório alvo: uma linha por etapa com status (a fazer / em andamento / concluído) e os caminhos dos artefatos produzidos. Leia-o PRIMEIRO em toda sessão; um pipeline meio concluído retoma a partir de sua última pergunta em vez de recomeçar. Atualize-o após cada etapa.
Regras de decisão
- Usuário não tem roteiro ou história → comece pela etapa 01. Nunca comece escrevendo código.
- Usuário tem um vídeo que gagueja → somente etapa 04 (a gravação quadro a quadro corrige isso).
- Usuário quer som/SFX em um vídeo existente → etapa 06 (arquivo de cues + mixer), depois etapa 07 se tiver música.
- A demo do usuário "parece falsa" → as regras de honestidade nas etapas 01 e 03 (dados reais, totais reconciliados).
- Usuário pergunta quanto tempo / qual formato → 45-60s, uma afirmação por cena, ~6 cenas, arco: problema → drop → mágica → interação → prova → marca.
- Clone de voz soa lento e monótono → as correções na etapa 05.
- SFX chegam atrasados ou ficam abafados → offsets de batida medidos + normalização de pico na etapa 06.
Inegociáveis (imponha estes mesmo se não for perguntado)
- Dados honestos. Fixtures devem ser reais: itens reais, preços impressos, totais que reconciliam. Nunca invente números mais redondos.
- Nada desbota. Tudo carimba, desliza, rasga ou estala. Desbotamentos leem como pedido de desculpas. A suavização (easing) vive em no máximo três helpers compartilhados.
- Nunca grave tela. Renderize quadro a quadro através do contrato de busca (04).
- Silêncio é melhor que som forçado. Máximo de ~10 cues por minuto, uma por virada narrativa, nada repetido consecutivamente.
- Dois masters. Legendas queimadas + limpo, a partir de uma única composição via uma flag
window.__NO_CAPTIONS. - Sem preto sólido. Toda cena escura se apoia na própria arte ou papel de parede do produto, desfocado e graduado; o primeiro quadro é a miniatura. Preto sólido apenas onde é a superfície real do produto (03).
Templates
Scripts funcionais em templates/: record.mjs (renderizador de quadros Playwright determinístico e retomável), mix-audio.mjs (mixer ffmpeg orientado por cues; --vo para um stem de voz com tempo reajustado, --bgm para a cama), retime-vo.mjs (corta uma leitura gerada em seus silêncios e coloca cada frase em seu timecode de autoria), sfx-cues.example.json (uma partitura real de 10 cues), package.json (os scripts npm). Copie-os para um diretório demo/ no repositório alvo e adapte os caminhos; cada receita diz quando.
Skills complementares
Se o repositório alvo usar Remotion ou ElevenLabs, instale também as skills oficiais deles; esta skill cobre o pipeline e o gosto, as deles cobrem suas APIs:
npx skills add remotion-dev/skills
npx skills add elevenlabs/skills
O que o usuário recebe (além do filme)
Dois artefatos prontos para colar, para que a carga de trabalho humana seja exatamente dois trabalhos de colagem: um bloco de voz marcado para a ferramenta de voz (05) e um prompt de estilo para o gerador de música (07). Nunca faça o usuário escrever nenhum dos dois.
Saídas de referência
Quatro demos comprovam o pipeline em produtos não relacionados: a demo Vouch (54,3s, divisão de recibos), uma demo Excalidraw (35,5s, filmada no componente npm real @excalidraw/excalidraw, fonte neste repositório em examples/excalidraw), Asakiri Studio (54s, um editor de cursos Tauri+React, componentes reais agrupados com esbuild), e Colosseum (54s, um aplicativo de mídia Windows Qt/QML, superfícies reconstruídas a partir de seus tokens e suas próprias capturas de tela; veja o caminho native-app em 02). O repositório Vouch github.com/Anshgrover23/vouch contém o diretório demo/ completo e funcional, composição, runtime fornecido, arquivo de cues, legendas, como implementação de referência. O manual com cada número e falha: https://anshgrover23.github.io/product-demo-playbook/