High-End Motion Design ohne After Effects: Wie wir unser Werbevideo komplett mit KI gebaut haben

Ein technischer Erfahrungsbericht über Claude Code, HyperFrames und einen Workflow, der Videoproduktion grundlegend verändert.

Wir hatten ein klassisches Agentur-Problem: Wir wollten ein hochwertiges Motion-Design-Video für unsere CRM-Automation-Leistungen — 20 Sekunden, Markenfarben, smoothe Animationen, Meta-Ads-tauglich. Was wir nicht hatten: After-Effects-Kenntnisse, ein Motion-Design-Team oder das Budget-Polster für mehrere Korrekturschleifen mit einer Produktionsfirma.

Was wir stattdessen genutzt haben: Claude als Konzept- und Prompt-Engine, Claude Code als ausführenden Agenten und HyperFrames als Rendering-Framework. Das Ergebnis: ein 21-Sekunden-Video in 60 fps, gebaut in wenigen Iterationen, komplett aus Code. In diesem Artikel zeigen wir den technischen Unterbau — inklusive Setup, Syntax und echten Prompt-Auszügen aus dem Projekt.

Was ist HyperFrames?

HyperFrames (von HeyGen, Open Source) ist ein Framework nach dem Prinzip „Write HTML. Render video.“ Statt in einer Timeline-Software zu klicken, beschreibt man ein Video als HTML-Komposition: Jedes Element ist ein „Clip“ mit Zeitattributen, Animationen laufen über GSAP-Timelines, und eine CLI rendert das Ganze deterministisch — Frame für Frame über eine headless Chrome-Instanz — in eine MP4.

Der entscheidende Punkt für uns: HyperFrames ist agent-native gebaut. Es gibt offizielle Skills, die einem KI-Coding-Agenten wie Claude Code beibringen, wie korrekte Kompositionen aussehen. Das heißt: Man beschreibt das Video in natürlicher Sprache, der Agent schreibt den Code.

Das Setup (unter 5 Minuten)

Voraussetzungen sind Node.js 22+ und FFmpeg:

# macOS
brew install ffmpeg
 
# Windows
winget install ffmpeg
# macOS
brew install ffmpeg
 
# Windows
winget install ffmpeg
# macOS
brew install ffmpeg
 
# Windows
winget install ffmpeg

Dann die HyperFrames-Skills installieren und ein Projekt aufsetzen:

npx skills add heygen-com/hyperframes
npx hyperframes init heureka-video --non-interactive --example blank
cd heureka-video
claude
npx skills add heygen-com/hyperframes
npx hyperframes init heureka-video --non-interactive --example blank
cd heureka-video
claude
npx skills add heygen-com/hyperframes
npx hyperframes init heureka-video --non-interactive --example blank
cd heureka-video
claude

Die Skills registrieren sich in Claude Code als Slash-Commands — /hyperframes für die Komposition, /hyperframes-cli für den Dev-Loop (init, lint, preview, render), /gsap für Animationsfragen. Der Agent weiß damit von Anfang an, welche Konventionen das Framework erwartet, statt sie zu erraten.

Die Projektstruktur ist bewusst schlank:

heureka-video/
├── meta.json        # Projekt-Metadaten
├── index.html       # Root-Komposition (das Video selbst)
├── compositions/    # optionale Sub-Kompositionen
└── assets/          # Logos, Bilder, Audio
heureka-video/
├── meta.json        # Projekt-Metadaten
├── index.html       # Root-Komposition (das Video selbst)
├── compositions/    # optionale Sub-Kompositionen
└── assets/          # Logos, Bilder, Audio
heureka-video/
├── meta.json        # Projekt-Metadaten
├── index.html       # Root-Komposition (das Video selbst)
├── compositions/    # optionale Sub-Kompositionen
└── assets/          # Logos, Bilder, Audio
Die drei Grundregeln der Syntax

Eine HyperFrames-Komposition folgt drei einfachen Regeln, die man kennen sollte — selbst wenn der Agent den Code schreibt, hilft das Verständnis beim Debuggen:

