Vídeo de lançamento: o filme principal de diretor criativo

Vídeo de lançamento SaaS: diretor criativo

Todo vídeo deve parecer feito para o seu produto: conceito, estrutura, aparência e transições próprios. Este skill é um diretor + kit de ferramentas, não um modelo. Nunca recorra a um estilo padrão.

Requisitos

Node 18+, FFmpeg no PATH, npx [email protected]. Os skills HyperFrames hyperframes-creative, hyperframes-animation e hyperframes-registry (instalar: npx [email protected] init <qualquer-dir>; atualizar: npx [email protected] skills update). Python + pip install librosa apenas para análise de música.

Vídeo de referência? Se o usuário enviar um vídeo para replicar ("como este"), siga o arquivo references/REFERENCE.md: execute scripts/analyze-reference.mjs e escreva reference.md logo após o passo 1. Ele então molda a proposta, o roteiro, as verificações de construção e a música.

Fluxo de trabalho (4 pontos de verificação precisam do usuário)

1. Configurar e conhecer o produto. Execute node <skill>/scripts/new-project.mjs <dir>. Em seguida, conheça o produto pela melhor fonte disponível:

   • Código: leia os componentes, rotas, tema e textos; escreva brand.json (references/BRAND.md) e execute scripts/brand.mjs.
   • Link: node <skill>/scripts/from-link.mjs <url> <dir> escreve brand.json e brand-kit.md; verifique os logotipos e cores.
   • Telas: peça o logotipo, as cores e as telas principais.

   Liste os recursos ativos, o público-alvo e o tom.

2. PONTO DE VERIFICAÇÃO: propor 3 direções. Use references/PITCH.md. Combine os looks de references/DIRECTIONS.md (4 famílias × 3 looks) com as formas de references/NARRATIVES.md. As três devem diferir (pelo menos 2 famílias) e cada uma recebe um quadro-chave renderizado. O usuário escolhe ou mistura; salve a decisão em direction.md. Com uma referência, a direção A é a referência na fidelidade solicitada, e cada quadro é mostrado ao lado do quadro de referência ao qual responde.

3. PONTO DE VERIFICAÇÃO: roteiro. Uma tabela de batidas para a direção escolhida (cena, conteúdo na tela, texto, movimento, transição, som), mais as ações exatas na IU. Após aprovação, peça as telas dentro do aplicativo necessárias (references/UI-REBUILD.md).

4. PONTO DE VERIFICAÇÃO: imagens (apenas se a direção precisar delas). Escreva os prompts e aguarde os arquivos; nunca as gere ou finja você mesmo (references/IMAGES.md).

5. Construir.

   • Uma subcomposição por cena.
   • Para cada cena, leia seu blueprint HyperFrames e pesquise no registro (npx [email protected] catalog <palavras> --json) antes de construir manualmente.
   • As cenas do produto começam a partir de reference/ui-rig.html. Use lib/fx.js para movimentos e lib/three-stage.js para 3D.
   • Loop lint → snapshot → corrigir até que cada quadro seja lido bem, depois faça uma renderização de rascunho (references/WORKFLOW.md). Com uma referência, verifique o rascunho com analyze-reference.mjs --compare.

6. PONTO DE VERIFICAÇÃO: música. Escreva music-plan.json, execute scripts/music-plan.mjs e diga ao usuário para gerar 2 a 4 takes no ElevenLabs. Alinhe-os com analyze-track.py --drop, misture-os com mix-variations.mjs e deixe o usuário escolher (references/MUSIC.md).

7. Entregar. Monte a faixa, renderize com -q delivery, depois execute scripts/finalize.mjs (masterização −14 LUFS + uma cópia de upload abaixo de 100 MB).

Regras

• Apenas recursos reais, IU real, dados de demonstração. Nunca invente telas; peça por elas.
• Um movimento característico e 2 a 3 transições por vídeo (ou o próprio conjunto da referência), usados de forma consistente. Segure cada linha de texto pelo tempo suficiente para ser lida.
• Apenas variáveis de marca nas cenas (var(--brand-primary), var(--font-display)); nunca codifique um hexadecimal de marca ou família de fontes.
• Uma referência é gramática, não conteúdo. Copie seu ritmo, transições, tipo e papéis de cor; nunca seu material de arquivo, logotipos, nomes, textos ou música.
• Sem aparência padrão. Se um rascunho começar a derivar para um genérico "gradiente escuro + janela inclinada + cartões de texto", pare e releia direction.md.
• Leia references/GOTCHAS.md antes de construir. Ele lista as armadilhas do HyperFrames que custam renderizações.

Arquivos

Caminho	O que é
toolkit/fx.js	auxiliares de movimento: digitação, texto em streaming, chicote, revelação de máscara, cursor, contagem regressiva, desenho/ seguir caminho
toolkit/three-stage.js	Palco Three.js de laptop / telefone / painéis flutuantes com câmera com keyframe e trocas de tela
toolkit/ui-rig.html	Estrutura de reconstrução de IU (câmera plana / inclinada / frontal), copiada para reference/ em cada projeto
toolkit/skeleton/	index.html raiz vazio (marcadores de marca, importmap, fx)
examples/	demonstrações de técnica, uma por família: new-project.mjs <dir> --examples as monta. Estude, nunca copie.
scripts/	new-project, from-link, brand, analyze-reference, fetch-sfx, music-plan, analyze-track.py, mix-variations, finalize