vibe-motion/skills

Brand Launch Video Star

Crie um filme de lançamento autêntico, não um modelo de movimento genérico. Verifique a marca, conte uma história específica do produto e renderize uma sequência rápida e polida com ativos exatos e movimento determinístico.

Impeditivos de lançamento

1. Use ativos autênticos. Nunca invente, redesenhe, aproxime, trace ou gere um logotipo, marca nominativa, produto, interface, mascote, embalagem, pessoa ou cena de marca.
2. Faça o logotipo exato. Baixe o arquivo oficial atual ou use o original do usuário. Nunca componha uma marca nominativa ou reconstrua um logotipo com primitivas CSS/SVG.
3. Pesquise além dos uploads. Trate os uploads como material de origem utilizável, não como o teto de ativos. Encontre material oficial ou licenciado adicional quando a história precisar.
4. Mostre o produto. Demonstre recursos reais, interações, cenários, saídas e provas. Não esconda uma história de produto fraca atrás de efeitos abstratos.
5. Padrão para inglês. Use outro idioma apenas quando explicitamente solicitado.
6. Mantenha o movimento determinístico. Calcule cada estado a partir de quadro/tempo e entradas explícitas. Nunca dependa de ordem de renderização ou aleatoriedade não semeada.
7. Verifique as afirmações. Confirme nomes, recursos, métricas, slogans e CTAs atuais em relação às fontes oficiais.

Se um ativo de identidade não puder ser autenticado, pare e peça um original autorizado. Não renderize um substituto plausível.

Use gráficos processuais apenas como camadas de movimento não representacionais: máscaras, gradientes, campos de cor, grades, brilhos, partículas, rastros, tipografia, gráficos de dados verificados e geometria de transição.

Início rápido

Instale o skill:

npx skills add vibe-motion/skills

Invoque-o com um briefing concreto:

Use $brand-launch-video-star para criar um filme de lançamento em inglês 16:9 de 15 segundos
para https://example.com. Pesquise ativos oficiais, mostre o fluxo de trabalho principal do produto
e entregue um MP4 Vibe Motion/Remotion mais arquivos de proveniência.

Trabalhe dentro do projeto Vibe Motion ou Remotion existente do usuário. Se nenhum existir, inicialize um projeto Vibe Motion com npx create-vibe-motion, em seguida, siga os comandos de instalação e renderização do próprio projeto gerado.

Antes da implementação:

1. Copie references/asset-manifest.example.json para o projeto e substitua cada valor de exemplo.
2. Copie references/timeline.example.json para o projeto e adapte sua duração e cenas.
3. Valide ambos os arquivos:

node <skill-dir>/scripts/validate-assets.mjs path/to/asset-manifest.json
node <skill-dir>/scripts/validate-timeline.mjs path/to/timeline.json

Use --schema-only apenas para inspecionar o modelo de manifesto incluído:

node <skill-dir>/scripts/validate-assets.mjs \
  <skill-dir>/references/asset-manifest.example.json --schema-only

Fluxo de trabalho

1. Resolva o briefing

Determine:

• Empresa/produto e URL oficial
• Foco do produto ou campanha
• Público-alvo e distribuição
• Duração; padrão de 15 segundos, normalmente suporte de 15 a 30 segundos
• Proporção de tela; padrão 16:9
• Idioma; padrão inglês
• Afirmações necessárias, CTA e necessidades de avisos legais
• Se o usuário possui ou pode publicar os ativos fornecidos

Faça apenas perguntas que mudem materialmente o filme.

2. Construa a ficha de verdade da marca

Navegue pelas fontes oficiais atuais e extraia:

• Variantes de logotipo exatas e uso
• Fontes oficiais ou webfonts
• Cores primárias, secundárias e dinâmicas
• Princípios da marca, tom e motivos visuais
• Nomes de produtos atuais, recursos, cenários, métricas e CTA
• Fotografia oficial, renders, capturas de tela de UI, filmagens, ativos de imprensa e kits de mídia

Priorize:

1. Original fornecido pelo usuário
2. Site da empresa, pacote estático, sala de imprensa, portal da marca, kit de mídia ou repositório oficial
3. Biblioteca de mídia controlada pela empresa
4. Banco de imagens licenciado ou kit de parceiro autorizado

Leia references/asset-authenticity.md antes de adquirir ativos.

3. Crie o manifesto de ativos

Registre cada ativo de identidade em asset-manifest.json:

• ID estável e função
• Caminho local
• URL de origem exata
• Tipo de origem
• Página/arquivo de verificação oficial
• Nota de direitos/licenciamento
• Status de autenticidade
• Checksum SHA-256 opcional

O validador verifica a estrutura do manifesto, a proveniência declarada, a existência do arquivo local e os checksums opcionais. Ele não concede direitos de uso de forma independente nem prova que uma fonte remota é verdadeira; realize manualmente a comparação com a fonte oficial.

