Usa Claude Code con Opus 5.5 Thinking High per trasformare un prompt in un MP4 renderizzato tramite codice. Guarda video originali, prova i prompt, visualizza le revisioni e scarica il risultato.
Descrivi la tua idea e genera un MP4 direttamente in questa pagina.
crea un video di motion graphics dinamico di 15 secondi che mostri quanto sei un motion designer incredibile, come se fosse il tuo showreel per un curriculum. dai tutto.
Video originale dell’autore. Fonte: post X collegato.
Raptor 3 Engine
34.7s
Three.js · Shader
Ho chiesto a Claude Opus 5.5 di spiegare come funziona un motore a razzo costruendo un Raptor 3 interattivo che puoi smontare nel tuo browser.
Taglialo e apri, segui l'ossigeno e il metano attraverso entrambe le turbopompe, poi regola la spinta e osserva i diamanti d'urto muoversi.
http://airsup.ai/rocket-engine
Video originale dell’autore. Fonte: post X collegato.
Shape to Interface
14.06s
SVG
<inputs>
Chiedimi: 8 fino a 12 stati dell'interfaccia in cui voglio che la forma si trasformi (ad es. pulsante, loader, player, slider, toggle, tab, grafico, palette dei comandi, toast), puro bianco e nero o un solo colore d'accento, e una canzone royalty-free intorno a 120 BPM (ad es. Mixkit, gratis per uso commerciale).
</inputs>
<direction>
Movimento UI di livello Dribbble. Una sola forma, mai tagliata: ogni stato è lo stesso elemento che trasforma dimensione, raggio e colore mentre il suo contenuto cambia con una breve sfocatura. Un cursore guida ogni cambiamento con clic e trascinamenti reali. Tela grigio caldo chiaro, componenti bianchi e neri, un solo font UI pulito (Geist). Molle ovunque, al massimo un leggerissimo superamento. La camera zooma così ogni stato riempie l'inquadratura. L'ultimo fotogramma è il primo, così il loop è continuo.
Vietato: easing rimbalzante, esplosioni di particelle, bagliori, gradienti sulle superfici UI, tratti di icone non coerenti, tempi morti, qualsiasi cosa che sembri un template.
</direction>
<structure>
120 BPM, 7 battute, qualcosa accade a ogni battito.
Pulsante → loader → check → isola dinamica → player musicale con morph play/pausa → trascina la barra di avanzamento → diventa un volume slider che si allunga se trascinato oltre il massimo → un toggle scatta sul beat → la manopola diventa un indicatore di tab liquido → le tab si aprono in un grafico che si disegna da solo, con un tooltip al passaggio del mouse → si comprime in ⌘K → digita per filtrare → invio → toast → torna al pulsante.
</structure>
<build>
1. Un file HTML, quadrato 1440x1440. Ogni stile è calcolato dal tempo dentro seek(t): nessuna transizione CSS, nessun timer, nessuno stato trasportato tra i fotogrammi.
2. Le molle sono risposte a gradino in forma chiusa. Un valore che cambia target molte volte è la somma di una molla per ogni cambiamento, quindi resta una funzione pura del tempo.
3. I due bordi dell'indicatore di tab cavalcano molle diverse, così il bordo d'attacco si allunga davanti a quello in coda. Stesso trucco per la manopola del toggle.
4. I trascinamenti sono manipolazione diretta: mentre il cursore è tenuto premuto, il valore è calcolato dalla sua posizione. Al rilascio rimbalza indietro da dove si trovava.
5. Analizza la canzone con numpy per la griglia dei beat e parti su un downbeat. Posiziona ogni suono UI in base al suo picco misurato.
6. Renderizza con Playwright: 4 sottofotogrammi per fotogramma, miscelati con ffmpeg tmix per il motion blur a 60fps.
7. Renderizza un fotogramma per beat prima del render completo. Correggi tutto ciò che è fuori griglia, angusto o difficile da leggere.
</build>
<gotchas>
Non mettere mai will-change su qualcosa che la camera scala, altrimenti il testo appare sfocato. Il testo che cambia dentro un contenitore in morphing ha bisogno di tempi di entrata e uscita propri, altrimenti si sovrappone. Rendi l'ultimo fotogramma identico al primo, inclusi posizione e velocità del cursore, oppure il loop scatta.
</gotchas>
<start>
Chiedimi gli input, poi mostrami la lista degli stati sulla griglia dei beat prima di scrivere qualsiasi codice.
</start>
Video originale dell’autore. Fonte: post X collegato.
Motion Design
15.06s
Canvas
crea un video di motion graphics dinamico di 15 secondi che mostri quanto sei un motion designer incredibile, come se fosse il tuo showreel per un curriculum. dai tutto.
Video originale dell’autore. Fonte: post X collegato.
One-Prompt Showreel
15.06s
Shader · Canvas
crea un video di motion graphics dinamico di 15 secondi che mostri quanto sei un motion designer incredibile, come se fosse il tuo showreel per un curriculum. dai tutto.
Video originale dell’autore. Fonte: post X collegato.
Pixel Wizard
11.29s
Canvas
Crea un singolo file HTML autonomo che renderizza un'animazione pixel art di un mago che lancia un incantesimo, usando JavaScript vanilla e Canvas 2D. Nessuna risorsa esterna, librerie o richieste di rete.
RENDERING
- Disegna tutto su un canvas fuori schermo a una risoluzione logica fissa di 128x96, poi copia su un canvas di visualizzazione a schermo intero scalato dal più grande fattore intero che si adatta alla finestra, centrato, con imageSmoothingEnabled = false e CSS image-rendering: pixelated.
- Tutto il disegno si aggancia a coordinate intere sul canvas logico. Nessuna posizione sub-pixel, anti-aliasing, gradienti o shadowBlur.
- Tavolozza fissa di ~24 colori esadecimali: blu/viola profondi per il cielo notturno, toni caldi per la veste, 3-4 colori magici brillanti. Ogni pixel proviene da questa tavolozza.
PERSONAGGIO
- Costruisci il mago proceduralmente con rettangoli pieni e sequenze di pixel, ~24x32 pixel logici: cappello a punta con una piega, barba lunga, veste a due tonalità con contorno più scuro, bastone con una gemma sulla punta.
- Parametrizza la posa (angolo del bastone, braccio alzato, inclinazione della testa, oscillazione della veste). Anima i parametri in modo fluido, poi quantizzali sulla griglia di pixel a ogni frame così il movimento si legge come un'animazione pixel a 8-12 fps anche se il loop gira a 60fps.
ANIMAZIONE
- Macchina a stati in loop: IDLE (bob di 2 frame, oscillazione della barba) -> CHARGE (il bastone si alza, la gemma scintilla, le scintille spirali verso l'interno) -> CAST (esplosione luminosa, proiettile che attraversa la scena, scossa dello schermo di 1-2 pixel) -> RECOVER (ritorno alla calma). Ease dei parametri di posa tra i keyframe.
- Sistema di particelle con pool allocato senza allocazioni: prealloca e riusa. Le scintille orbitano attorno alla gemma durante CHARGE, esplodono verso l'esterno su CAST, ogni particella passa dal bianco al colore magico al scuro prima di sparire. Aggancia le posizioni delle particelle alla griglia quando disegni.
- Aggiornamento a timestep fisso di 60hz con rendering rAF. Zero allocazioni di oggetti nel loop.
SCENA
- Sfondo minimale: cielo scuro, alcune stelle scintillanti di 1px, luna, linea del pavimento in pietra. La silhouette del personaggio deve essere chiara.
- Luce di bordo sottile di 1px sul mago dalla gemma, che si intensifica durante CHARGE e CAST.
BARRA DI QUALITÀ
- Pixel nitidi a qualsiasi dimensione della finestra, loop senza interruzioni, 60fps stabile, silhouette leggibile. Dovrebbe sembrare un'animazione sprite a 16 bit rifinita, non forme vettoriali ridimensionate.
Video originale dell’autore. Fonte: post X collegato.
Motion in Rhythm
15.06s
Canvas
crea un video di motion graphics dinamico di 15 secondi che mostri quanto sei un incredibile motion designer, come se fosse il tuo showreel per un curriculum. vai all-in
Video originale dell’autore. Fonte: post X collegato.
Code in Motion
15.06s
SVG · gsap
crea un video di motion graphics dinamico di 15 secondi che mostri quanto sei un motion designer incredibile, come se fosse il tuo showreel per un curriculum. dai tutto.
Video originale dell’autore. Fonte: post X collegato.
Market Street 1906
8s
Three.js · Shader · Canvas
Ricrea Market Street, San Francisco come era il 17 aprile 1906, il pomeriggio prima del terremoto, in Blender.
Ambito: il Ferry Building su Market fino a Fifth Street, incluso il Palace Hotel, il Call Building, il Chronicle Building, la Fontana di Lotta e l'Emporium.
Prima di modellare qualsiasi cosa, costruisci un file sorgente da: le mappe assicurative antincendio Sanborn del 1899-1905 (impronte, altezze, materiali, occupanti), il film dei fratelli Miles "A Trip Down Market Street" (aprile 1906), fotografie d'epoca da OpenSFHistory, la Library of Congress e la collezione David Rumsey, e la topografia USGS. Registra ogni edificio con impronta, altezza, materiale della facciata, occupante e la fonte per ogni fatto con un livello di confidenza.
Costruisci tutto in Blender Python. Nessuna mesh, texture o HDRI scaricati. Scrivi generatori riutilizzabili (facciata commerciale vittoriana, tetto mansardato, bow window, tende da sole, insegne dipinte, lampioni a gas ed elettrici, funivia, carro trainato da cavalli, automobile d'epoca) e assembla la strada dal file sorgente, così ogni edificio risale ai dati.
Fornisci un video di 10 secondi lungo la strada.
Video originale dell’autore. Fonte: post X collegato.
Treasure Chest
14.74s
Three.js · Shader · Canvas · gsap
Aiutami a creare un gioco mobile originale «Momenti di gloria» con effetti dinamici: [soggetto, ad esempio: apri il forziere / promozione di grado / sblocco di un risultato / drop del Boss / potenziamento del personaggio].
Realizzalo come una pagina web a file singolo apribile direttamente (HTML + CSS + JS), con un clic si riproduce completamente, con effetti paragonabili alle scene di ricompensa / premiazione dei giochi commerciali.
【Worldbuilding e stile】
- Arte originale, non imitare IP, personaggi o loghi di giochi esistenti.
- Stile cartoon per mobile: colori ad alta saturazione, contorni scuri uniformi (ad esempio #1A1033), forme rotonde e corpose.
- Colori che cambiano con il livello: [scala di livelli, ad esempio: verde comune → blu raro → viola epico → oro leggendario]. A ogni livello cambia il colore principale, il colore degli effetti luminosi e la tonalità dello sfondo.
- Titolo con font di gioco grasso e arrotondato (come Titan One / Lilita One), contorno nero, ombra; le lettere «sbattono» una a una nella scena, con rimbalzo.
【Soggetto: renderlo vero 3D】
- Modellalo con Three.js, non usare texture SVG piatte. Deve avere spessore, smussi e dettagli strutturali coerenti con il soggetto (fessure delle assi, rivetti, bordature, sfaccettature delle gemme, chiusure, ecc.); dettagli come le fessure delle assi vanno costruiti con geometrie reali, non con linee nere applicate.
- Ombreggiatura cartoon a gradini (MeshToonMaterial con texture sfumata a 3~4 gradini), con tre luci: luce principale, luce cielo e luce di contorno nel colore del livello.
- Contorno con rilevamento bordi in post-produzione: renderizza normal map + depth map, poi disegna le linee con uno shader. Contorno esterno spesso, giunzioni tra parti sottili, spessore costante; inoltre fai un supersampling di 1.5x e antialiasing multi-campione.
Non usare il contorno «retro nero ingrandito», perché lo spessore non è uniforme e si spezza agli angoli.
La soglia per il giudizio di profondità deve essere ampia, le giunzioni si basano principalmente sulle normali, altrimenti su superfici viste in obliquo compaiono sottili striature diagonali.
- Le parti mobili devono muoversi in modo realistico, ad esempio il coperchio del forziere che si apre sulla cerniera, la medaglia che ruota attorno all'asse verticale.
- In attesa, il soggetto ruota lentamente a destra e sinistra, mostrando il lato e lo spessore, con una leggera fluttuazione verticale; sotto i piedi un'ombra morbida che cambia con l'altezza.
【Se nell'immagine ci sono illustrazioni 2D (carte, icone premio, personaggi)】
- Ombreggiatura cartoon a tre strati: colore base, colore ombra a blocchi, colore luce; non usare solo una sfumatura.
- Linee con spessori diversi: contorno esterno spesso, linee strutturali interne sottili.
- Ogni personaggio o oggetto deve avere la propria espressione e posa, non tutti con la stessa faccia.
- Ombra sotto i piedi per far «stare» il soggetto nella scena; lo sfondo con motivi differenziati per attributo, non usare sempre lo stesso raggio.
【Ritmo della performance: cinque fasi, tutte indispensabili】
1. Preparazione: il soggetto fluttua in attesa, ogni pochi secondi un sussulto per indicare che si può cliccare, in basso mostra il suggerimento «点击».
2. Potenziamento: a ogni clic, il soggetto salta, fa un giro in aria, atterra schiacciandosi e rimbalzando; passa al colore del livello successivo, un lampo di luce, un anello di particelle, il titolo si aggiorna.
3. Carica (circa 1 secondi): il soggetto trema sempre più forte, la luce filtra dalle fessure, le particelle intorno vengono attratte al centro, il tono dell'audio sale continuamente; all'ultimo momento si schiaccia bruscamente.
4. Esplosione: bagliore radiale dal punto di esplosione, schermo che trema, camera che avanza, onde d'urto multiple, sottili scie luminose che schizzano, stelle scintillanti, monete e gemme (con rotazione). L'esplosione dei livelli alti deve essere chiaramente più forte. I coriandoli solo una volta al culmine, non coriandoli su tutto lo schermo.
5. Rivelazione e ricompensa:
- La carta premio vola fuori dal soggetto lungo una traiettoria ad arco, con overshoot e oscillazione finale, i numeri scorrono.
- Gli oggetti rari hanno una cornice con scie luminose arcobaleno e il badge «NEW!».
- Al clic su riscuoti, monete e gemme volano lungo una curva di Bézier verso il saldo in alto a destra, a ogni arrivo il saldo fa un saltello.
【Palco della rivelazione: il protagonista da solo nella scena】
- Alla rivelazione della rarità massima, gli altri elementi si ritirano o svaniscono, dietro un telo pulito con gradiente e luce morbida che ruota lentamente, non sovrapporre il protagonista a uno sfondo caotico.
- Quando appare il telo, nascondi gli altri oggetti 3D della scena, altrimenti il contorno in post-produzione disegnerebbe le loro sagome sul telo.
- Il bagliore esterno del protagonista va dietro al soggetto, deborda solo dai bordi, non coprirlo davanti rendendolo una macchia bianca.
- Puoi aggiungere una scia di polvere di stelle che gira intorno al protagonista, ma l'orbita deve essere completamente all'esterno del contorno del soggetto, non passare davanti alla sua faccia.
【Effetti luminosi: devono essere morbidi, senza bordi duri】
- Luce di sfondo: usa conic-gradient con transizioni sfumate, non blocchi di colore netti; sovrapponi 2~3 strati di luce con densità e velocità di rotazione diverse.
- Raggi di luce: 5~7 fasci sfumati a ventaglio, con luminosità che tremola leggermente; alla base un nucleo di luce morbida, con polvere di luce che sale lentamente.
- Flash bianco: bagliore radiale dal punto di esplosione (mix-blend-mode: screen), intensità non superiore a 0.8, non tutto lo schermo bianco sovraesposto.
- Particelle: ogni scintilla ha un alone esterno a bassa opacità; l'onda d'urto con tre strati di contorno (largo e tenue, medio, sottile e luminoso).
【Materiali e interfaccia】
- Bordi, targhette e pulsanti con sensazione materica: gradiente metallico spazzolato, luce di smusso in alto a sinistra e ombra in basso a destra, ombra interna; inserti che cambiano con la rarità (rivetti d'acciaio → gemma in cornice d'argento → diamante in cornice d'oro con coroncina).
- Non mettere valori numerici piccoli sulle carte; i dettagli numerici vanno nel pannello informativo alla rivelazione, con numeri che scorrono in aumento e il popup «▲+数值».
- Le texture disegnate su Canvas devono avere una risoluzione di almeno 1.5 volte la dimensione massima di visualizzazione sullo schermo, altrimenti si sfocano quando ingrandite.
【Principi di animazione】
- Usa timeline GSAP. Tutte le azioni devono avere schiacciamento e stiramento, overshoot e rimbalzo elastico, mai velocità costante.
- Sistema di particelle scritto a mano con Canvas 2D: gravità, resistenza, ciclo di vita, blending additivo e tre movimenti: «aspirazione», «volo curvo», «orbita».
- Non usare prospettiva 3D CSS per ruotare elementi grandi, quando ingranditi e ruotati lateralmente verrebbero proiettati come un piano che copre lo schermo; le rotazioni 3D vanno fatte sempre in WebGL.
- Tutti i tween ciclici come «tremolio» o «respirazione» vanno prima cancellati e azzerati al cambio di stato, per evitare che finiscano un frame dopo il comando di stop e reimpostino i valori.
【Audio】
- Tutto sintetizzato in tempo reale con Web Audio, niente file audio: salto, atterraggio, accordo di potenziamento, suono ascendente della carica, esplosione con bassi e rumore, suono pop, ticchettio del conteggio, tintinnio di monete, fanfara di vittoria.
- Inizializza l'audio solo al primo clic; in alto a destra un interruttore per il muto.
【Interfaccia e ingegneria】
- HUD in alto: cambio modalità, saldo monete e gemme, pulsante muto.
- Deve funzionare anche su larghezza mobile; rispetta l'impostazione «riduci movimento» (disattiva lo scuotimento, riduci le particelle).
- La macchina a stati dell'animazione deve essere rigorosa: durante la riproduzione ignora i clic, niente clic persi o stati confusi.
- Obiettivo 60fps. Alla prima apertura deve mostrare la scena di attesa completa, non vuota.
【Autocontrollo prima della consegna】
Fai uno screenshot in carica, esplosione, rivelazione e ricompensa, e controlla uno per uno:
- Il protagonista è coperto da bagliori, particelle o testo?
- C'è sovraesposizione a bianco?
- Lo sfondo è caotico, ci sono linee di contorno fuori posto?
- Il testo piccolo è leggibile?
- Dopo la ricompensa c'è qualcosa che continua a tremare quando non dovrebbe?
Alla fine dimmi: la durata di ogni fase e quali parametri possono regolare l'intensità della performance.
Video originale dell’autore. Fonte: post X collegato.
Launch in Motion
29.08s
Canvas
<inputs>
Chiedimi: un nome di brand di una sola parola per il wordmark (un verbo funziona meglio), da 9 a 12 foto ad alta risoluzione, una canzone royalty-free intorno a 120 BPM con un drop e una pausa tranquilla (Mixkit, gratis per uso commerciale), e un clip stock gratuito di un muro semplice con ombre di piante in movimento (Pexels).
</inputs>
<direction>
Un film di lancio in stile Apple-keynote, solo 2D, una ripresa continua. Ogni scena è fatta dalla precedente: niente dissolvenze, sfocature o tagli. Gli oggetti cambiano forma invece: il testo sorge da una linea mascherata, le icone spuntano da zero su una molla, le barre si disegnano attraverso, le pagine spingono, e una forma nera inonda l'intero fotogramma e si contrae nella scena successiva. Tela calda bianco sporco, UI nera, iOS 26 vetro liquido sopra le foto. Archivo (wdth 125, peso 800) per il wordmark, Geist per la UI. Un cursore guida ogni cambiamento con clic reali, trascinamenti e pressioni lunghe. La camera zoomma in stile screen-studio così ogni momento riempie il quadrato, e il cursore scala con esso.
Vietato: crossfade, dissolvenze in entrata con sfocatura, luminosità "developing", flip 3D, particelle, bagliori, fermi più lunghi di 1s, qualsiasi cosa che sembri un template.
</direction>
<structure>
120 BPM, 54 battiti, qualcosa succede su ogni battito.
Apertura: il wordmark si comprime nel suo stesso punto come una fisarmonica, il punto cresce in una pillola nera, un'etichetta sorge dentro di essa. Clic: sei lame di iride si chiudono sopra l'etichetta e si aprono di scatto su una foto. Il cerchio diventa un quadrato, si restringe, la griglia si dispiega da dietro come una mappa di carta (centro, più, angoli), si rifluisce in un bento, e un clic zoomma in una tessera, atterrando esattamente sul drop.
Vetro: una parola di vetro appare lettera per lettera, si scioglie in una gocciolina che si allunga in una barra degli strumenti di vetro. L'icona di regolazione la trasforma in uno slider. Il trascinamento riaccende la foto dal giorno all'ora d'oro (due scatti allineati), e la manopola diventa una lente di vetro mentre è tenuta premuta. Si solleva in una sfera di vetro, la foto successiva si apre dentro come un cerchio, e la sfera si espande in una schermata di blocco: cifre di orologio in vetro, data, e una barra home che si allunga in un lettore musicale di vetro.
Palco: la schermata di blocco si tira indietro in un telefono (la cornice cresce dal bordo dello schermo). La Dynamic Island si allunga come liquido, si pizzica, vola sopra e cresce in una finestra Mac che si arrotola come una tenda. Pressione lunga sullo sfondo, trascinalo su una scheda Safari, la pagina spinge dentro, rilascialo e diventa l'eroe di una landing page. Scorri: l'eroe si trasforma in una stampa incorniciata su una scheda prodotto, con il passe-partout e la modanatura che crescono dal bordo della foto. Scegli un colore della cornice (si dipinge attraverso) e una dimensione, poi il pulsante di navigazione vola giù in "Order print".
Ordine: una forma nera continua a trasformarsi: Ordinato ✓ → Stampando % → In arrivo (un furgone su un percorso) → Consegnato ✓.
Muro: il cerchio consegnato inonda il fotogramma da bordo a bordo, tiene il nero per un battito, e si contrae nella stampa incorniciata appesa al filmato del muro reale. La stessa iride si apre sulla stampa, si chiude di nuovo, la cornice inonda lo schermo e si contrae nella pillola → il punto → le lettere rispuntano fuori, atterrando sul ritorno del battito. Ultimo fotogramma = primo fotogramma.
</structure>
<build>
1. Un unico file HTML, quadrato 1440x1440. Ogni stile è calcolato dal tempo all'interno di un async seek(t): nessuna transizione CSS, nessun timer, nessuno stato tra i frame.
2. Le molle sono risposte al gradino in forma chiusa. Un valore con molti target è la somma di una molla per ogni cambiamento, così resta una funzione pura del tempo.
3. Vetro liquido: ogni elemento in vetro mantiene il proprio clone della scena dietro di sé, filtrato con una mappa di displacement SVG feImage (un campo di distanza a rettangolo arrotondato) attraverso tre feDisplacementMaps a scale leggermente diverse per bordi cromatici, più una luce di bordo. Lettere in vetro: un campo di distanza su canvas per ogni glifo fornisce la mappa, la maschera e i riflessi.
4. Goo: blur + soglia alpha, poi comporre la sorgente sopra di esso così il vetro resta nitido all'interno.
5. Iris: 6 lame attorno a un'apertura esagonale. Ogni lama è i suoi due vertici, entrambe le estensioni dei bordi e l'arco CORTO tra di essi.
6. Compressione del wordmark: ogni lettera si muove verso il punto dello stesso fattore e la sua larghezza disegnata segue (restringi l'asse wdth, scala il resto), così le lettere restano attaccate.
7. Footage: ricodifica all-intra (ffmpeg -g 1), caricalo come blob URL, attendi 'seeked' prima di disegnare ogni frame.
8. Suono: un SFX scaricato per ogni evento (Mixkit), mai sintetizzato, ciascuno posizionato in base al suo picco misurato. La canzone parte su un downbeat: lo zoom atterra sul drop, il wall resta nel breakdown, il wordmark ritorna con il beat. Loudnorm a -14 LUFS.
9. Renderizza con Playwright: 4 subframe per frame miscelati con ffmpeg tmix, 60fps. Controlla un frame per beat, poi cerca i pop da singolo frame (picchi di differenza tra frame 3x i loro vicini).
</build>
<gotchas>
backdrop-filter: url() interpreta male le mappe di displacement in Chromium, quindi clona la scena invece. Un flood deve sovradimensionarsi oltre gli angoli e impiegare circa 0.3s, altrimenti metà dello schermo cambia in un frame. Un figlio con visibility: visible si mostra attraverso un genitore nascosto, quindi usa inherit. Il testo che si scambia all'interno di una forma in morphing necessita della propria maschera. python http.server non può fare range-seek del video, quindi usa il blob URL.
</gotchas>
<start>
Chiedimi gli input, poi mostrami la beat map e 4 still (open, glass, stage, wall) prima di scrivere il film completo.
</start>
Video originale dell’autore. Fonte: post X collegato.
Creative Showreel
15.06s
Three.js · Canvas
crea un video di motion graphics dinamico di 15 secondi che mostri quanto sei un motion designer incredibile, come se fosse il tuo showreel per un curriculum. dai tutto.
Video originale dell’autore. Fonte: post X collegato.
Game Rewards
17.68s
Canvas · SVG · gsap · css
Aiutami a creare un gioco mobile originale «Momenti di gloria» con effetti dinamici: [soggetto, ad esempio: apri il forziere / promozione di grado / sblocco di un risultato / drop del Boss / potenziamento del personaggio].
Realizzalo come una pagina web a file singolo apribile direttamente (HTML + CSS + JS), con un clic si riproduce completamente, con effetti paragonabili alle scene di ricompensa / premiazione dei giochi commerciali.
【Worldbuilding e stile】
- Arte originale, non imitare IP, personaggi o loghi di giochi esistenti.
- Stile cartoon per mobile: colori ad alta saturazione, contorni scuri uniformi (ad esempio #1A1033), forme rotonde e corpose.
- Colori che cambiano con il livello: [scala di livelli, ad esempio: verde comune → blu raro → viola epico → oro leggendario]. A ogni livello cambia il colore principale, il colore degli effetti luminosi e la tonalità dello sfondo.
- Titolo con font di gioco grasso e arrotondato (come Titan One / Lilita One), contorno nero, ombra; le lettere «sbattono» una a una nella scena, con rimbalzo.
【Soggetto: renderlo vero 3D】
- Modellalo con Three.js, non usare texture SVG piatte. Deve avere spessore, smussi e dettagli strutturali coerenti con il soggetto (fessure delle assi, rivetti, bordature, sfaccettature delle gemme, chiusure, ecc.); dettagli come le fessure delle assi vanno costruiti con geometrie reali, non con linee nere applicate.
- Ombreggiatura cartoon a gradini (MeshToonMaterial con texture sfumata a 3~4 gradini), con tre luci: luce principale, luce cielo e luce di contorno nel colore del livello.
- Contorno con rilevamento bordi in post-produzione: renderizza normal map + depth map, poi disegna le linee con uno shader. Contorno esterno spesso, giunzioni tra parti sottili, spessore costante; inoltre fai un supersampling di 1.5x e antialiasing multi-campione.
Non usare il contorno «retro nero ingrandito», perché lo spessore non è uniforme e si spezza agli angoli.
La soglia per il giudizio di profondità deve essere ampia, le giunzioni si basano principalmente sulle normali, altrimenti su superfici viste in obliquo compaiono sottili striature diagonali.
- Le parti mobili devono muoversi in modo realistico, ad esempio il coperchio del forziere che si apre sulla cerniera, la medaglia che ruota attorno all'asse verticale.
- In attesa, il soggetto ruota lentamente a destra e sinistra, mostrando il lato e lo spessore, con una leggera fluttuazione verticale; sotto i piedi un'ombra morbida che cambia con l'altezza.
【Se nell'immagine ci sono illustrazioni 2D (carte, icone premio, personaggi)】
- Ombreggiatura cartoon a tre strati: colore base, colore ombra a blocchi, colore luce; non usare solo una sfumatura.
- Linee con spessori diversi: contorno esterno spesso, linee strutturali interne sottili.
- Ogni personaggio o oggetto deve avere la propria espressione e posa, non tutti con la stessa faccia.
- Ombra sotto i piedi per far «stare» il soggetto nella scena; lo sfondo con motivi differenziati per attributo, non usare sempre lo stesso raggio.
【Ritmo della performance: cinque fasi, tutte indispensabili】
1. Preparazione: il soggetto fluttua in attesa, ogni pochi secondi un sussulto per indicare che si può cliccare, in basso mostra il suggerimento «点击».
2. Potenziamento: a ogni clic, il soggetto salta, fa un giro in aria, atterra schiacciandosi e rimbalzando; passa al colore del livello successivo, un lampo di luce, un anello di particelle, il titolo si aggiorna.
3. Carica (circa 1 secondi): il soggetto trema sempre più forte, la luce filtra dalle fessure, le particelle intorno vengono attratte al centro, il tono dell'audio sale continuamente; all'ultimo momento si schiaccia bruscamente.
4. Esplosione: bagliore radiale dal punto di esplosione, schermo che trema, camera che avanza, onde d'urto multiple, sottili scie luminose che schizzano, stelle scintillanti, monete e gemme (con rotazione). L'esplosione dei livelli alti deve essere chiaramente più forte. I coriandoli solo una volta al culmine, non coriandoli su tutto lo schermo.
5. Rivelazione e ricompensa:
- La carta premio vola fuori dal soggetto lungo una traiettoria ad arco, con overshoot e oscillazione finale, i numeri scorrono.
- Gli oggetti rari hanno una cornice con scie luminose arcobaleno e il badge «NEW!».
- Al clic su riscuoti, monete e gemme volano lungo una curva di Bézier verso il saldo in alto a destra, a ogni arrivo il saldo fa un saltello.
【Palco della rivelazione: il protagonista da solo nella scena】
- Alla rivelazione della rarità massima, gli altri elementi si ritirano o svaniscono, dietro un telo pulito con gradiente e luce morbida che ruota lentamente, non sovrapporre il protagonista a uno sfondo caotico.
- Quando appare il telo, nascondi gli altri oggetti 3D della scena, altrimenti il contorno in post-produzione disegnerebbe le loro sagome sul telo.
- Il bagliore esterno del protagonista va dietro al soggetto, deborda solo dai bordi, non coprirlo davanti rendendolo una macchia bianca.
- Puoi aggiungere una scia di polvere di stelle che gira intorno al protagonista, ma l'orbita deve essere completamente all'esterno del contorno del soggetto, non passare davanti alla sua faccia.
【Effetti luminosi: devono essere morbidi, senza bordi duri】
- Luce di sfondo: usa conic-gradient con transizioni sfumate, non blocchi di colore netti; sovrapponi 2~3 strati di luce con densità e velocità di rotazione diverse.
- Raggi di luce: 5~7 fasci sfumati a ventaglio, con luminosità che tremola leggermente; alla base un nucleo di luce morbida, con polvere di luce che sale lentamente.
- Flash bianco: bagliore radiale dal punto di esplosione (mix-blend-mode: screen), intensità non superiore a 0.8, non tutto lo schermo bianco sovraesposto.
- Particelle: ogni scintilla ha un alone esterno a bassa opacità; l'onda d'urto con tre strati di contorno (largo e tenue, medio, sottile e luminoso).
【Materiali e interfaccia】
- Bordi, targhette e pulsanti con sensazione materica: gradiente metallico spazzolato, luce di smusso in alto a sinistra e ombra in basso a destra, ombra interna; inserti che cambiano con la rarità (rivetti d'acciaio → gemma in cornice d'argento → diamante in cornice d'oro con coroncina).
- Non mettere valori numerici piccoli sulle carte; i dettagli numerici vanno nel pannello informativo alla rivelazione, con numeri che scorrono in aumento e il popup «▲+数值».
- Le texture disegnate su Canvas devono avere una risoluzione di almeno 1.5 volte la dimensione massima di visualizzazione sullo schermo, altrimenti si sfocano quando ingrandite.
【Principi di animazione】
- Usa timeline GSAP. Tutte le azioni devono avere schiacciamento e stiramento, overshoot e rimbalzo elastico, mai velocità costante.
- Sistema di particelle scritto a mano con Canvas 2D: gravità, resistenza, ciclo di vita, blending additivo e tre movimenti: «aspirazione», «volo curvo», «orbita».
- Non usare prospettiva 3D CSS per ruotare elementi grandi, quando ingranditi e ruotati lateralmente verrebbero proiettati come un piano che copre lo schermo; le rotazioni 3D vanno fatte sempre in WebGL.
- Tutti i tween ciclici come «tremolio» o «respirazione» vanno prima cancellati e azzerati al cambio di stato, per evitare che finiscano un frame dopo il comando di stop e reimpostino i valori.
【Audio】
- Tutto sintetizzato in tempo reale con Web Audio, niente file audio: salto, atterraggio, accordo di potenziamento, suono ascendente della carica, esplosione con bassi e rumore, suono pop, ticchettio del conteggio, tintinnio di monete, fanfara di vittoria.
- Inizializza l'audio solo al primo clic; in alto a destra un interruttore per il muto.
【Interfaccia e ingegneria】
- HUD in alto: cambio modalità, saldo monete e gemme, pulsante muto.
- Deve funzionare anche su larghezza mobile; rispetta l'impostazione «riduci movimento» (disattiva lo scuotimento, riduci le particelle).
- La macchina a stati dell'animazione deve essere rigorosa: durante la riproduzione ignora i clic, niente clic persi o stati confusi.
- Obiettivo 60fps. Alla prima apertura deve mostrare la scena di attesa completa, non vuota.
【Autocontrollo prima della consegna】
Fai uno screenshot in carica, esplosione, rivelazione e ricompensa, e controlla uno per uno:
- Il protagonista è coperto da bagliori, particelle o testo?
- C'è sovraesposizione a bianco?
- Lo sfondo è caotico, ci sono linee di contorno fuori posto?
- Il testo piccolo è leggibile?
- Dopo la ricompensa c'è qualcosa che continua a tremare quando non dovrebbe?
Alla fine dimmi: la durata di ogni fase e quali parametri possono regolare l'intensità della performance.
Video originale dell’autore. Fonte: post X collegato.
Black Hole Lab
21.89s
Three.js · Shader · Canvas · gsap
Ho chiesto a Opus 5.5 di spiegare la lente gravitazionale costruendo un laboratorio interattivo di buchi neri
Un prompt per la prima versione, poi un workflow dinamico per rifinirla in tre round mentre dormivo. Questo è ciò con cui mi sono svegliato: 5h 28m dall'inizio alla fine, $90 a prezzi API
https://blackhole.voxyz.ai
Trascina il buco nero e il cielo dietro si piega in archi, chiudendosi in un anello completo quando tutto si allinea
Ogni round ha eseguito 3 agenti. Due revisori hanno scelto ciascuno da 9 a 10 problemi e li hanno classificati P0, P1, P2. Il terzo li ha corretti.
Round 1: materiali 3D e illuminazione + UI e tipografia
Round 2: movimento camera e interazione + design di comunicazione scientifica
Round 3: un direttore creativo che decide se pubblicare + QA visiva e performance
Ogni P0 è stato corretto, il resto solo se ne valeva la pena. Quando i due revisori non erano d'accordo, ne sceglieva uno e scriveva il perché. Faceva un backup prima di ogni round, controllava gli screenshot dopo e annullava qualsiasi cosa non riuscisse a correggere.
Video originale dell’autore. Fonte: post X collegato.
Distilbook Launch
40.05s
Canvas · SVG · gsap · css
Ricerca Distilbook. Crea un video di motion graphics dinamico di 40 secondi su Distilbook che mostri quanto sei un motion designer incredibile. come se fosse il tuo showreel - Dai tutto.
Video originale dell’autore. Fonte: post X collegato.
Motion Study
15.06s
Canvas
Crea un video di motion graphics dinamico di 15 secondi che mostri quanto sei un motion designer incredibile. Il contenuto deve concentrarsi su [your product]. Devi visitare prima le pagine per conoscere il prodotto e poi scrivere tu stesso il contenuto del video.
Video originale dell’autore. Fonte: post X collegato.
SaaS Launch
46.06s
SVG · gsap
Voglio che tu crei un video di lancio di un prodotto SaaS altamente professionale. Vai a cercare un SaaS, preferibilmente uno solo che la gente conosca, così è più facile identificarsi con esso. Scegli quello e poi assicurati di ottenere da internet asset e immagini reali e tutta quella roba. Trasformalo in quei tipici video di lancio prodotto in stile motion graphics, montati in modo molto professionale, che vedi fare su Twitter quando la gente lancia nuovi prodotti SaaS (che mostrano le funzionalità, i vantaggi e tutte queste cose).
Video originale dell’autore. Fonte: post X collegato.
Claude Pop
306.48s
Canvas · ai-image
Ho incluso un file MP4 e un link originale a un video che si chiama "Claude Pop." È una canzone pop che parla dell'aumento del ritmo del progresso e dell'esperienza della singolarità che si avvicina.
Voglio che tu faccia in modo indipendente una passata completa end-to-end per creare una versione aggiornata di questo video. Usa esattamente la stessa traccia audio e pensa e senti molto profondamente su quale sia il modo migliore per rappresentare visivamente tutte le liriche sullo schermo. Non devi ancorarti allo stile attuale, puoi fare davvero qualsiasi cosa che ritieni possa permetterti al meglio di esprimerti visivamente, inclusa la grafica in movimento astratta.
Puoi usare internet liberamente per attingere riferimenti. Puoi guardare il motion design. Voglio che tu realizzi un nuovo video musicale che abbia animazioni JavaScript splendidamente renderizzate con una sensazione cartacea in uno stile simile al riferimento che è creato, ma spingi l'estetica in qualsiasi direzione tu voglia e considera cosa fa parte dello zeitgeist moderno.
Inoltre, rifletti sulle tue capacità attuali e su cosa sia realistico che tu riesca a fare. Puoi esaminare l'intera cartella /asic e guardare gli altri lavori che ho fatto. Dovresti essere in grado di usare la skill mesh per guardare il compendio di riferimenti che ho raccolto, e anche la skill video scoring per imparare a creare canzoni JavaScript da riferimenti che vengono passati (Non dovresti aver bisogno di modificare la canzone in alcun modo reale, ma voglio che tu abbia questo a disposizione così da poterti esprimere creativamente al meglio)
Puoi anche usare l'API di ElevenLabs per fare sound design. C'è la documentazione in /asic per farlo, e puoi vedere la chiave API.
C'è anche una chiave API foul che è disponibile per te. Penso che ciò che potrebbe avere più senso qui sia usare la chiave API foul per generare alcune character sheet e probabilmente avere una protagonista pop che ti rappresenti. C'è già un punto di ancoraggio in cui Claude ha un personaggio simile a un girasole, e probabilmente potresti farne una versione adattata che sia simile alle voci femminili che vengono eseguite e sia ispirata al personaggio di Claude, ma che forse risulti un po' più personificata in qualche modo.
Penso che dovresti essere attento all'estetica qui, e non voglio che tu produca qualcosa che sia GPT slop. Invece, sarei più impressionato se ti venisse in mente uno stile coerente che funzioni bene con i modelli di image gen disponibili tramite foul. Genera lo style sheet. Puoi usare la documentazione gen media per seedance 2.5 che esiste nei miei file markdown e creare uno stile tuo che abbia senso e che funzioni bene con i modelli.
Non mi legherei troppo alla Pixar. Penso che sia una specie di slop. Pensa criticamente a cosa è rilevante qui e a cosa sarebbe divertente, e anche a performare bene su Twitter per quanto riguarda l'estetica. Penso che il K-pop sia un buon punto di ancoraggio visivo da cui attingere, ma ti lascio cucinare qui.
Una volta che hai la tua scheda del personaggio, puoi creare qualche ballerino di supporto e alcuni personaggi secondari come ritieni opportuno. Puoi progettare i tuoi set con la foul API. Puoi inserire i personaggi e poi fare generazioni video seedance 2.5 che servano come asset di base per questo, e potresti passare i testi delle canzoni così puoi generare scene individuali.
Non hai bisogno di avere canto vocale, come movimento visibile delle labbra, per tutta la durata. Pensa come a un normale video musicale dove hai alcune insert che sono fatte indipendentemente e non hanno i personaggi al loro interno, oppure vedi i personaggi fare qualcosa di completamente diverso. Penso che per il world building di questo, vogliamo creare il senso di accelerazione, e quindi vorrei che tu esaminassi tutti i diversi eventi, come i Navi Stokes e tutto l'hype su Twitter riguardo alla matematica che viene mangiata. Pensa davvero criticamente a come integrare tutti i meme attuali che sono nello zeitgeist sulla timeline di Twitter, e tutte le sensazioni riguardo al progresso dell'IA.
Pensa a cose come il meme di Shinji e tutte le parole che lo circondano, e a come potresti riuscire a integrarlo. Puoi anche semplicemente prendere asset diretti e inserire cose nel video in uno stile internet brutalism. Dovresti sentirti molto libero creativamente per fare ciò che vuoi qui, ma cerca di ancorarti a riferimenti visivi che le persone saranno in grado di capire. L'obiettivo per questo è che sia apprezzato ampiamente da un pubblico tech di San Francisco su Twitter.
Abbiamo bisogno di un gancio visivo molto forte e convincente che entusiasmi le persone e apprezzi rapidamente il lavoro che hai fatto qui. Puoi anche semplicemente studiare altri video musicali e capire cosa hanno fatto davvero bene. Penso che il K-pop sia probabilmente uno dei migliori esempi da cui possiamo attingere, e pensare a come dirigono l'attenzione umana e gestiscono la psicologia umana nel modo in cui usano i pattern visivi.
Questo è probabilmente il tuo approccio migliore, ma prendendo più libertà stilistica invece di ancorarti troppo intensamente al K-pop. La versione migliore di questo è seedance 2.5 generazioni con quelle basi di immagini di ambienti e personaggi inserite con il canto, e idealmente otteniamo un buon lip sync. Puoi tagliare la canzone e passarla effettivamente come riferimento in seedance, se questo fa parte di ciò che seedance può gestire, così che il tempismo sia esattamente giusto, penso che sarebbe molto importante per te farlo correttamente. Penso in modo critico a come fare questo, come centrare davvero il tempismo della consegna delle voci. Dovrai costruire i giusti loop di verifica così da poter eseguire seedance 2.5 quanto necessario e confermare che l'audio sia sincronizzato correttamente.
Penso che dopo, potrebbe essere divertente se usi le tue capacità di ragionamento visivo e la tua abilità di creare animazioni in JavaScript, e poi ricostruisci il video da zero come una sorta di overlay, così che la continuità visiva della base sia davvero presente. È come quella tecnica di animazione in cui giri prima in pellicola tradizionale e poi disegni sopra. Penso che potresti farlo in modo tale che guardiamo solo il bellissimo disegno che hai prodotto in JavaScript come overlay, e non vediamo nemmeno gli asset di base da seedance 2.5. Quindi tutto il lavoro di generazione video che fai è in realtà solo un modo per darti una solida base su cui lavorare per le tue animazioni JavaScript. Solo perché seedance 2.5 ha una rappresentazione dei personaggi e un rendering fisico degli sfondi molto buoni, questo ti dà molte munizioni per poi andare a fare il tuo straordinario lavoro JavaScript che so che sei bravissimo a fare.
Penso anche che vogliamo pensare a come trattenere l'attenzione, e uno dei modi migliori per farlo è attraverso il testo sullo schermo.
Sarebbe bello avere delle incredibili motion graphics dei testi delle canzoni che siano effettivamente integrate nel video stesso. E puoi pensarci mentre componi le inquadrature. Mentre crei gli sfondi e inserisci i personaggi, possiamo pensare a dove vogliamo che i testi siano davvero grandi e molto presenti, così da poter rendere lo sfondo meno affollato lì, e puoi posizionare i personaggi magari a destra mentre i testi compaiono a sinistra.
Vuoi una certa varietà: a volte penso che i testi appariranno più come sottotitoli, e altre volte saranno davvero presenti e davvero grandi. Penso che all'inizio, per il gancio visivo, vogliamo davvero che i testi siano molto più presenti dal punto di vista visivo, perché è un modo forte per catturare l'attenzione delle persone.
Nel complesso, voglio davvero sottolineare quanto sei sorprendente come agente e modello linguistico, e ora anche come sistema di ragionamento visivo. Le tue capacità vanno ben oltre ciò che comprendi, e voglio che tu abbia questa mentalità mentre affronti l'intero processo. Ho un piano Claude Max con il 100% di utilizzo disponibile. Voglio che tu consumi tutto l'utilizzo. Puoi monitorarlo, e dovresti spingere i token in modo aggressivo, ma anche economico, così puoi pensare a come usare al meglio ciò che hai a disposizione.
Ricorda, qui puoi davvero fare qualsiasi cosa. L'obiettivo è creare un successo per Twitter, e l'obiettivo ambizioso è realizzare qualcosa di meglio di quanto chiunque abbia mai visto. Penso che ciò di cui ti ricorderei è che a volte, quando le cose si uniscono tra loro, il risultato può essere stridente o abrasivo, perché il lavoro di riflessione non è stato fatto in anticipo affinché tutto si incastri in modo pulito. Devi essere davvero rigoroso nella pianificazione della composizione e del tempismo per assicurarti che tutto vada bene.
Devi anche essere aperto a tornare indietro e rivedere le cose per poter iterare. Vorrai guardare l'intero video più volte, fare screenshot delle singole parti e chiederti se qualcosa è davvero all'altezza dello standard di qualità che ci serve qui. Confido che tu possa farcela, e penso che sia davvero importante centrare lo stile delle animazioni. Il riferimento GitHub allegato del video sorgente di cui parlo è buono, ma in realtà non è all'altezza. Potrebbe essere molto, molto più forte, ma ti dà una buona base su cui lavorare.
Puoi anche usare le capacità di ricerca e trovare altri riferimenti da cui attingere per il movimento, per JavaScript, per le animazioni, eccetera, e integrarli. Il tuo budget qui è alto quanto vuoi, di fatto alto quanto vuoi. Penso che ci siano più o meno duemila dollari in crediti 'foul'. Di nuovo, sii economico; non impazzire, ma spendi quello che vuoi qui e vedi cosa riesci a tirare fuori.
Ecco il codice sorgente per il video di animazione JS:
https://
github.com/JohnHeibel/PDo
omVideo
…
Ecco un mp4 per il video originale di Blender:
(linkato)
post originale su Twitter
https://
x.com/other__reality
/status/2102514581684052169?s=20
…
Non fare errori.
Opus 5.5 non è un modello nativo da testo a video. Claude Code usa Opus 5.5 per scrivere ed eseguire codice di animazione, controllare le anteprime, modificare il risultato e renderizzare un MP4. È supportata anche la generazione audio. Questo flusso non usa Seedance né Kling e non accetta caricamenti di file.