Habilidade de Vídeo de Lançamento de Produto
Esta habilidade guia você na criação de vídeos premium de alto padrão para lançamento de produtos usando Hyperframes. Ela enfatiza um fluxo de trabalho estruturado, desde a descoberta da marca até a verificação final.
Aproveitando Habilidades Oficiais do Hyperframes
Esta habilidade atua como Diretor e Arquiteto do seu projeto de vídeo. Para garantir precisão técnica e acesso aos padrões mais recentes da estrutura, você deve usá-la em conjunto com as habilidades oficiais do Hyperframes.
Antes de escrever qualquer código, você deve:
- Invocar a habilidade oficial /hyperframes para revisar regras de composição, semântica de atributos de dados e restrições da estrutura.
- Invocar a habilidade oficial /gsap para referências detalhadas de linha do tempo, funções de easing e padrões complexos de animação.
Ao combinar a orientação estratégica desta habilidade com a documentação técnica das habilidades oficiais, você produzirá composições de vídeo de nível profissional.
Geração de Projeto sem Estado (CRÍTICO)
Este diretório (hyperframes-product-launch-video) é uma pasta de modelo e habilidade somente leitura. Você nunca deve escrever arquivos específicos de projeto aqui.
Sempre que criar um novo projeto de vídeo:
- Diretório de Destino: Todos os arquivos do projeto devem ser criados na pasta de destino do vídeo do usuário (por exemplo,
meu-novo-video/oumeu-novo-video/assets/). - DNA do Projeto: Gere o
brand_dna.jsondentro do diretórioassets/ou raiz do projeto de destino. - Direção de Arte: Salve o
ART_DIRECTION.mdfinal dentro da pasta do projeto de destino. - Sem Efeitos Colaterais: Não modifique nenhum arquivo dentro desta pasta de habilidade durante uma execução de projeto.
Fluxo de Trabalho
1. A Fase de Interrogatório (DNA da Marca)
Antes de começar, você deve entender a marca.
- Análise do Site: Use Playwright para visitar o site do usuário. Extraia cores da marca, tipografia (fontes) e propostas de valor centrais.
- Solicitação de Ativos: Peça ao usuário logotipos e ícones. Especifique a necessidade de PNGs ou SVGs limpos, transparentes e com cortes precisos.
- Seleção de Tipo de Vídeo: Pergunte se este é um vídeo 100% de gráficos em movimento ou um híbrido (por exemplo, cabeça falante do fundador + gráficos em movimento Hyperframes).
2. A Fase de Planejamento (Direção de Arte)
NUNCA escreva HTML antes de planejar.
- Gerar Direção de Arte: Crie um documento
ART_DIRECTION.mdbaseado no Modelo de Direção de Arte. - Detalhamento de Cenas: Defina cada segundo do vídeo, especificando ação visual, movimentos de câmera, funções de easing e efeitos sonoros.
3. Implementação (Design de Movimento Premium)
Aplique princípios de design de movimento de elite. Consulte Padrões de Design de Movimento para trechos de código.
- Câmera Estilo Apple: Use zoom macro massivo e zoom instantâneo (
back.out). - Revelação por Apagamento: Opacidade de texto escalonada "consumida" por um logotipo deslizante.
- Impacto/Destruição: Efeitos de impacto físico usando dispersão GSAP.
- Glassmorfismo: Elementos de IU premium com
backdrop-filter: blur(40px). - Física de Máquina de Escrever: Spans saltitantes que empurram o cursor.
4. Design de Som (SFX)
- Lista de Compras: Forneça ao usuário uma "Lista de Compras de Design de Som" baseada no storyboard.
- Sincronização: Use tags
<audio data-start="...">para corresponder perfeitamente aos acionamentos do GSAP.
5. Verificação e Solução de Problemas
- Armadilhas: Revise as Armadilhas Críticas para evitar bugs comuns do Hyperframes (incompatibilidades de duração, destino ausente, etc.).
- FFmpeg: Se a renderização falhar, oriente o usuário a instalar o FFmpeg localmente.
Melhores Práticas
- Cenas Atômicas: Mantenha as cenas modulares e estritamente gerenciadas por
data-startedata-duration. - Gerenciamento de Visibilidade: Use
autoAlphapara transições de cena, garantindo busca limpa. - Layout vs. Transformação: Use dimensões físicas para lacunas flexbox e transformações para estilo visual.