Risorsa gratuita · Opus 5.5
Il prompt Opus 5.5 che fa motion design in codice.
Zero After Effects: ogni fotogramma di questo video è codice. Ecco il prompt esatto, un brief completo, un prompt per ogni fase per ottenere un vero MP4 e cosa va storto al primo rendering.
Il video del post. Renderizzato fotogramma per fotogramma a partire da una pagina web, montato sulla musica dal modello.
Di Raphaël Aubry, fondatore di Howseen AI · Pubblicato il 1 ottobre 2026, aggiornato il 5 ottobre 2026
1 · Il prompt esatto
La frase del post, da copiare e incollare 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.
Onestamente: è solo un punto di partenza. Il primo rendering è spesso buono, ma è il ciclo successivo (i passaggi e i follow-up più sotto) che lo trasforma in un video pronto da pubblicare.
2 · La versione che funziona meglio
Il brief completo
Stessa idea, ma con le regole che evitano la maggior parte dei rendering falliti: un motore fotogramma per fotogramma, una mappa dei momenti chiave della musica e 4 immagini di controllo prima del rendering completo.
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 · Trasformarlo in un vero MP4
Un prompt per ogni fase
1.Codifica ogni fotogramma come una funzione del tempo
Questo è ciò che permette di esportare fotogramma per fotogramma, senza scatti, anche se il tuo computer è lento.
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.Esporta in un vero MP4, senza software di montaggio
Playwright apre la pagina, cattura ogni fotogramma, ffmpeg li assembla.
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.Sincronizza il montaggio con la musica
Prendi una musica royalty-free (Mixkit ne offre), e lascia che sia il modello a trovare il tempo e il 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 · I follow-up
Quando il primo rendering è mediocre
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 · Cosa va storto al primo rendering
I 5 errori classici, e come risolverli
✕Testo centrato, sfondo sfumato, tutto appare in dissolvenza
La soluzione: È il rendering di default. Chiedi una vera scena per ogni idea: un oggetto che si trasforma, una tipografia che si muove, una camera che si sposta.
✕Movimenti lineari, che sembrano «PowerPoint»
La soluzione: Richiedi molle e curve ease-in-out ovunque. Niente deve partire o fermarsi bruscamente.
✕Parole che si sovrappongono
La soluzione: Il modello misura la larghezza del testo prima che il font sia caricato. Chiedigli di aspettare document.fonts.ready prima di qualsiasi misurazione.
✕Fotogrammi che saltano nell'esportazione
La soluzione: Un'animazione in tempo reale non si esporta in modo pulito. Tutto deve passare da window.seek(t) (fase 1).
✕Un montaggio che non è sincronizzato con la musica
La soluzione: Non fidarti mai di una griglia di tempo automatica: fai trovare al modello il drop nelle basse frequenze, poi sincronizza su di esso la scena chiave (fase 3).
Bonus · Tutta la pipeline, open source
La skill completa su GitHub
Tutto quello che uso per i miei video è ad accesso libero, con licenza MIT:
- il motore fotogramma per fotogramma e gli script di rendering (Playwright + ffmpeg)
- l'analisi della musica per trovare il tempo e il drop, e il posizionamento degli effetti sonori
- il ciclo di autocritica: il modello osserva le proprie immagini e si corregge
- la modalità «remake»: ricreare qualsiasi video di lancio per il tuo brand, fotogramma per fotogramma
Riferimenti
La documentazione degli strumenti utilizzati
La pipeline si basa su tre componenti standard del web, documentati dai rispettivi editori. Se un rendering si blocca, è quasi sempre lì che trovi la risposta.
- Cattura fotogramma per fotogramma di una pagina: Playwright, Screenshots.
- Assemblaggio dei fotogrammi in MP4 H.264: documentazione ffmpeg.
- Aspettare che i font siano caricati prima di misurare il testo (l'errore delle parole sovrapposte): MDN, FontFaceSet.ready.
FAQ
Domande frequenti
Le risposte brevi alle domande di base sul metodo. Tutti i dettagli sono nei passaggi sopra e nel repo GitHub, ad accesso libero.
Serve After Effects o un software di montaggio?+
No. Ogni fotogramma è codice in una pagina web. Playwright apre la pagina e cattura ogni fotogramma, poi ffmpeg li assembla in MP4.
Che prompt dare a Opus 5.5?+
La frase del post basta per un primo rendering. Il brief completo (sezione 2) dà risultati migliori: motore fotogramma per fotogramma, mappa dei momenti salienti della musica e 4 fotogrammi di controllo prima del rendering completo.
Perché ogni fotogramma deve essere una funzione del tempo?+
Per esportare fotogramma per fotogramma senza scatti, anche se il computer è lento: window.seek(t) disegna esattamente il fotogramma t, senza transizioni CSS, timer o valori casuali.
La pipeline è gratuita?+
Sì. La skill completa è su GitHub con licenza MIT: motore di rendering, analisi della musica, ciclo di autocritica e modalità remake.
Per approfondire
Quello che Howseen pubblica su IA e visibilità
Howseen misura come ChatGPT, Gemini, Perplexity e Google AI parlano dei brand. Queste pagine sono in inglese e si basano tutte su dati o fonti verificabili.
- GEO content benchmark: 565 post su X, Instagram e TikTok classificati per formato.
- What is GEO?: la guida alla Generative Engine Optimization.
- How AI chooses brands: perché un'IA cita un brand piuttosto che un altro.
- Who AI engines cite: 5.331 risposte IA e le loro fonti.
- Howseen MCP: interrogare i tuoi dati Howseen da Claude.
- La community GEO: Slack gratuito, prompt e playbook.
A proposito, chi l'ha fatto?
Stai costruendo un brand o un SaaS?
Sempre più clienti chiedono a ChatGPT, Gemini o Perplexity cosa comprare, e se ne vanno con i 2 o 3 brand citati. Howseen ti mostra se sei tu quello consigliato, chi emerge al posto tuo e cosa pubblicare per apparire.
Ricevi il report gratuito →Gratuito, senza carta di credito: 3 domande d'acquisto poste a ChatGPT, in circa 2 minuti.
