Film promozionale di Tripo 3D realizzato con Claude Opus 5

1. Obiettivo del progetto Realizza un corto animato interattivo di circa 44 secondi, intitolato “Claude × Tripo”. Una piccola scintilla arancione di Claude atterra su una scrivania di carta realizzata a mano, disegna o digita cinque idee giocose su un laptop con il marchio Tripo e incontra le creazioni mentre prendono vita. Il visitatore può guardare, mettere in pausa, scorrere la timeline, riprodurre di nuovo, cambiare le proporzioni, attivare l'audio o registrare l'animazione. Si tratta di un corto coreografato, senza punteggio, combattimenti o condizioni di vittoria. Riproduci il video fornito e la composizione della scena. 2. Stile visivo Usa un diorama a strati in stile carta ritagliata, con bordi color crema strappati, grana da gouache, scarabocchi, dettagli a quadretti e un cielo blu notte. Disponi una luna crescente, stelle giallo caldo, colline di carta blu e una cittadina dietro una scrivania di carta kraft. Posiziona il laptop aperto a sinistra, Claude vicino al centro e una piccola piattaforma circolare da esposizione a destra. Mantieni accenti arancione caldo, lilla, menta, giallo burro e crema. La camera prospettica si muove delicatamente tra inquadrature ampie e primi piani; sagome piatte separate in profondità creano la parallasse. Usa un'illuminazione cartoon a gradini, una luce fredda di contorno, contorni discreti, ombre morbide e un passaggio finale di grana della carta e vignettatura. Concludi con un flash bianco e una polaroid leggermente inclinata e fissata con nastro adesivo, che mostri l'intero cast. Corrispondi all'inquadratura di riferimento all'apertura, a ogni rivelazione delle creazioni e nel finale corale. 3. Scena e storia Gestisci ogni posa e movimento della camera tramite un unico update(t) deterministico, in modo che portarsi direttamente a qualsiasi timestamp produca il fotogramma corretto senza riprodurre quelli precedenti. Definisci i momenti narrativi in un'unica timeline condivisa. Claude arriva intorno a 0,55 secondi, atterra intorno a 1,7 secondi e attiva il laptop a 2,92 secondi. Rivela il gatto-pane intorno a 7,2 secondi, la casetta-lumaca intorno a 13,85 secondi, il razzo-tostapane intorno a 19,8 secondi, il polpo-teiera intorno a 26,1 secondi e la balena del cielo intorno a 33,3 secondi. Il razzo decolla intorno a 21,25 secondi e torna intorno a 24,05 secondi. La balena nuota sopra il gruppo intorno ai 35–37 secondi. Il flash della camera avviene a 40,5 secondi; termina a 44,2 secondi. Fai sfumare le inquadrature e usa anticipazioni con easing, overshoot elastico, squash/stretch, piccoli saltelli e oscillazioni smorzate. Evita reset bruschi nei passaggi tra le scene. 4. Elenco degli asset - claude-spark: una scintilla arancione piatta a dodici raggi, con bordo strappato color crema e un volto animato amichevole. Deve sbattere le palpebre, guardare l'azione del momento, sorridere, arrossire e usare occhi felici, storditi e scintillanti. Due raggi si allungano trasformandosi in braccia che raggiungono tasti, disegni e altri personaggi. Mantieni il volto e il comportamento delle braccia come shader procedurale; un export statico non riproduce l'identità né la recitazione di questo personaggio. - cat: un gatto a forma di pagnotta dorata, con corpo arrotondato, segni di crosta cotta, orecchie piccole, zampe, coda, occhi lucidi, guance rosa e baffi. Appare sulla piattaforma da esposizione, ruota per essere osservato, riceve una carezza e si sistema davanti alla scrivania. - snail: una lumaca verde pallido che trasporta una casetta color crema, con tetto corallo, camino, finestre luminose e una piccola fioriera. Mantieni distinti i suoi tentacoli oculari, la casa dritta e il volto visibile durante il sollevamento e lo scorrimento. - toaster: un tostapane color menta con finiture e leva corallo, dettagli arrotondati color crema, piccole pinne da razzo e un ugello inferiore. Decolla con una fiamma arancione, scie di sbuffi e un effetto sonoro di passaggio davanti alla camera, poi torna indietro. Fiamma e fumo devono restare effetti separati. - octopus: una creatura a forma di teiera rosa/lilla, con sei tentacoli flessibili, beccuccio e manico, volto allegro, monocolo dorato e papillon viola. Anima i tentacoli, un gesto di inclinazione e una breve camminata. Mantieni la posa dei tentacoli distinta dal corpo rigido della teiera. - whale: una balena del cielo blu, con ventre color crema, pinne e volto espressivo, che trasporta una cittadina in miniatura ricca di vegetazione, casette colorate, alberi e un faro a strisce. È la creazione più grande e deve restare ben visibile nel finale. Il fascio di luce del faro è un effetto trasparente separato. - environment: scrivania, laptop, lampada, portamatite, pianta in vaso, piattaforma da esposizione, strati di cielo e cittadina di carta, appunti e matita. Riutilizza questi elementi per tutta l'animazione. Gli sfondi di carta, l'interfaccia del laptop, gli scarabocchi, le particelle, il fumo, i fasci di luce e il post-processing devono restare procedurali. Mantieni stabili gli identificatori degli asset e separa le trasformazioni per il posizionamento nel mondo, la rotazione/schiacciamento e le parti articolate. Conserva le proporzioni e i colori del progetto originale. Le versioni GLB portabili possono usare materiali standard e una posa statica; non dichiarare che includano lo shader di rivelazione personalizzato, la recitazione o l'animazione completa. 5. Interazione e feedback Fornisci play/pausa, riproduzione daccapo, uno slider di scorrimento con tempo trascorso/totale, opzioni di formato 1:1 / 16:9 / 9:16, un interruttore per l'audio, una vista pulita e la registrazione. La barra spaziatrice attiva o disattiva la riproduzione; R riproduce daccapo; H o C attiva o disattiva la vista pulita; Esc ripristina i controlli; M attiva o disattiva l'audio; le frecce sinistra/destra spostano la riproduzione di un secondo e Shift riduce l'incremento a 0,1 secondi. Rendi i controlli utilizzabili su uno schermo touch stretto. L'audio deve iniziare solo dopo un gesto dell'utente; quando l'audio in autoplay è bloccato, offri “Riproduci con audio”. Lo scorrimento e la riproduzione daccapo devono riavviare l'audio dal momento corretto. Alla fine, interrompi la riproduzione e offri la possibilità di ricominciare. Il laptop mostra il disegno o l'idea digitata del momento, una barra di avanzamento animata e un segno di completamento. L'azione Genera visualizzata sullo schermo fa parte dell'animazione realizzata: il corto esistente usa geometria procedurale e non chiama un'API di generazione dei modelli. Rivela ogni creazione dal basso verso l'alto, inizialmente come argilla lilla, poi colorala con una banda di scansione luminosa e calda. Coordina lo sguardo e le braccia di Claude con questi eventi. 6. Implementazione tecnica e audio Usa moduli JavaScript ES e Three.js r170 con WebGL, shader personalizzati, CanvasTexture e Web Audio API. Includi applicazione e font come risorse statiche same-origin con una build riproducibile; nessuna CDN a runtime né credenziali per servizi privati. Usa Fredoka locale per i controlli e Caveat per il testo scritto a mano. Adatta la distanza della camera e le dimensioni di rendering a tutti e tre i formati, limita una densità di pixel eccessiva e mantieni gli export fuori dalle richieste di rete iniziali della pagina. Sintetizza musica ed effetti in Web Audio. Usa una voce FM da carillon, un basso a triangolare filtrato e pizzicato, marimba, pad morbido e leggermente stonato, kick, clap/shaker, riverbero generato e compressione finale. Allinea l'inizio della battuta con l'attivazione del laptop a 2,92 secondi e la battuta sedici con il flash a 40,5 secondi, per circa 102 BPM; alterna F–Dm–B♭–C. Aggiungi effetti di matita, tastiera, whoosh, pop, boing, gatto, balena, razzo e otturatore nei momenti narrativi indicati. Regola il panning e la forma sonora del motore del razzo in base al suo movimento relativo alla camera. Renderizza la colonna sonora in piccoli segmenti offline e assembla un unico buffer; il clock audio attivo guida l'immagine, con un fallback nel caso si blocchi. La registrazione deve combinare il video del canvas con la colonna sonora ed esportare un formato supportato dal browser. Per la riproduzione normale o la registrazione nel browser, non dipendere dal server Python locale opzionale di acquisizione del progetto originale. 7. Criteri di completamento Fornisci il codice sorgente modificabile, dipendenze bloccate, una build statica, istruzioni di avvio e il corto funzionante. Verifica lo scorrimento diretto vicino a 8, 15, 22, 28, 36 e 41 secondi; la riproduzione daccapo e la pausa devono preservare lo stato deterministico. Confronta la composizione corale con il video di riferimento. Conferma lo sblocco dell'audio, il silenziamento, la sincronizzazione della riproduzione daccapo e un download di registrazione effettivo con entrambe le tracce. Controlla l'inquadratura quadrata, orizzontale e verticale, oltre ai controlli su desktop e su schermi stretti. Convalida la pagina pubblicata all'interno dell'iframe isolato del sito principale, senza font mancanti, script bloccati o errori relativi a risorse esterne. Verifica autonomamente i GLB riutilizzabili per geometria, orientamento, materiali e bounding box; le relative copertine devono raffigurare i file reali. Documenta ogni differenza tra gli asset portabili e la versione con shader animato.