Vídeo de lançamento para um produto de software
Produza um vídeo de 30 a 60 segundos que faça alguém entender e querer o produto.
A decisão que molda tudo: reconstruir, não gravar
Gravações de tela lutam contra você. A latência real é tempo morto. As regravações são caras. Você não pode segurar um quadro, não pode desacelerar uma batida e acelerar outra, e não pode cortar com precisão sem atingir o borrão da compressão.
Então reconstrua a IU como React orientado por quadro dentro do Remotion. Cada visual é uma
função pura de useCurrentFrame(). As digitações aterrissam em uma curva exata, um
estado de carregamento resolve na batida, e uma regravação custa um número.
Isso só é razoável porque você pode ler o código real do produto (se local) ou DOM+CSS (se hospedado) e reproduzi-lo fielmente. Faça isso — pegue os nomes de classe reais, as cores reais, o texto real. A reconstrução deve ser indistinguível de uma gravação, depois melhor.
Quando gravar em vez disso: 3D pesado, conteúdo de vídeo dentro do produto, uma
superfície Canvas/WebGL ou um aplicativo desktop nativo. Se uma superfície específica não puder ser
reconstruída, grave apenas essa superfície e componha com <OffthreadVideo>.
Fase 1 — Entenda o produto
Leia references/discovery.md antes de iniciar esta fase. Ela cobre o
procedimento de navegação e triagem, a conversa de credenciais e como extrair
um sistema de design de um site ativo.
Versão resumida:
- Dado um URL: navegue por ele. Página inicial primeiro (ela diz como eles se posicionam), depois o aplicativo em si. Descubra qual trabalho o produto faz e para quem.
- Dado um repositório local/servidor de desenvolvimento: leia o código. Muito mais rico — você obtém os componentes reais, os tokens de tema reais, os dados de seed reais.
- Faça a triagem das páginas. A maioria dos produtos tem 20 telas e 3 que importam. Autenticação, configurações, faturamento, privacidade, conta, onboarding padrão — essas quase nunca são a história. Encontre a tela onde o produto faz a coisa que só ele pode fazer.
- Se o conteúdo bom estiver atrás de um login, pergunte primeiro — credenciais de teste ou uma
conta com dados de seed no ambiente de desenvolvimento local deles. Se nenhum estiver disponível, não
desista e não finja uma sessão que você nunca viu: mude para a estrutura em capítulos e
construa a partir dos próprios cartões de recurso, texto e componentes da página inicial.
discovery.mdtem o procedimento de coleta e as regras de honestidade.
Em seguida, confirme sua interpretação com o usuário antes de construir — uma interpretação errada do produto custa uma construção inteira. Mostre a eles: o que você acha que o produto faz, as 2 a 4 telas que você planeja destacar, o cenário herói, a lista de tomadas e a pergunta da música (veja a Fase 4). Um ponto de verificação, depois execute.
Fase 2 — Escolha a estrutura
Leia references/structure.md. Duas estruturas funcionam; escolher errado custa a
construção.
Estrutura A — a narrativa única. O padrão. Um usuário fazendo um trabalho e obtendo um artefato. Não é um tour de recursos.
| batida | trabalho |
|---|---|
| Gancho (0–5s) | Enuncie o problema nas palavras do próprio espectador. Ainda sem IU. |
| Pergunta (5–12s) | O usuário pede a coisa. Foco no campo de entrada. |
| Trabalho (12–25s) | O produto faz visivelmente algo difícil. Mostre as evidências. |
| Artefato (25–35s) | A saída, completa, em tamanho legível. |
| Controle (35–45s) | O usuário muda algo e permanece no comando. |
| Placa (45–50s) | Logotipo, uma linha, domínio. |
As batidas de Trabalho e Controle são o que separam uma demonstração real de um mockup. "Ele me perguntou em vez de adivinhar" e "Eu pude editar o que ele fez" são argumentos de confiança, e confiança é o que um vídeo de lançamento está realmente vendendo.
Escolha o momento em que o produto faz algo que uma pessoa não poderia fazer facilmente sozinha, e torne a saída concreta e visível — um documento gerado, um gráfico construído, um bug corrigido, um site implantado. Artefatos concretos são o que as pessoas lembram.
Estrutura B — o filme de recurso em capítulos. Três recursos, cada um introduzido por um cartão de etiqueta em linguagem simples, depois mostrado.
gancho → [01 etiqueta → recurso] → [02 etiqueta → recurso] → [03 etiqueta → recurso] → placa
Use-a quando o produto estiver bloqueado e você estiver trabalhando a partir de sua página inicial, ou quando os recursos genuinamente não compartilham uma jornada de usuário, ou quando você deseja obter três clipes independentes de uma única construção. Três é o número — quatro significa que nenhum funciona.
Não coloque em capítulos uma sequência. Se as capacidades acontecerem uma após a outra em uma única sessão (pesquisa → rascunho → edição), isso é um único fluxo de trabalho, e rotulá-lo como três recursos luta contra o material. Se alguém pedir capítulos em um produto sequencial, ofereça o caminho do meio em vez disso: mantenha a narrativa única e coloque as etiquetas sobre a ação à medida que cada capacidade aparece. Mesma legibilidade, mesmos limites de clipe, nenhum custo de tempo de execução, história intacta.
structure.md cobre o design do cartão de capítulo, como escrever as etiquetas (nomeie o
resultado, não o mecanismo; roube as próprias palavras do produto), transições e ordenação.
Fase 3 — Fundamente tudo
Qualquer que seja o domínio do produto, não invente seu conteúdo. Se for um produto jurídico, o estatuto deve ser real. Se for análise, os números devem ser plausíveis e internamente consistentes. Se for uma ferramenta de código, o código deve compilar na cabeça do leitor.
Puxe a coisa real do repositório, da API, dos dados de seed ou da documentação. Especialistas de domínio assistem a esses vídeos e um detalhe inventado custa todos eles. Nomes de partes, datas e valores em dinheiro são aceitáveis para inventar — esses são específicos de um cliente, não alegações sobre o mundo.
Mantenha uma nota de proveniência no arquivo de dados dizendo de onde veio cada fato. O você do futuro vai querer isso.
Fase 4 — Construa
Execute o scaffold, que fixa as versões que realmente funcionam juntas e escreve a configuração:
python3 <skill-dir>/scripts/scaffold_video.py <target-dir> \
--name "product-launch" --fps 60 --seconds 45
Ele cria um projeto Remotion independente (seu próprio repositório git — nunca adicione
ferramentas de vídeo ao repositório do produto a menos que solicitado), copia useCamera.ts e
deixa um módulo de timeline para você preencher.
Depois, em ordem:
-
src/timeline.ts— matemática de quadro e limites de tomada. Escolha um BPM cuja batida seja um número inteiro de quadros (a 60fps: 120 BPM = 30 quadros, 90 BPM = 40). Coloque todo limite de tomada em uma batida. Mesmo sem música, isso dá ao corte um ritmo interno, e significa que uma faixa de música pode ser adicionada depois sem re-edição. -
src/data/script.<lang>.ts— toda string, todo número, toda peça de conteúdo de documento, em um arquivo com comentários de proveniência. Nada codificado em componentes. Re-temporização e tradução se tornam triviais. -
Componentes — recrie a IU do produto. Copie nomes de classe reais. Se o produto usar Tailwind, armazene sua configuração e CSS do tema; se usar variáveis CSS para cor, você deve trazê-las ou tudo será renderizado sem cor.
-
src/scenes/ProductScene.tsx— um objetoBexportado contendo cada batida como um número de quadro absoluto. Tudo lê a partir dele: o DOM, a câmera, o som. Re-temporização significa editar esse bloco e nada mais.
Leia references/camera.md para o sistema de tomadas, references/motion.md para
durações e tipografia.
Fase 5 — Áudio
Duas faixas, dois arquivos, duas tags <Audio>: efeitos e música. Mantenha
separados para que qualquer um possa ser substituído sem regenerar o outro.
Efeitos — references/sound.md. Restrição é toda a disciplina: um
vídeo de 45 segundos geralmente precisa de três a cinco eventos no total. Um pop significa que algo
apareceu, um swish significa que um elemento se moveu dentro da tomada, um whoosh significa que a tomada
se moveu.
python3 <skill-dir>/scripts/make_sfx.py sfx.spec.json public/sfx.wav
Música — references/music.md. Pergunte antes de construir uma. A maioria das pessoas
tem uma opinião e muitas já têm uma faixa; perguntar custa uma frase e pode salvar
todo o esforço:
Você quer uma trilha sonora? Se tiver uma faixa, envie-a e cortarei nela. Se não, posso sintetizar uma — energética, calma, cinematográfica, minimalista, calorosa ou tensa?
Se eles tiverem uma faixa, corte nela: encontre seu BPM, defina a timeline para corresponder, mova os limites da tomada para suas barras. Caso contrário, sintetize uma trilha cujo arranjo mude nos seus cortes no quadro:
python3 <skill-dir>/scripts/make_music.py music.spec.json public/music.wav
Coloque uma entrada de sections em cada limite de tomada real, uma entrada de hits no seu
maior corte e uma entrada de ducks sob qualquer linha mantida que você queira que seja lida em vez de
sentida. Música com pico de ~0.30, efeitos com pico de ~0.62. Escolha o clima com base no que o produto
é — assunto sério requer uma trilha mais calma, e um corte movimentado precisa de uma mais esparsa.
Fase 6 — Verifique com imagens estáticas, antes de renderizar
Este é o loop rápido, e pular isso desperdiça horas.
npx remotion still <CompositionId> out/f0700.png --frame=700
Em seguida, realmente olhe para o PNG. Renderize uma imagem estática por tomada, mais uma em cada transição. Verifique: o assunto está no quadro, algo está cortado no meio da palavra, há espaço vazio, o texto cabe.
Adicione uma composição silenciosa (defaultProps: { withAudio: false }) para que as imagens
não precisem do arquivo de áudio para existir.
Ajuste numericamente sempre que possível. Curvas de easing, distâncias de rolagem, conteúdo espectral — todos são computáveis. Escreva um script Python descartável que amostra a curva e imprime o que você estaria adivinhando. É mais rápido que uma renderização e está correto.
Renderize a coisa completa apenas quando as imagens estáticas estiverem corretas.
npx remotion render <CompositionId> out/video.mp4 --concurrency=4
Limite a concorrência em torno de 4 em uma máquina com 16 GB — o Remotion gera uma aba do Chrome por slot e o padrão (contagem de núcleos) causará swapping.
Fase 7 — Entregue com honestidade
Envie o arquivo. Depois diga claramente:
- O que você não pôde verificar. Você pode ler imagens estáticas; não pode julgar como oito segundos se sentem, e não pode ouvir o áudio. Diga isso.
- Qualquer tela que você reconstruiu em vez de observou — especialmente em um produto bloqueado. Liste-as e ofereça-se para refazer essas batidas se eles compartilharem acesso.
- Onde você fez uma decisão com a qual eles podem discordar.
- Como trocar a música: solte qualquer WAV ou MP3 em
public/music.wave re-renderize. - Qualquer coisa que você encontrou no produto deles enquanto construía — um bug de renderização, uma etiqueta errada, um estado ausente. Você acabou de ler a IU deles com mais cuidado do que a maioria das pessoas jamais terá. Essa observação geralmente vale mais do que o vídeo.
Arquivos de referência
Leia estes quando chegar à fase relevante — são detalhados e não há valor em carregá-los todos de uma vez.
| arquivo | quando |
|---|---|
references/discovery.md | Fase 1 — navegação, triagem de páginas, credenciais, sistemas de design, e construção a partir da página inicial de um produto bloqueado |
references/structure.md | Fase 2 — narrativa única vs. capítulos, design do cartão de capítulo, escrever etiquetas de recurso, transições, ordenação |
references/camera.md | Construindo tomadas — espaço de layout, câmera de ponto de foco, corte vs. empurrão vs. morph, isolando componentes |
references/motion.md | Durações de animação, tipografia, padrões de gancho, o reel de perguntas |
references/sound.md | Design de som — o vocabulário pop/swish/whoosh, restrição, sintetizando teclado e cliques |
references/music.md | Origem vs. síntese de trilha, escolhendo um clima, alinhando seções a cortes, mixando sob os efeitos |
references/pitfalls.md | Leia isso antes de sua primeira renderização. Bugs que custam horas reais, cada um com a correção. |
Scripts incluídos
<skill-dir> abaixo é o próprio diretório desta skill — o caminho fornecido a você quando
a skill foi carregada. Não assuma um local de instalação fixo; a skill pode estar instalada
pessoalmente, como um plugin ou clonada em um projeto.
| script | o que faz |
|---|---|
scripts/scaffold_video.py | Cria o projeto Remotion com fixadores de versão funcionais e configuração |
scripts/make_sfx.py | Sintetiza uma trilha de efeitos sonoros a partir de uma lista JSON de eventos. Sem amostras, sem dependências além de numpy. |
scripts/make_music.py | Sintetiza uma trilha musical em um de seis climas, com seu arranjo alinhado ao seu corte. Mesmas dependências. |
assets/useCamera.ts | O hook de câmera de ponto de foco — copie para src/hooks/ |
assets/ChapterCard.tsx | Cartão de capítulo para a estrutura em capítulos — copie para src/components/ |
A versão resumida
Reconstrua em vez de gravar. Uma história, um artefato — a menos que o produto esteja bloqueado ou seus recursos sejam genuinamente separados, então três capítulos com etiquetas simples. Fundamente todo fato de domínio. Quadros são a unidade de tudo. Isole um componente em vez de cortar a página. Movimento de IU é 150–300ms, movimentos de câmera são ~1s. Quatro sons é suficiente. Pergunte antes de fazer música. Olhe para as imagens estáticas antes de renderizar. Diga o que você não pôde verificar e o que você inferiu.