1. Das Root-Element definiert das Video:

<div id="root" data-composition-id="heureka-video"
     data-start="0" data-width="1080" data-height="1920">
<div id="root" data-composition-id="heureka-video"
     data-start="0" data-width="1080" data-height="1920">
<div id="root" data-composition-id="heureka-video"
     data-start="0" data-width="1080" data-height="1920">

2. Jedes zeitgesteuerte Element ist ein Clip mit Start, Dauer und Track:

<section class="clip" id="phase-crm"
         data-start="2.8" data-duration="3.4" data-track-index="0">
  <!-- Inhalt der CRM-Auswahl-Szene -->
</section>
<section class="clip" id="phase-crm"
         data-start="2.8" data-duration="3.4" data-track-index="0">
  <!-- Inhalt der CRM-Auswahl-Szene -->
</section>
<section class="clip" id="phase-crm"
         data-start="2.8" data-duration="3.4" data-track-index="0">
  <!-- Inhalt der CRM-Auswahl-Szene -->
</section>

3. Animationen laufen über eine pausierte GSAP-Timeline, die global registriert wird — der Renderer steuert sie dann seek-basiert an:

const tl = gsap.timeline({ paused: true });
tl.from("#headline", { opacity: 0, y: 30, duration: 0.6,
        ease: "power3.out" }, 0);
window.__timelines = window.__timelines || {};
window.__timelines["heureka-video"] = tl;
const tl = gsap.timeline({ paused: true });
tl.from("#headline", { opacity: 0, y: 30, duration: 0.6,
        ease: "power3.out" }, 0);
window.__timelines = window.__timelines || {};
window.__timelines["heureka-video"] = tl;
const tl = gsap.timeline({ paused: true });
tl.from("#headline", { opacity: 0, y: 30, duration: 0.6,
        ease: "power3.out" }, 0);
window.__timelines = window.__timelines || {};
window.__timelines["heureka-video"] = tl;

Dieses seek-getriebene Modell ist der Grund, warum die Renders deterministisch sind: keine Wall-Clock-Abhängigkeiten, kein Ruckeln, jeder Frame exakt reproduzierbar.

Der Workflow: Prompten wie ein Regisseur

Der eigentliche Paradigmenwechsel liegt nicht in der Technik, sondern im Arbeitsmodell. Wir haben das Video nie „gebaut“ — wir haben es beschrieben und dann iterativ Regie geführt.

Schritt 1: Master-Prompt. Bevor wir Claude Code gestartet haben, haben wir mit Claude im Chat ein vollständiges Produktionsdokument erarbeitet: Storyboard mit Phasen-Timing, Design-System mit Hex-Farben, Motion-Prinzipien. Daraus wurde ein einziger Master-Prompt. Ein Auszug:

Using /hyperframes, baue ein 15-sekündiges High-End-Motion-Design-
Werbevideo für "Heureka Consulting". Format: 1080×1920 (9:16), 30 fps.
  
## Design-System (strikt einhalten)
- Hintergrund: radialer Verlauf #10241C → #0B1512, subtiles Noise-Overlay
- Brand-Grün: #3DDC97 / #0E9F6E, Glow-Akzent #4DFFB0
- Alle Animationen mit GSAP, Easing "power3.out" oder "back.out(1.4)",
  NIE linear. Elemente erscheinen gestaggert (0.1–0.15s Versatz).
 
### Phase 1 — CRM-Auswahl (2.5–5.5s)
Drei Glassmorphism-Karten sliden gestaggert ein: Pipedrive, HubSpot,
Salesforce. Ein Hover-Glow wandert über alle drei Karten und
entscheidet sich am Ende für Pipedrive: Scale auf 1.12 mit
back.out(1.7), ...
Using /hyperframes, baue ein 15-sekündiges High-End-Motion-Design-
Werbevideo für "Heureka Consulting". Format: 1080×1920 (9:16), 30 fps.
  
