Was macht Logo-Animationen erstellen?
Dieses Skill verwandelt ein Logo-Bild in 5-Sekunden-Animationen. Jeder Stil ist eine Canvas-Szene, die headless Chrome Frame für Frame rendert. FFmpeg kodiert die Frames, und der Sound wird aus Ereignissen synthetisiert, die die Szene meldet (Landungen, Pops, Flackern). Es werden keine KI-Bilddienste, Stockmaterial oder Samples verwendet. Die letzten Frames jedes Stils sind die Original-Pixel des Logos, sodass die Animation die Marke nie „neu zeichnet“.
Voraussetzungen: Node 22+, ffmpeg (libx264, libvpx-vp9, prores_ks) und Chrome oder Chromium. Falls Chrome nicht an einem Standardort liegt, setze CHROME_PATH.
Workflow
1. Logo finden und betrachten
Lokalisieren Sie die Datei, die der Benutzer meint: Prüfen Sie das Arbeitsverzeichnis, ~/Downloads und ~/Desktop, oder fragen Sie nach. Lesen Sie das Bild vor dem Rendern. Notieren Sie, ob es einen transparenten oder einfarbigen Hintergrund hat, wie viele separate Formen es enthält, ob es bereits eine Wortmarke enthält und welche Farben es hat. Dies entscheidet, welche Stile glänzen. Behalten Sie es im Hinterkopf, wenn Sie die Vorschau prüfen.
2. Briefing festlegen – Standardwerte statt Fragen verwenden
Standardmäßig werden alle fünf Stile, 1920×1080 bei 60 fps, automatischer Hintergrund und MP4 plus transparentes WebM ausgegeben. Fragen Sie nur nach, wenn die Antwort das Ergebnis ändert und Sie diese nicht ableiten können. Fragen Sie zum Beispiel, ob der Benutzer einen Namen hinzufügen möchte, aber Sie die genaue Schreibweise oder die Farbtrennung nicht kennen.
| Benutzer wünscht | Option |
|---|---|
| bestimmte Stile | --styles liquid,neon |
| Instagram / quadratisch, TikTok / Reels / vertikal | --size square, --size vertical (oder --size 1280x720) |
| einen Markennamen neben dem Logo | --text "Pharm|Kulen" (das | teilt es in zwei Farben, die aus dem Logo stammen), --font "Arial Rounded MT Bold", --text-colors "#0a3fa8,#ff9a00" |
| dunkle oder helle Seite | --bg dark, --bg light, --bg "#0b1e2d" (neon ist immer dunkel) |
| Dateien für Premiere / Final Cut | --prores (fügt ein großes ProRes 4444 .mov mit Alpha hinzu) |
3. Zuerst Vorschau (Sekunden, nicht Minuten)
<skill>/scripts/animate.sh "<logo>" --preview --out "<ausgabe-verzeichnis>" [optionen]
Dies erzeugt <name>-5s-<stil>-preview.png (10 Standbilder pro Stil), plus <name>-5s-overview.png bei zwei oder mehr Stilen sowie eine -info.json pro Stil. Lesen Sie die Übersicht und prüfen Sie:
- Ausschnitt: saubere Kante, keine Hintergrundfarbe oder Flecken im Logo.
keyedBackgroundin info.json ist gesetzt, wenn der Hintergrund herausgerechnet wurde (keine Transparenz in der Datei). - Gruppierung:
partsist die Anzahl separater Formen undtextPartsdie Anzahl gefundener Buchstaben. Buchstaben müssen als Text erkannt werden, damit Neon-Flackern, Liquid-Perlen und Bounce-Drops sie als Wort behandeln. - Rahmung: nichts wird abgeschnitten und die Größe passt.
Wenn etwas nicht stimmt, siehe „Analyseprobleme beheben" unten. Zeigen Sie die Übersicht dem Benutzer, wenn dieser vor dem vollständigen Rendern ein Mitspracherecht wünscht.
4. Rendern
<skill>/scripts/animate.sh "<logo>" --styles <liste> --out "<ausgabe-verzeichnis>" [optionen]
Jeder Stil benötigt etwa 60–70 s (die undurchsichtigen und transparenten Durchgänge plus Kodierung). Führen Sie bei vier oder mehr Stilen den Befehl im Hintergrund aus. Die Ausgaben pro Stil landen im Ausgabeordner:
<name>-5s-<stil>.mp4 (mit Sound), -alpha.webm, -alpha.mov (mit --prores), -sfx.wav, -keyframes.png und -info.json.
5. Prüfen vor der Übergabe
- Lesen Sie jedes
-keyframes.png. Das letzte Standbild muss das saubere, vollständige Logo sein. - Verwenden Sie
ffprobe, um die Dauer von 5.000 s und die Größe zu bestätigen. Soundpeaks werden auf −3 dB normalisiert. - Senden Sie die MP4s und die Übersicht an den Benutzer (SendUserFile, falls verfügbar) und listen Sie jede Datei als Link auf. Erwähnen Sie die transparenten Versionen und beschreiben Sie jeden Stil in einer Zeile.
6. Iterieren
Das Timing lebt im T-Objekt jedes Stils in scripts/styles/<stil>.mjs. Jedes andere Timing hängt davon ab, und der Sound folgt automatisch – ändern Sie es dort. Für einen Look, den die fünf Stile nicht bieten können, oder ein Logo, dessen Formen etwas Bestimmtes tun sollen, schreiben Sie einen neuen Stil. Siehe references/custom-style.md.
Die Stile
Ausführliche Details finden Sie in references/styles.md; lesen Sie diese bei der Auswahl für einen Benutzer oder wenn Sie erklären, was jeder Stil tut.
- liquid: Ein Tropfen der Hauptfarbe des Logos fällt auf die Seite und breitet sich zur größten Form aus. Die anderen Formen und Buchstaben quellen als Perlen heraus. Am besten für runde, organische Logos.
- neon: Auf einer dunklen Seite zeichnen leuchtende Röhren jede Form nach, das Logo leuchtet mit einem Blitz auf, und Buchstaben flackern wie ein Schild ein. Sehr dunkle Formen werden weiß.
- bounce: Große Formen fallen oder rollen herein und hüpfen wie Plastik, gefolgt von einem Konfetti-Pop, dann fallen die Buchstaben ein. Verspielt.
- lens: Eine Lupe gleitet über eine leere Seite, und das Logo erscheint nur durch ihr Glas. Dann zoomt es aus der Hauptform heraus. Passend für Such-, Gesundheits- oder Insights-Marken.
- rise: Ein haarförmiger Strich in Markenfarbe öffnet sich zu einem Band, und die Formen steigen hinein. Ruhig und geschäftlich, funktioniert bei allem.
Analyseprobleme beheben
- Heiligenschein oder Hintergrund um ein JPG-Logo: Der Hintergrund wird anhand seiner Randfarbe herausgerechnet. Wenn das Logo den Bildrand berührt oder auf einem Farbverlauf oder Foto sitzt, schneiden Sie es zuerst aus (exportieren Sie ein transparentes PNG) und führen Sie es erneut aus.
- Weiße Details verschwinden (eine weiße Form auf weißem Hintergrund): Das ist korrektes Keying. Verwenden Sie ein transparentes PNG, wenn diese weißen Teile sichtbar sein müssen.
- Buchstaben nicht als Text erkannt: Sie benötigen 3+ separate Buchstaben ähnlicher Höhe in einer Reihe neben oder unter der Hauptform. Verbundene Schrift oder eine einzelne Wortmarke wird als ein Teil behandelt, was in rise und lens trotzdem gut animiert.
- Wortmarke in falscher Schriftart:
--fontmuss auf dem Rechner installiert sein. Prüfen Sie mitfc-listoder suchen Sie in/System/Library/Fontsauf macOS.
Individuellen Stil erstellen
Wenn der Benutzer etwas Bestimmtes möchte, wie „die Pillen sollen einrasten" oder „die Lupe soll scannen", lesen Sie references/custom-style.md. Es behandelt die Style-API, die Engine-Hilfsfunktionen, die Sound-Ereignisliste und die Techniken, die frühere individuelle Logo-Animationen erfolgreich gemacht haben. Dazu gehört der Wiederaufbau der Marke als Vektorformen, die Überprüfung dieses Wiederaufbaus gegen das PNG und die Übergabe an die echten Pixel am Ende.