générer-logo-animé

Générer des animations de logo

Ce skill transforme une image de logo en animations de 5 secondes. Chaque style est une scène canvas que Chrome headless rend image par image. ffmpeg encode les images, et le son est synthétisé à partir des événements que la scène rapporte (atterrissages, pops, scintillements). Il n'y a aucun service d'IA d'image, de stock footage ou d'échantillon. Les dernières images de chaque style sont les pixels du fichier logo lui-même, donc l'animation ne "redessine" jamais la marque.

Configuration requise : Node 22+, ffmpeg (libx264, libvpx-vp9, prores_ks) et Chrome ou Chromium. Si Chrome n'est pas dans un emplacement standard, définissez CHROME_PATH.

Workflow

1. Trouver et examiner le logo

Localisez le fichier que l'utilisateur souhaite : vérifiez le répertoire de travail, ~/Downloads et ~/Desktop, ou demandez. Lisez l'image avant le rendu. Notez si elle a un fond transparent ou plat, combien de formes distinctes elle comporte, si elle inclut déjà un mot-clé, et ses couleurs. Cela détermine quels styles seront les plus adaptés. Gardez cela à l'esprit lorsque vous vérifiez l'aperçu.

2. Établir le brief, en utilisant les valeurs par défaut plutôt que des questions

Les valeurs par défaut sont les cinq styles, 1920×1080 à 60 ips, fond automatique, et MP4 plus WebM transparent. Ne posez de questions que lorsque la réponse change le résultat et que vous ne pouvez pas la déduire. Par exemple, si l'utilisateur souhaite ajouter un nom mais que vous ne connaissez pas l'orthographe exacte ou le point de séparation des couleurs.

Ce que l'utilisateur veut	Option
styles spécifiques	--styles liquid,neon
Instagram / carré, TikTok / Reels / vertical	--size square, --size vertical (ou --size 1280x720)
un nom de marque à côté du logo	--text "Pharm|Kulen" (le | le divise en deux couleurs extraites du logo), --font "Arial Rounded MT Bold", --text-colors "#0a3fa8,#ff9a00"
page sombre ou claire	--bg dark, --bg light, --bg "#0b1e2d" (neon est toujours sombre)
fichiers pour Premiere / Final Cut	--prores (ajoute un fichier ProRes 4444 .mov avec alpha)

3. Aperçu d'abord (secondes, pas minutes)

<skill>/scripts/animate.sh "<logo>" --preview --out "<out-dir>" [options]

Cela écrit <nom>-5s-<style>-preview.png (10 images par style), plus <nom>-5s-overview.png pour deux styles ou plus, et un -info.json par style. Lisez l'aperçu et vérifiez :

• Découpe : un bord propre, et aucune couleur de fond ou de taches à l'intérieur du logo. keyedBackground dans info.json est défini lorsque le fond a été supprimé (pas de transparence dans le fichier).
• Regroupement : parts est le nombre de formes distinctes et textParts le nombre de lettres trouvées. Les lettres doivent être détectées en tant que texte pour que le scintillement néon, les perles liquides et les chutes rebondissantes les traitent comme un mot.
• Cadrage : rien n'est recadré et la taille semble correcte.

Si quelque chose cloche, consultez "Résoudre les problèmes d'analyse" ci-dessous. Montrez l'aperçu à l'utilisateur s'il souhaite donner son avis avant le rendu complet.

4. Rendu

<skill>/scripts/animate.sh "<logo>" --styles <liste> --out "<out-dir>" [options]

Chaque style prend environ 60–70 s (les passes opaques et transparentes plus l'encodage). Pour quatre styles ou plus, exécutez-le en arrière-plan. Les sorties par style vont dans le dossier de sortie : <nom>-5s-<style>.mp4 (avec son), -alpha.webm, -alpha.mov (avec --prores), -sfx.wav, -keyframes.png et -info.json.

5. Vérifiez avant de transmettre

• Lisez chaque -keyframes.png. La dernière image doit être le logo complet et net.
• Utilisez ffprobe pour confirmer la durée de 5.000 s et la taille. Les pics sonores sont normalisés à −3 dB.
• Envoyez les MP4 et l'aperçu à l'utilisateur (SendUserFile si disponible) et listez chaque fichier sous forme de lien. Mentionnez les versions transparentes et ce que fait chaque style en une ligne chacun.

6. Itérer

Le timing se trouve dans l'objet T de chaque style dans scripts/styles/<style>.mjs. Tout autre timing en dépend, et le son suit automatiquement, donc modifiez-le là. Pour un rendu que les cinq styles ne peuvent pas donner, ou un logo dont les formes doivent faire quelque chose de spécifique, écrivez un nouveau style. Voir references/custom-style.md.

Les styles

Les détails complets se trouvent dans references/styles.md ; lisez-le pour choisir pour un utilisateur ou pour expliquer ce que fait chaque style.

• liquid : une goutte de la couleur principale du logo tombe sur la page et s'étale en la plus grande forme. Les autres formes et lettres s'extraient sous forme de perles. Idéal pour les logos arrondis et organiques.
• neon : sur une page sombre, des tubes lumineux tracent chaque forme, le logo s'allume avec un flash, et les lettres s'allument comme une enseigne. Les formes très sombres deviennent blanches.
• bounce : les grandes formes tombent ou roulent et rebondissent comme du plastique, suivies d'un pop de confettis, puis les lettres tombent. Ludique.
• lens : une loupe glisse sur une page vide, et le logo n'apparaît qu'à travers son verre. Elle fait ensuite un zoom arrière depuis la forme principale. Convient aux marques de recherche, santé ou insight.
• rise : un filet de la couleur de la marque s'ouvre en une bande et les formes s'élèvent dedans. Calme et corporate, et fonctionne sur tout.

Résoudre les problèmes d'analyse

• Halo ou fond restant autour d'un logo JPG : le fond est supprimé par la couleur de sa bordure. Si le logo touche le bord de l'image, ou se trouve sur un dégradé ou une photo, découpez-le d'abord (exportez un PNG transparent) et relancez.
• Des détails blancs disparaissent (une forme blanche sur fond blanc) : c'est une suppression correcte. Utilisez un PNG transparent si ces parties blanches doivent être visibles.
• Lettres non détectées comme texte : elles doivent comporter 3 lettres ou plus, de hauteur similaire, sur une rangée à côté ou en dessous de la forme principale. Une police attachée ou un mot-clé à une seule forme est traité comme une seule partie, ce qui s'anime toujours bien dans rise et lens.
• Mot-clé dans la mauvaise police : --font doit être installé sur la machine. Vérifiez fc-list, ou regardez dans /System/Library/Fonts sur macOS.

Créer un style sur mesure

Lorsque l'utilisateur souhaite quelque chose de spécifique, comme "les pilules doivent tomber en place" ou "la loupe doit scanner", lisez references/custom-style.md. Il couvre l'API de style, les helpers du moteur, la liste des événements sonores, et les techniques qui ont bien fonctionné pour des animations de logo sur mesure antérieures. Cela inclut la reconstruction du logo sous forme de formes vectorielles, la vérification de cette reconstruction par rapport au PNG, et la remise aux pixels réels à la fin.