Wie ich Werbvideos mit Code statt Editoren erstelle

Wie ich Werbvideos mit Code statt Editoren erstelle

Ich starrte drei Stunden lang auf meine Adobe Premiere-Timeline, schleppte Textebenen Pixel für Pixel, und ein Gedanke traf mich, der alles veränderte: Ich bin ein Entwickler. Warum bearbeite ich Videos wie ein YouTuber aus 2015?

Das war vor sechs Monaten. Seitdem habe ich über ein Dutzend Werbvideos ausgeliefert — KI-Schulpromos, Portfolio-Demos, Client-Showcase-Reels — und habe keinen traditionellen Video-Editor mehr geöffnet. Nicht Premiere. Nicht Final Cut. Nicht einmal CapCut. Jedes einzelne Video wurde als React-Code geschrieben, von meinem Terminal gerendert, und in den meisten Fällen wurde die initiale Komponente von Claude Code scaffoldet, bevor ich die Tastatur berührte.

Das Tool, das das ermöglichte, ist Remotion. Und der Workflow-Beschleuniger, der eine steile Lernkurve in einen reibungslosen Nachmittag verwandelte, ist das Skill-System von Claude Code.

Die Videos sehen gut aus. Nicht "gut für code-generiert." Wirklich gut.

Warum traditionelle Videobearbeitung mein Gehirn kaputt machte

Das Problem ist nicht Komplexität. Das Problem ist, dass traditionelle Videobearbeitung grundlegend manuell ist. Jede Änderung ist ein Mausziehen. Jede Revision bedeutet Arbeit von Hand neu machen. Möchtest du die Markenfarbe über 47 Textelemente ändern? Das sind 47 einzelne Klicks.

Und dann gibt es das Versionierungsproblem. Versuche, eine Adobe Premiere-Projektdatei in Git zu stecken. Du kannst sie nicht diffen. Du kannst sie nicht branchen.

Remotion löst all diese Probleme.

Was Remotion wirklich ist

Remotion ist ein React-Framework zur programmatischen Erstellung von Videos. Du schreibst React-Komponenten. Diese Komponenten rendern als Video-Frames. Du renderst die Frames zu einem MP4.

Wenn du React kennst, weißt du bereits 80% von dem, was du für Remotion brauchst.

Der Fallstrick, der mich fast aufhören ließ

Remotion hat einen Vorschau-Server und einen Rendering-Prozess. Der Vorschau-Server ist schnell. Der eigentliche Rendering-Prozess ist langsam.

Mein erstes Remotion-Video war 30 Sekunden. Das Rendering dauerte 23 Minuten auf meinem Laptop. Ich war bereit, die ganze Idee aufzugeben, bis ich die Lösung fand:

# Schnelleres Rendering für Tests
npx remotion render --scale=0.5 --jpeg-quality=50

# Volle Qualität für Produktion
npx remotion render --scale=1 --jpeg-quality=80

Wie Claude Code diesen Workflow zu einer Superpower macht

Neue Video-Komponenten scaffolden

Erstelle eine Remotion-Komponente für ein 30-Sekunden KI-Schul-Werbevideo
mit 4 Abschnitten: Intro mit Logo-Animation, 3 Feature-Highlights mit
Slide-in-Text, ein Testimonials-Abschnitt und ein CTA mit pulsierendem Button-Effekt.
Verwende dunkles Theme (#0a0a0a Hintergrund) mit elektrischem Blau (#00d4ff) Akzenten.

Claude Code generiert die vollständige Komponente — Imports, Animationen, Sequences, Timing, Styling. Der erste Entwurf ist selten perfekt. Aber er ist 80% fertig.

Animationen iterieren

Lass den Titel von links hereinschieben statt fade-in,
und füge einen subtilen Skalierungseffekt zu den Feature-Icons hinzu.
Der Übergang zwischen Abschnitten soll einen Wipe-Effekt verwenden.

Markenspezifisches Theming

Passe das Farbschema für [Kundenname] Branding an:
- Primärer Hintergrund: #1a1a2e
- Akzent: #e94560
- Text: #eaeaea

Die Zahlen, die das lohnenswert machen

Was ich meinem vergangenen Ich sagen würde

Du weißt bereits, wie man Videos macht. Du weißt es nur noch nicht.

Jedes React-Konzept, das du gelernt hast — Komponenten, Props, State, Komposition, Interpolation — entspricht direkt der Videoproduktion. Der einzige Unterschied ist das Ausgabeformat.

Meine Herausforderung: Wähle eine Sache, für die du ein Video brauchst. Richte ein Remotion-Projekt ein, beschreibe Claude Code, was du willst, und rendere es. Der gesamte Prozess — Setup bis fertiges MP4 — dauert weniger als einen Nachmittag.

Und ich garantiere, du wirst Premiere Pro nie mehr gleich ansehen.