Não inicie a renderização final enquanto a validação falhar.

4. Escolha o arco narrativo

Apresente 2 a 3 direções concisas e recomende uma:

• IA/SaaS: intenção -> pensamento/planejamento -> capacidades -> execução -> saída -> prova -> logotipo
• Produto físico: herói -> interação -> macro de recurso -> contexto de uso -> resultado -> logotipo
• Serviço/empresa: contexto -> processo -> evidência -> resultado -> promessa -> logotipo
• Marca liderada por imagens: imagens autênticas -> motivo visual -> benefício -> recompensa emocional -> logotipo

Leia references/story-patterns.md para padrões de duração.

5. Planeje quadros exatos

Use 30fps a menos que o projeto exija o contrário. Converta cada limite em um quadro inteiro.

Para 15 segundos, mire em 5 a 8 batidas principais; para 30 segundos, mire em 8 a 12. Dê a cada batida:

• Quadro inicial/final
• Proprietário visual e IDs de ativos autênticos
• Ação primária
• Antecipação, compromisso, impacto, freio e acomodação
• Texto e pausa legível
• Estado de cor
• Transição de entrada/saída

Use sobreposições de 6 a 12 quadros quando a continuidade se beneficiar. Uma cena possui a velocidade; a próxima possui o destino.

6. Construa intensidade com controle

• Use movimento do produto, caminhos do cursor, luz, conteúdo de rolagem, bordas de objetos ou geometria correspondente para conduzir transições.
• Use 2 a 5 estados de cor deliberados com forte contraste.
• Mantenha uma ação primária por batida; atrase camadas secundárias em 2 a 6 quadros.
• Estabeleça 2 a 3 picos de alta energia e momentos de frenagem mais silenciosos.
• Preserve silhuetas legíveis, texto e espaço livre do logotipo.
• Evite HUDs falsos, cartões de vidro arbitrários, paredes de texto decorativas, métricas não verificadas e easing idêntico em todos os lugares.

Leia references/motion-quality.md antes da implementação.

7. Demonstre causa e efeito

Inclua pelo menos uma cadeia legível:

intenção do usuário -> ação do produto -> resposta do sistema -> saída útil

Para produtos de IA:

prompt -> planejamento -> capacidades paralelas -> resultado gerado -> prova

Use capturas de UI reais, gravações, código-fonte ou capturas de tela fornecidas oficialmente. Se a UI real não estiver disponível, use movimento abstrato claramente conceitual; nunca fabrique uma interface de marca e a apresente como real.

8. Implemente e renderize

Para Remotion:

• Defina state = f(frame, fps, inputs, constants).
• Mantenha os limites das cenas em um módulo de timeline/constants.
• Semee a variação processual com IDs estáveis.
• Preserve valores fracionários ao derivar a velocidade.
• Mantenha as dimensões da imagem e a proporção de tela explícitas.
• Preserve composições/saídas anteriores durante a iteração.

Prefira o CLI local do projeto. Os comandos típicos de descoberta e renderização são:

pnpm exec remotion compositions <entry-file>
pnpm exec remotion render <entry-file> <composition-id> out/launch-film.mp4

Visualização padrão:

• 1920x1080
• 30fps
• H.264 MP4
• Duração exata solicitada
• V1 com foco visual; adicione som apenas quando solicitado ou disponível

9. Verifique

• Execute a validação do manifesto de ativos e da timeline.
• Execute a descoberta/build de composições e verificações de tipo/lint direcionadas.
• Verifique duração, taxa de quadros, dimensões e integridade do arquivo da mídia.
• Inspecione quadros representativos e a renderização completa.
• Peça feedback com timecode sobre ritmo, clareza, impacto, autenticidade e suavidade.

10. Entregue a proveniência

Forneça:

• Vídeo renderizado
• Caminho da composição/fonte
• Especificações exatas e duração
• Manifesto de ativos
• Links de fonte da marca/produto
• Nota de direitos/aviso legal
• Identificador de versão

Indique quando o filme é um conceito não oficial e quando a publicação comercial requer permissão.

Recuperação de falhas

• Logotipo errado: remova-o, localize o arquivo oficial atual, registre a proveniência e renderize novamente.
• Produto/UI com aparência falsa: substitua por mídia oficial, fornecida pelo usuário ou licenciada; não melhore a imitação.
• Rápido, mas caótico: reduza ações simultâneas, atribua um proprietário visual e preserve o movimento correspondente entre os cortes.
• Bonito, mas genérico: adicione uma interação completa do produto, afirmações verificadas e saídas reais.
• Suave, mas lento: encurte pausas, sobreponha transições e freie apenas em torno de mensagens-chave.
• Ativo indisponível: peça um original autorizado; nunca adivinhe.