Ressource gratuite · Opus 5.5
Le prompt Opus 5.5 qui fait du motion design en code.
Zéro After Effects : chaque image de cette vidéo est du code. Voici le prompt exact, un brief complet, un prompt par étape pour sortir un vrai MP4, et ce qui rate au premier rendu.
La vidéo du post. Rendue image par image depuis une page web, montée sur la musique par le modèle.
Par Raphaël Aubry, fondateur de Howseen AI · Publié le 1er octobre 2026, mis à jour le 5 octobre 2026
1 · Le prompt exact
La phrase du post, à copier-coller dans 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.
Honnêtement : c'est un point de départ. Le premier rendu est souvent bon, mais c'est la boucle d'après (les étapes et les relances plus bas) qui en fait une vidéo que tu peux poster.
2 · La version qui marche mieux
Le brief complet
Même idée, mais avec les règles qui évitent la plupart des rendus ratés : un moteur image par image, une carte des temps forts de la musique, et 4 images de contrôle avant le rendu complet.
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 · En faire un vrai MP4
Un prompt par étape
1.Code chaque image comme une fonction du temps
C'est ce qui permet d'exporter image par image, sans saccade, même si ton ordinateur rame.
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.Exporte en vrai MP4, sans logiciel de montage
Playwright ouvre la page, capture chaque image, ffmpeg les assemble.
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.Cale le montage sur la musique
Prends une musique libre de droits (Mixkit en propose), et laisse le modèle trouver le tempo et le drop.
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 · Les relances
Quand le premier rendu est moyen
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 · Ce qui rate au premier rendu
Les 5 erreurs classiques, et le fix
✕Texte centré, dégradé en fond, tout apparaît en fondu
Le fix : C'est le rendu par défaut. Demande une vraie scène par idée : un objet qui se transforme, une typo qui bouge, une caméra qui voyage.
✕Des mouvements linéaires, qui font « PowerPoint »
Le fix : Exige des ressorts et des courbes ease-in-out partout. Rien ne doit démarrer ou s'arrêter net.
✕Des mots qui se chevauchent
Le fix : Le modèle mesure la largeur du texte avant que la police soit chargée. Demande-lui d'attendre document.fonts.ready avant toute mesure.
✕Des images qui sautent dans l'export
Le fix : Une animation en temps réel ne s'exporte pas proprement. Tout doit passer par window.seek(t) (étape 1).
✕Un montage qui ne tombe pas sur la musique
Le fix : Ne fais jamais confiance à une grille de tempo automatique : fais-lui trouver le drop dans les basses, puis caler la scène clé dessus (étape 3).
Bonus · Tout le pipeline, open source
Le skill complet sur GitHub
Tout ce que j'utilise pour mes vidéos est en accès libre, sous licence MIT :
- le moteur image par image et les scripts de rendu (Playwright + ffmpeg)
- l'analyse de la musique pour trouver le tempo et le drop, et la pose des bruitages
- la boucle d'autocritique : le modèle regarde ses propres images et corrige
- le mode « remake » : recréer n'importe quelle vidéo de lancement pour ta marque, image par image
Références
La documentation des outils utilisés
Le pipeline repose sur trois briques standard du web, documentées par leurs éditeurs. Si un rendu bloque, c'est presque toujours là qu'est la réponse.
- Capture image par image d'une page : Playwright, Screenshots.
- Assemblage des images en MP4 H.264 : documentation ffmpeg.
- Attendre que les polices soient chargées avant de mesurer le texte (l'erreur des mots qui se chevauchent) : MDN, FontFaceSet.ready.
FAQ
Questions fréquentes
Les réponses courtes aux questions de base sur la méthode. Tout le détail est dans les étapes au-dessus et dans le repo GitHub, en accès libre.
Faut-il After Effects ou un logiciel de montage ?+
Non. Chaque image est du code dans une page web. Playwright ouvre la page et capture chaque image, puis ffmpeg les assemble en MP4.
Quel prompt donner à Opus 5.5 ?+
La phrase du post suffit pour un premier rendu. Le brief complet (section 2) donne de meilleurs résultats : moteur image par image, carte des temps forts de la musique, et 4 images de contrôle avant le rendu complet.
Pourquoi chaque image doit-elle être une fonction du temps ?+
Pour exporter image par image sans saccade, même si l'ordinateur rame : window.seek(t) dessine exactement l'image t, sans transitions CSS, minuteurs ni valeurs aléatoires.
Le pipeline est-il gratuit ?+
Oui. Le skill complet est sur GitHub sous licence MIT : moteur de rendu, analyse de la musique, boucle d'autocritique et mode remake.
Pour aller plus loin
Ce que Howseen publie sur l'IA et la visibilité
Howseen mesure comment ChatGPT, Gemini, Perplexity et Google AI parlent des marques. Ces pages sont en anglais, et toutes s'appuient sur des données ou des sources vérifiables.
- GEO content benchmark : 565 posts sur X, Instagram et TikTok classés par format.
- What is GEO? : le guide de la Generative Engine Optimization.
- How AI chooses brands : pourquoi une IA cite une marque plutôt qu'une autre.
- Who AI engines cite : 5 331 réponses IA et leurs sources.
- Howseen MCP : interroger ses données Howseen depuis Claude.
- La communauté GEO : Slack gratuit, prompts et playbooks.
Au fait, qui a fait ça ?
Tu construis une marque ou un SaaS ?
De plus en plus de clients demandent à ChatGPT, Gemini ou Perplexity quoi acheter, et repartent avec les 2 ou 3 marques citées. Howseen te montre si c'est toi qu'ils recommandent, qui sort à ta place, et quoi publier pour y apparaître.
Recevoir le rapport gratuit →Gratuit, sans carte bancaire : 10 questions d'acheteurs posées à ChatGPT et Google AI Overviews, en 2 minutes environ.
