Animationsgenerator
Erstellen Sie animierte Videos und Bewegungsgrafiken aus einer natürlichen Sprachbeschreibung. Gibt ein eigenständiges Vite + React + Framer Motion Projekt aus, das im Browser abgespielt wird.
Arbeitsablauf
Schritt 1: Anfrage parsen
Brechen Sie die Beschreibung des Benutzers in einen Szenenplan auf:
- 3-7 Szenen, jede 3-5 Sekunden lang
- Identifizieren Sie den Handlungsbogen: Held/Intro, Problem, Lösung, Funktionen, CTA/Outro
- Wählen Sie eine Farbpalette und Typografie, die zur Marke/Stimmung passt
- Verwenden Sie
$ARGUMENTSfür die Animationsbeschreibung des Benutzers
Schritt 2: Animations-Stack auswählen
Basierend auf der Anfrage automatisch den besten Ansatz erkennen:
| Anfragetyp | Stack | Wann verwenden |
|---|---|---|
| Produktintro, Präsentation, Marketing | Framer Motion (Standard) | Szenenbasiert mit Text, Symbolen, Übergängen |
| Generative Kunst, Partikel, Muster | p5.js | Kreative/algorithmische Visualisierungen |
| 3D-Objekte, Umgebungen, Produkt-Renderings | Three.js + react-three-fiber | 3D-Szenen erforderlich |
| Einfache Text/Logo-Animation | Nur CSS-Animationen | Minimal, keine schweren Abhängigkeiten |
Standardmäßig Framer Motion verwenden, es sei denn, die Anfrage erfordert eindeutig etwas anderes.
Schritt 3: Projektgerüst erstellen
- Erstellen Sie ein Verzeichnis:
~/animations/[project-name]/ - Führen Sie das Gerüst-Skript aus:
bash ~/.claude/skills/animate/scripts/scaffold.sh [project-name] [stack] - Kopieren Sie Vorlagendateien aus
~/.claude/skills/animate/assets/template-files/in das Projekt
Schritt 4: Szenenkomponenten generieren
Lesen Sie die Referenzen für Animationsvoreinstellungen und Szenenmuster:
references/animation-presets.md— alle verfügbaren Übergänge, Federn, Beschleunigungenreferences/scene-patterns.md— Beispiel-Code-Muster für Szenen
Erstellen Sie für jede Szene eine React-Komponente in client/src/components/video/video_scenes/:
- Verwenden Sie
motion.divmit Szenenübergangsvoreinstellungen (fadeBlur, scaleFade, slideLeft, splitHorizontal, morphExpand usw.) - Verwenden Sie
containerVariantsunditemVariantsfür gestaffelte Inhaltsanzeigen - Verwenden Sie
vw-Einheiten für responsives Sizing (funktioniert bei jeder Auflösung) - Verwenden Sie CSS-Variablen für Theming (
var(--color-accent),var(--color-bg-dark)usw.) - Verwenden Sie Lucide-Symbole für visuelle Elemente
- Verwenden Sie die Klasse
.glass-panelfür Milchglaskarten - Verwenden Sie die Klassen
.text-gradientund.text-gradient-accentfür Farbverlaufstext
Schritt 5: VideoTemplate generieren
Erstellen Sie client/src/components/video/VideoTemplate.tsx:
- Importieren Sie alle Szenenkomponenten
- Definieren Sie das
SCENE_DURATIONS-Objekt (Szenenname -> Millisekunden) - Verwenden Sie den Hook
useVideoPlayer, um den Szenenfortschritt zu verwalten - Wickeln Sie Szenen in
AnimatePresence mode="wait"für fließende Übergänge - Jede Szene wird basierend auf dem
currentScene-Index bedingt gerendert
Schritt 6: Thema anpassen
Aktualisieren Sie client/src/index.css mit den richtigen Farben:
- Wenn der Benutzer Markenfarben angegeben hat, aktualisieren Sie die CSS-Variablen
- Wählen Sie Schriftarten, die zur Stimmung passen (Space Grotesk für Technik, Playfair Display für elegant usw.)
- Aktualisieren Sie Farbverlaufs- und Glow-Stile passend zur Palette
Schritt 7: Gemini 3.1 Pro Optimierung (Optional)
Wenn die Umgebungsvariable GEMINI_API_KEY verfügbar ist:
- Lesen Sie
references/gemini-integration.mdfür API-Details - Senden Sie die Beschreibung des Benutzers an Gemini 3.1 Pro mit der Bitte um:
- Szenenaufteilung mit Beschreibungen und empfohlenen Übergängen
- Farbpalette als CSS-Variablen
- Text/Überschriften für jede Szene
- SVG-Grafiken, falls zutreffend
- Verwenden Sie die Gemini-Ausgabe zur Information der Szenenerstellung
- Wenn kein API-Key vorhanden ist, überspringen Sie diesen Schritt — Claude übernimmt alle kreativen Entscheidungen direkt
Schritt 8: Build und Vorschau
cd ~/animations/[project-name]
npm install
npm run dev
Teilen Sie dem Benutzer mit, dass die Animation unter http://localhost:5173 läuft, und öffnen Sie sie im Browser.
Szenenübergangs-Referenz (Kurz)
Wählen Sie Übergänge passend zum Handlungsbeat:
- fadeBlur — Sanftes Intro/Outro, verträumte Enthüllungen
- scaleFade — Selbstbewusste Enthüllungen, Produktpräsentationen
- slideLeft/slideRight — Sequentieller Fortschritt, Zeitlinienfluss
- splitHorizontal/splitVertical — Dramatische Enthüllungen, Vorher/Nachher
- morphExpand — Großes Finale, CTA-Bildschirme
- clipCircle — Fokus lenken, Spotlight-Effekt
- perspectiveFlip — Kartenumdrehungen, Perspektivenwechsel
- wipe — Saubere Übergänge, gerichteter Fluss
- zoomThrough — Immersiv, vorwärts gerichteter Schwung
- crossDissolve — Sanfte, emotionale Übergänge
Element-Animationen-Referenz (Kurz)
- popIn — Federnder Skaleneingang für Symbole/Abzeichen
- fadeUp/fadeDown — Subtile Inhaltsanzeigen
- slideInLeft/slideInRight — Gerichtete Inhalte
- blurIn — Sanfte Fokus-Anzeigen
- elasticScale — Verspielte, energiegeladene Eingänge
- perspectiveRotateIn — 3D-Karten-Anzeigen
- pulse — Wiederholter Aufmerksamkeitsfänger
- float — Sanfter Schwebeeffekt
Wichtige Regeln
- Verwenden Sie immer
vw-Einheiten für die Größenangabe, damit Animationen bei jeder Auflösung gut aussehen - Halten Sie Szenen zwischen 3-5 Sekunden — gesamtes Video 15-30 Sekunden
- Verwenden Sie
AnimatePresence mode="wait", sodass eine Szene beendet ist, bevor die nächste beginnt - Jede Szene muss eine Hintergrundbehandlung haben (Farbverlauf, Bild oder animierte Form)
- Verwenden Sie gestaffelte Animationen für Listen und Raster (staggerChildren: 0.1-0.2)
- Fügen Sie einen Ladezustand hinzu, wenn Assets schwer sind
- Das Projekt muss vollständig eigenständig sein — keine externen Abhängigkeiten außer npm-Paketen
- Verwenden Sie keine Emojis im generierten Code oder Inhalt