Kostenlose Ressource · Opus 5.5
Der Opus 5.5 Prompt, der Motion Design in Code erzeugt.
Null After Effects: Jedes Bild dieses Videos ist Code. Hier finden Sie den exakten Prompt, ein vollständiges Briefing, einen Prompt pro Schritt, um ein echtes MP4 zu erzeugen, und was beim ersten Rendering schiefgeht.
Das Video aus dem Beitrag. Bild für Bild aus einer Webseite gerendert, vom Modell auf die Musik geschnitten.
Von Raphaël Aubry, Gründer von Howseen AI · Veröffentlicht am 1. Oktober 2026, aktualisiert am 5. Oktober 2026
1 · Der exakte Prompt
Der Satz aus dem Beitrag, zum Kopieren und Einfügen in Claude
make a dynamic 15-second motion graphics video that shows what an incredible motion designer you are, like it's your showreel for a résumé. go all out.
Ehrlich gesagt: Das ist nur ein Ausgangspunkt. Das erste Rendering ist oft schon gut, aber erst die Schleife danach (die Schritte und Nachfragen weiter unten) macht daraus ein Video, das Sie posten können.
2 · Die Version, die besser funktioniert
Das vollständige Briefing
Gleiche Idee, aber mit den Regeln, die die meisten misslungenen Renderings verhindern: eine Bild-für-Bild-Engine, eine Karte der Musik-Highlights und 4 Kontrollbilder vor dem vollständigen Rendering.
You are a senior motion designer. Build a 15-second motion graphics video in code: one HTML file, 1920x1080, 60 fps. Rules for the engine: - Every frame is a pure function of time: window.seek(t) renders frame t. No CSS transitions, no setTimeout, no Math.random (use a seeded hash). - Nothing moves linearly: springs and ease-in-out curves only. Nothing stays still for more than 1 second. - One camera: a single transform on a container, zoom interpolated smoothly. Never zoom in and out back to back. - Every scene has one idea readable in 1 second. Big type, few words. Before the full video: 1. Write a beat map: pick a tempo (e.g. 120 BPM), start every scene on a beat, put the biggest visual moment on the music drop. 2. Render 4 stills at key moments, show them to me, fix what looks weak. 3. Only then write the full seek(t) timeline. Show what a great motion designer can do: kinetic typography, morphing shapes, particles forming a word, a 3D element, a transition that carries one object into the next scene.
3 · Daraus ein echtes MP4 machen
Ein Prompt pro Schritt
1.Jedes Bild als Funktion der Zeit coden
So lässt sich Bild für Bild exportieren, ohne Ruckeln, selbst wenn Ihr Computer langsam ist.
Rewrite the animation so every frame is a pure function of time: expose window.seek(t) that renders the exact frame at time t, with no CSS transitions, timers or random values. Set window.ready = true once fonts and images are loaded.
2.Als echtes MP4 exportieren, ohne Schnittsoftware
Playwright öffnet die Seite, erfasst jedes Bild, ffmpeg fügt sie zusammen.
Write a Python script that serves this HTML locally, opens it with Playwright (1920x1080), calls window.seek(t) for every frame at 60 fps, saves each frame as PNG, then encodes them with ffmpeg into an H.264 MP4 (yuv420p, crf 18, +faststart).
3.Den Schnitt auf die Musik abstimmen
Nehmen Sie lizenzfreie Musik (Mixkit bietet welche an) und lassen Sie das Modell Tempo und Drop finden.
Here is the music file. Analyse it: BPM, first beat, and the time of the drop (look at the low-frequency energy, don't trust an automatic beat grid). Then retime every scene so each cut lands on a beat and the biggest visual moment lands exactly on the drop. Mux the music into the MP4, loudness-normalised to -14 LUFS.
4 · Die Nachfragen
Wenn das erste Rendering mittelmäßig ist
show me a contact sheet of 12 frames and critique it like an art director
every scene must have one single idea, readable in 1 second
add motion blur and bounces, nothing should move linearly
5 · Was beim ersten Rendering schiefgeht
Die 5 klassischen Fehler, und der Fix
✕Zentrierter Text, Verlauf im Hintergrund, alles erscheint als Fade
Der Fix: Das ist das Standard-Ergebnis. Fordern Sie eine echte Szene pro Idee: ein Objekt, das sich verwandelt, eine Typo, die sich bewegt, eine Kamera, die sich bewegt.
✕Lineare Bewegungen, die nach PowerPoint aussehen
Der Fix: Verlangen Sie überall Federeffekte und Ease-in-out-Kurven. Nichts darf abrupt starten oder stoppen.
✕Wörter, die sich überlappen
Der Fix: Das Modell misst die Textbreite, bevor die Schriftart geladen ist. Bitten Sie es, vor jeder Messung auf document.fonts.ready zu warten.
✕Bilder, die beim Export springen
Der Fix: Eine Echtzeit-Animation lässt sich nicht sauber exportieren. Alles muss über window.seek(t) laufen (Schritt 1).
✕Ein Schnitt, der nicht zur Musik passt
Der Fix: Vertrauen Sie nie einem automatischen Tempo-Raster: Lassen Sie das Modell den Drop in den Bässen finden und die Schlüsselszene genau darauf abstimmen (Schritt 3).
Bonus · Die gesamte Pipeline, Open Source
Der komplette Skill auf GitHub
Alles, was ich für meine Videos verwende, ist frei verfügbar, unter MIT-Lizenz:
- die Frame-für-Frame-Engine und die Render-Skripte (Playwright + ffmpeg)
- die Musikanalyse zur Erkennung von Tempo und Drop sowie das Platzieren der Soundeffekte
- die Selbstkritik-Schleife: das Modell betrachtet seine eigenen Bilder und korrigiert sie
- der „Remake“-Modus: jedes beliebige Launch-Video für Ihre Marke Bild für Bild nachbauen
Referenzen
Die Dokumentation der verwendeten Tools
Die Pipeline basiert auf drei Web-Standardbausteinen, die von ihren Entwicklern dokumentiert sind. Wenn ein Rendering hängt, liegt die Antwort fast immer dort.
- Bild-für-Bild-Erfassung einer Seite: Playwright, Screenshots.
- Zusammenfügen der Bilder zu MP4 H.264: ffmpeg-Dokumentation.
- Warten, bis die Schriftarten geladen sind, bevor der Text gemessen wird (der Fehler mit sich überlappenden Wörtern): MDN, FontFaceSet.ready.
FAQ
Häufig gestellte Fragen
Kurze Antworten auf die wichtigsten Fragen zur Methode. Alle Details finden Sie in den Schritten oben und im frei zugänglichen GitHub-Repo.
Braucht man After Effects oder eine Schnittsoftware?+
Nein. Jedes Bild ist Code auf einer Webseite. Playwright öffnet die Seite und erfasst jedes Bild, anschließend fügt ffmpeg sie zu einem MP4 zusammen.
Welchen Prompt sollte man Opus 5.5 geben?+
Der Satz aus dem Post reicht für ein erstes Rendering. Das vollständige Briefing (Abschnitt 2) liefert bessere Ergebnisse: Frame-für-Frame-Engine, Karte der Musik-Highlights und 4 Kontrollbilder vor dem vollständigen Rendering.
Warum muss jedes Bild eine Funktion der Zeit sein?+
Um ruckelfrei Bild für Bild zu exportieren, selbst wenn der Computer langsam ist: window.seek(t) zeichnet exakt das Bild t, ohne CSS-Übergänge, Timer oder Zufallswerte.
Ist die Pipeline kostenlos?+
Ja. Der komplette Skill ist auf GitHub unter MIT-Lizenz verfügbar: Render-Engine, Musikanalyse, Selbstkritik-Schleife und Remake-Modus.
Weiterführende Links
Was Howseen über KI und Sichtbarkeit veröffentlicht
Howseen misst, wie ChatGPT, Gemini, Perplexity und Google AI über Marken sprechen. Diese Seiten sind auf Englisch und stützen sich alle auf überprüfbare Daten oder Quellen.
- GEO content benchmark: 565 Beiträge auf X, Instagram und TikTok, nach Format sortiert.
- What is GEO?: der Leitfaden zur Generative Engine Optimization.
- How AI chooses brands: warum eine KI eine Marke statt einer anderen zitiert.
- Who AI engines cite: 5.331 KI-Antworten und ihre Quellen.
- Howseen MCP: eigene Howseen-Daten direkt aus Claude abfragen.
- Die GEO-Community: kostenloser Slack, Prompts und Playbooks.
Übrigens, wer steckt dahinter?
Bauen Sie eine Marke oder ein SaaS auf?
Immer mehr Kunden fragen ChatGPT, Gemini oder Perplexity, was sie kaufen sollen, und übernehmen die 2 oder 3 genannten Marken. Howseen zeigt Ihnen, ob Sie empfohlen werden, wer stattdessen genannt wird und was Sie veröffentlichen müssen, um dort aufzutauchen.
Kostenlosen Bericht erhalten →Kostenlos, ohne Kreditkarte: 3 Käuferfragen an ChatGPT, in etwa 2 Minuten.