## Design-System (strikt einhalten)
- Hintergrund: radialer Verlauf #10241C → #0B1512, subtiles Noise-Overlay
- Brand-Grün: #3DDC97 / #0E9F6E, Glow-Akzent #4DFFB0
- Alle Animationen mit GSAP, Easing "power3.out" oder "back.out(1.4)",
  NIE linear. Elemente erscheinen gestaggert (0.1–0.15s Versatz).
 
### Phase 1 — CRM-Auswahl (2.5–5.5s)
Drei Glassmorphism-Karten sliden gestaggert ein: Pipedrive, HubSpot,
Salesforce. Ein Hover-Glow wandert über alle drei Karten und
entscheidet sich am Ende für Pipedrive: Scale auf 1.12 mit
back.out(1.7), ...
Using /hyperframes, baue ein 15-sekündiges High-End-Motion-Design-
Werbevideo für "Heureka Consulting". Format: 1080×1920 (9:16), 30 fps.
  
## Design-System (strikt einhalten)
- Hintergrund: radialer Verlauf #10241C → #0B1512, subtiles Noise-Overlay
- Brand-Grün: #3DDC97 / #0E9F6E, Glow-Akzent #4DFFB0
- Alle Animationen mit GSAP, Easing "power3.out" oder "back.out(1.4)",
  NIE linear. Elemente erscheinen gestaggert (0.1–0.15s Versatz).
 
### Phase 1 — CRM-Auswahl (2.5–5.5s)
Drei Glassmorphism-Karten sliden gestaggert ein: Pipedrive, HubSpot,
Salesforce. Ein Hover-Glow wandert über alle drei Karten und
entscheidet sich am Ende für Pipedrive: Scale auf 1.12 mit
back.out(1.7), ...

Je präziser das Design-System im Prompt, desto konsistenter das Ergebnis. Hex-Werte, Easing-Funktionen und Timing-Angaben sind keine Deko — sie sind die Spezifikation.

Schritt 2: Preview-Loop. Mit npx hyperframes preview läuft eine Live-Vorschau im Browser mit Hot Reload. Ab hier wird iteriert wie mit einem Cutter im Schnittraum: „Phase 2 ist zu schnell“, „der Gold-Moment geht unter, lass ihn 0.8 Sekunden länger stehen und shaken“, „tausche die Anordnung — Prozessleiste nach oben, Dealkarten nach unten.“

Schritt 3: Debugging in natürlicher Sprache. Auch Bugs haben wir per Beschreibung gefixt — wobei es enorm hilft, dem Agenten die vermutete Ursache mitzugeben. Beispiel aus dem Projekt: Unser Swoosh-Übergang blitzte einen Frame zu früh auf. Der Fix-Prompt:

BUGFIX: Vor der Überblende blitzt der grüne Streifen kurz auf.
Ursache ist vermutlich, dass das Wipe-Element beim Initialisieren
einen Frame sichtbar im Bild steht. Fix: Dem Element per initialem
gsap.set (VOR Timeline-Start) visibility: hidden und eine
Startposition außerhalb des Bildes geben. Prüfe alle Swoosh-
Instanzen im Projekt auf dasselbe Muster


BUGFIX: Vor der Überblende blitzt der grüne Streifen kurz auf.
Ursache ist vermutlich, dass das Wipe-Element beim Initialisieren
einen Frame sichtbar im Bild steht. Fix: Dem Element per initialem
gsap.set (VOR Timeline-Start) visibility: hidden und eine
Startposition außerhalb des Bildes geben. Prüfe alle Swoosh-
Instanzen im Projekt auf dasselbe Muster


BUGFIX: Vor der Überblende blitzt der grüne Streifen kurz auf.
Ursache ist vermutlich, dass das Wipe-Element beim Initialisieren
einen Frame sichtbar im Bild steht. Fix: Dem Element per initialem
gsap.set (VOR Timeline-Start) visibility: hidden und eine
Startposition außerhalb des Bildes geben. Prüfe alle Swoosh-
Instanzen im Projekt auf dasselbe Muster

