generate-logo

Gerar animações de logotipo

Este skill transforma uma imagem de logotipo em animações de abertura com 5 segundos de duração. Cada estilo é uma cena de tela que o Chrome headless renderiza quadro a quadro. O ffmpeg codifica os quadros e o som é sintetizado a partir de eventos que a cena relata (aterrissagens, estouros, cintilações). Não há serviços de IA de imagem, banco de imagens ou amostras. Os últimos quadros de cada estilo são os próprios pixels do arquivo de logotipo, portanto a animação nunca "redesenha" a marca.

Requisitos: Node 22+, ffmpeg (libx264, libvpx-vp9, prores_ks) e Chrome ou Chromium. Se o Chrome não estiver em um local padrão, defina CHROME_PATH.

Fluxo de trabalho

1. Encontrar e examinar o logotipo

Localize o arquivo que o usuário quer: verifique o diretório de trabalho, ~/Downloads e ~/Desktop, ou pergunte. Leia a imagem antes de renderizar. Observe se ela tem fundo transparente ou liso, quantas formas separadas possui, se já inclui um wordmark e suas cores. Isso decide quais estilos se destacarão. Mantenha isso em mente ao verificar a prévia.

2. Definir o briefing, usando padrões em vez de perguntas

Os padrões são todos os cinco estilos, 1920×1080 a 60 fps, fundo automático, e MP4 mais WebM transparente. Pergunte apenas quando a resposta alterar a saída e você não puder inferi-la. Por exemplo, se o usuário quiser um nome adicionado, mas você não souber a grafia exata ou onde vai a divisão de cores.

O usuário quer	Opção
estilos específicos	--styles liquid,neon
Instagram / quadrado, TikTok / Reels / vertical	--size square, --size vertical (ou --size 1280x720)
um nome de marca ao lado do símbolo	`--text "Pharm
página escura ou clara	--bg dark, --bg light, --bg "#0b1e2d" (neon é sempre escuro)
arquivos para Premiere / Final Cut	--prores (adiciona um grande .mov ProRes 4444 com alfa)

3. Prévia primeiro (segundos, não minutos)

<skill>/scripts/animate.sh "<logo>" --preview --out "<out-dir>" [opções]

Isso gera <nome>-5s-<estilo>-preview.png (10 quadros por estilo), além de <nome>-5s-overview.png quando há dois ou mais estilos, e um -info.json por estilo. Leia a visão geral e verifique:

• Recorte: borda limpa, sem cor de fundo ou manchas dentro do logotipo. keyedBackground no info.json é definido quando o fundo foi removido (sem transparência no arquivo).
• Agrupamento: parts é o número de formas separadas e textParts o número de letras encontradas. As letras devem ser detectadas como texto para que o flicker neon, as contas líquidas e as gotas de quicar as tratem como uma palavra.
• Enquadramento: nada está cortado e o tamanho parece correto.

Se algo estiver errado, veja "Corrigindo problemas de análise" abaixo. Mostre a visão geral ao usuário se ele quiser opinar antes da renderização completa.

4. Renderizar

<skill>/scripts/animate.sh "<logo>" --styles <lista> --out "<out-dir>" [opções]

Cada estilo leva cerca de 60 a 70 segundos (as passagens opaca e transparente mais a codificação). Para quatro ou mais estilos, execute em segundo plano. As saídas por estilo vão para a pasta de saída: <nome>-5s-<estilo>.mp4 (com som), -alpha.webm, -alpha.mov (com --prores), -sfx.wav, -keyframes.png e -info.json.

5. Verificar antes de entregar

• Leia cada -keyframes.png. O último quadro deve ser o logotipo limpo e completo.
• Use ffprobe para confirmar duração de 5.000 s e o tamanho. Os picos de som são normalizados para −3 dB.
• Envie os MP4s e a visão geral ao usuário (use SendUserFile quando disponível) e liste cada arquivo como um link. Mencione as versões transparentes e o que cada estilo faz em uma linha cada.

6. Iterar

A temporização vive no objeto T de cada estilo em scripts/styles/<estilo>.mjs. Toda outra temporização depende dele, e o som segue automaticamente; portanto, altere-o ali. Para um visual que os cinco estilos não podem oferecer, ou um logotipo cujas formas devem fazer algo específico, escreva um novo estilo. Veja references/custom-style.md.

Os estilos

Detalhes completos estão em references/styles.md; leia-o ao escolher para um usuário ou explicar o que cada um faz.

• liquid: uma gota da cor principal do logotipo cai na página e se espalha na maior forma. As outras formas e letras se espremem como contas. Melhor para logotipos arredondados e orgânicos.
• neon: em uma página escura, tubos brilhantes traçam cada forma, o logotipo acende com um flash e as letras acendem como um letreiro. Formas muito escuras se tornam brancas.
• bounce: formas grandes caem ou rolam e quicam como plástico, seguidas por um estouro de confete, depois as letras caem. Divertido.
• lens: uma lupa desliza sobre uma página vazia, e o logotipo aparece apenas através de seu vidro. Em seguida, ela se afasta da forma principal. Adequado para marcas de busca, saúde ou insights.
• rise: uma linha fina da cor da marca se abre em uma faixa e as formas sobem para dentro dela. Calmo e corporativo, funciona em qualquer coisa.

Corrigindo problemas de análise

• Halo ou fundo deixado ao redor de um logotipo JPG: o fundo é removido pela cor da borda. Se o logotipo tocar a borda da imagem ou estiver sobre um gradiente ou foto, recorte-o primeiro (exporte um PNG transparente) e execute novamente.
• Detalhes brancos desaparecem (uma forma branca sobre fundo branco): essa é a remoção correta. Use um PNG transparente se essas partes brancas precisarem aparecer.
• Letras não detectadas como texto: elas precisam de 3 ou mais letras separadas de altura semelhante em uma linha ao lado ou abaixo da forma principal. Script cursivo ou um wordmark de forma única é tratado como uma parte, o que ainda anima bem em rise e lens.
• Wordmark na fonte errada: --font deve estar instalada na máquina. Verifique fc-list ou procure em /System/Library/Fonts no macOS.

Criando um estilo personalizado

Quando o usuário quiser algo específico, como "as pílulas devem se encaixar" ou "a lupa deve escanear", leia references/custom-style.md. Ele cobre a API de estilo, os auxiliares do mecanismo, a lista de eventos sonoros e as técnicas que tornaram animações de logotipo personalizadas anteriores bem-sucedidas. Isso inclui reconstruir a marca como formas vetoriais, verificar essa reconstrução contra o PNG e passar para os pixels reais no final.