Das ist der unterschätzte Teil dieses Workflows: Man braucht kein After Effects — aber ein Grundverständnis dafür, wie Animationen technisch entstehen, macht die Prompts um Größenordnungen wirksamer.

Schritt 4: Qualitätssicherung per CLI. HyperFrames bringt eigene Prüfwerkzeuge mit, die der Agent selbstständig nutzt: npx hyperframes lint findet strukturelle Fehler (fehlende Clip-Attribute, unregistrierte Timelines, überlappende Tracks), bevor man sie im Preview überhaupt sieht.

Rendern: vom Draft zum 60-fps-Master

Gerendert wird lokal über die CLI. Während der Iteration reicht ein schneller Draft, am Ende zählt Qualität:

# Schnelle Iteration
npx hyperframes render --quality draft --output draft.mp4
 
# Finale Ad-Version: visuell verlustfrei, 60 fps
npx hyperframes render --quality high --fps 60 \
    --output heureka_final.mp4
# Schnelle Iteration
npx hyperframes render --quality draft --output draft.mp4
 
# Finale Ad-Version: visuell verlustfrei, 60 fps
npx hyperframes render --quality high --fps 60 \
    --output heureka_final.mp4
# Schnelle Iteration
npx hyperframes render --quality draft --output draft.mp4
 
# Finale Ad-Version: visuell verlustfrei, 60 fps
npx hyperframes render --quality high --fps 60 \
    --output heureka_final.mp4

Das Quality-Preset steuert dabei den H.264-CRF-Wert; wer es genauer will, übersteuert mit --crf 15 (nahezu verlustfrei) oder gibt mit --video-bitrate eine Zielbitrate vor. Auf unterstützter Hardware beschleunigt --gpu das Encoding über VideoToolbox, NVENC & Co. Gerade bei Motion Design mit vielen Glows und schnellen Bewegungen lohnt der Sprung auf 60 fps sichtbar — besonders auf Mobilgeräten, wo die Ads laufen.

Was wir gelernt haben

  • Das Briefing ist das Produkt. 80 % der Ergebnisqualität entstand vor der ersten Zeile Code — im Storyboard, im Design-System, in präzisen Timing-Angaben. Wer schwammig promptet, bekommt generisches Motion Design.

  • Iterieren in Versionen, nicht in Einzelwünschen. Wir haben Feedback immer zu nummerierten Iterations-Prompts gebündelt (v2, v3, … v6) statt einzelne Zurufe zu schicken. Das hält den Agenten fokussiert und macht jede Änderung nachvollziehbar. Pro-Tipp: Git initialisieren und nach jeder funktionierenden Version committen.

  • Abnahme explizit machen. Sätze wie „Phase 3 ist abgenommen und bleibt exakt wie sie ist“ verhindern, dass der Agent fertige Szenen beim nächsten Refactoring versehentlich mit anfasst.

  • Grenzen kennen. HyperFrames ersetzt kein After Effects für komplexe VFX oder 3D-Compositing. Für typografisches Motion Design, UI-Animationen, Daten-Visualisierungen und Produkt-Promos — also einen großen Teil dessen, was Agenturen täglich brauchen — ist es dafür schneller, reproduzierbarer und versionierbar wie Code.

Fazit

Die Kombination aus Claude Code und HyperFrames verschiebt Videoproduktion vom Werkzeug-Handwerk zur Regie-Arbeit. Die Eintrittshürde ist nicht mehr „Kannst du After Effects?“, sondern „Kannst du präzise beschreiben, was du sehen willst?“ — und genau das ist eine Kompetenz, die in Agenturen ohnehin vorhanden ist.

Das fertige Video läuft inzwischen in unseren Kampagnen. Produktionszeit: ein Bruchteil des klassischen Wegs. Externe Kosten: null. Und die vielleicht wichtigste Erkenntnis: Die nächste Version ist nur einen Prompt entfernt.


Du willst sehen, was Automationen für deinen Vertriebsprozess leisten können? Kostenlose Erstberatung sichern:

Kostenloses Erstgespräch buchen