Film promotionnel Tripo 3D réalisé avec Claude Opus 5

1. Objectif du projet Créer un court métrage animé interactif d’environ 44 secondes, intitulé « Claude × Tripo ». Une petite étincelle orange représentant Claude atterrit sur un bureau en papier fait main, esquisse ou saisit au clavier cinq idées fantaisistes sur un ordinateur portable portant la marque Tripo, puis rencontre les créations lorsqu’elles prennent vie. Le visiteur peut regarder, mettre en pause, parcourir la timeline, revoir l’animation, changer de format, activer le son ou enregistrer l’animation. Il s’agit d’un court métrage chorégraphié, sans musique de score, combat ni condition de victoire. Reproduire la vidéo fournie et la composition de la scène. 2. Style visuel Utiliser un diorama en papier découpé multicouche, avec bords crème déchirés, grain de gouache, gribouillis, détails de papier quadrillé et ciel bleu nuit. Disposer en arrière-plan une lune en croissant, des étoiles jaune chaud, des collines en papier bleu et une petite ville derrière un bureau en papier kraft. Placer l’ordinateur portable ouvert à gauche, Claude près du centre et une petite plateforme circulaire de présentation à droite. Conserver des touches orange chaud, lilas, menthe, jaune beurre et crème. La caméra en perspective se déplace doucement entre plans larges et gros plans ; des silhouettes plates séparées en profondeur créent un effet de parallaxe. Utiliser un éclairage cartoon par paliers, une lumière de liseré froide, des contours discrets, des ombres douces et une passe finale de grain de papier/vignettage. Terminer par un flash blanc et un polaroïd légèrement incliné, fixé avec du ruban adhésif, représentant toute la distribution. Reproduire le cadrage de référence à l’ouverture, lors de la révélation de chaque création et pour le final de groupe. 3. Scène et récit Piloter chaque pose et chaque mouvement de caméra depuis une unique fonction déterministe update(t), afin qu’un accès direct à n’importe quel timestamp produise la bonne image sans rejouer les images précédentes. Nommer les temps forts du récit dans un planning partagé. Claude arrive vers 0,55 seconde, atterrit vers 1,7 seconde et réveille l’ordinateur portable à 2,92 secondes. Révéler le chat-pain vers 7,2 secondes, la maison-escargot vers 13,85 secondes, la fusée-grille-pain vers 19,8 secondes, la pieuvre-théière vers 26,1 secondes et la baleine céleste vers 33,3 secondes. La fusée décolle vers 21,25 secondes et revient vers 24,05 secondes. La baleine nage au-dessus du groupe vers 35–37 secondes. Le flash de l’appareil photo se déclenche à 40,5 secondes ; terminer à 44,2 secondes. Mélanger les plans de caméra et utiliser une anticipation progressive, un dépassement élastique, des effets d’écrasement/étirement, de petits bonds et des oscillations amorties. Éviter les réinitialisations abruptes lors des transitions entre les scènes. 4. Liste des assets - claude-spark : une étincelle orange plate à douze rayons, avec bord crème déchiré et visage animé sympathique. Elle cligne des yeux, regarde l’action en cours, sourit, rougit et adopte des yeux joyeux, étourdis ou scintillants. Deux rayons s’étirent pour former des bras qui atteignent les touches, les dessins et les autres personnages. Préserver son visage et le comportement de ses bras sous forme de shader procédural ; un export statique ne restitue ni l’identité ni le jeu de ce personnage. - cat : un chat en forme de miche de pain dorée, au corps arrondi, avec marques de croûte cuite, petites oreilles, pattes, queue, yeux brillants, joues roses et moustaches. Il apparaît sur la plateforme de présentation, pivote pour être inspecté, reçoit une caresse puis s’installe à l’avant du bureau. - snail : un escargot vert pâle portant une maison crème au toit corail, avec cheminée, fenêtres lumineuses et minière jardinière. Garder ses pédoncules oculaires distincts, la maison droite et le visage visible pendant le soulèvement et le déplacement. - toaster : un grille-pain menthe aux finitions et au levier corail, avec détails crème arrondis, petites ailettes de fusée et tuyère sous le châssis. Il décolle avec une flamme orange, des traînées de bouffées et un son de passage devant la caméra, puis revient. La flamme et la fumée restent des effets distincts. - octopus : une créature en forme de théière rose/lilas, avec six tentacules souples, un bec verseur et une anse, un visage joyeux, un monocle doré et un nœud papillon violet. Animer les tentacules, un geste de bascule et une petite marche. Les poses des tentacules doivent rester distinctes du corps rigide de la théière. - whale : une baleine céleste bleue au ventre crème, avec nageoires et visage expressif, portant une ville miniature verdoyante, des maisonnettes colorées, des arbres et un phare rayé. C’est la plus grande création ; elle doit rester bien visible dans le final. Le faisceau du phare est un effet transparent distinct. - environment : bureau, ordinateur portable, lampe, pot à crayons, plante en pot, plateforme de présentation, couches de ciel et de ville en papier, notes et crayon. Réutiliser ces éléments tout au long de l’animation. Les arrière-plans en papier, l’interface de l’ordinateur portable, les doodles, les particules, la fumée, les faisceaux lumineux et le post-traitement restent procéduraux. Conserver des identifiants d’assets stables et des transformations distinctes pour le placement dans le monde, la rotation/l’écrasement et les parties articulées. Préserver les proportions et les couleurs du projet source. Les versions GLB portables peuvent utiliser des matériaux standard et une pose statique ; ne pas prétendre qu’elles incluent le shader de révélation personnalisé, le jeu des personnages ou l’animation complète. 5. Interaction et retours Fournir des commandes de lecture/pause, de relecture, un curseur de navigation avec le temps écoulé et la durée totale, les formats 1:1 / 16:9 / 9:16, un bouton de son, une vue épurée et l’enregistrement. La barre d’espace active ou désactive la lecture ; R relance l’animation ; H ou C active ou désactive la vue épurée ; Échap rétablit les commandes ; M active ou désactive le son ; les flèches gauche/droite avancent ou reculent d’une seconde, et Maj réduit le pas à 0,1 seconde. Les commandes doivent rester utilisables sur un écran tactile étroit. Le son ne doit démarrer qu’après un geste de l’utilisateur ; proposer « Lire avec le son » lorsque la lecture audio automatique est bloquée. La navigation dans la timeline et la relecture doivent redémarrer le son au bon moment. À la fin, arrêter la lecture et proposer de revoir l’animation. L’ordinateur portable affiche le dessin ou l’idée saisie en cours, une barre de progression animée et une marque de fin. L’action Générer à l’écran fait partie de l’animation conçue : le court métrage existant utilise une géométrie procédurale et n’appelle pas d’API de génération de modèle. Révéler chaque création de bas en haut, d’abord sous forme d’argile lilas, puis appliquer ses couleurs avec une bande de balayage lumineuse et chaude. Synchroniser le regard et les bras de Claude avec ces événements. 6. Implémentation technique et audio Utiliser des modules JavaScript ES et Three.js r170 avec WebGL, des shaders personnalisés, CanvasTexture et l’API Web Audio. Regrouper l’application et les polices sous forme de ressources statiques de même origine, avec un build reproductible ; aucun CDN à l’exécution ni identifiant privé de service. Utiliser Fredoka en local pour les commandes et Caveat pour le texte manuscrit. Adapter la distance de caméra et la taille du rendu aux trois formats, limiter la densité de pixels excessive et exclure les exports des requêtes réseau initiales de la page. Synthétiser la musique et les effets avec Web Audio. Utiliser une voix FM de boîte à musique, une basse en triangle filtré pincé, un marimba, un pad doux désaccordé, une grosse caisse, un clap/shaker, une réverbération générée et une compression finale. Aligner le début de la mesure sur le réveil de l’ordinateur portable à 2,92 secondes et la mesure seize sur le flash à 40,5 secondes, pour obtenir environ 102 BPM ; faire tourner la progression Fa–Ré mineur–Si bémol–Do. Ajouter des effets de crayon, clavier, whoosh, pop, boing, chat, baleine, fusée et obturateur aux temps forts nommés du récit. Panorer et modeler le moteur de la fusée selon son mouvement relatif à la caméra. Rendre la bande-son par petites tranches hors ligne et les assembler en un seul buffer ; l’horloge audio active pilote l’image, avec une solution de secours en cas de blocage. L’enregistrement doit combiner la vidéo du canvas et la bande-son, puis exporter dans un format pris en charge par le navigateur. Ne pas dépendre du serveur local Python optionnel de capture du projet source pour la lecture normale ou l’enregistrement dans le navigateur. 7. Critères de validation Fournir le code source modifiable, des dépendances figées, un build statique, des instructions de démarrage et le court métrage utilisable. Vérifier la navigation directe vers environ 8, 15, 22, 28, 36 et 41 secondes ; la relecture et la pause doivent préserver un état déterministe. Comparer la composition du groupe avec la vidéo de référence. Confirmer l’activation audio, la coupure du son, la synchronisation de la relecture et le téléchargement réel d’un enregistrement contenant les deux pistes. Vérifier le cadrage carré, paysage et portrait, ainsi que les commandes sur ordinateur et écran étroit. Valider la page hébergée dans l’iframe isolée du site parent, sans polices manquantes, scripts bloqués ni erreurs liées aux ressources externes. Vérifier séparément les GLB réutilisables pour la géométrie, l’orientation, les matériaux et la boîte englobante ; leurs aperçus doivent représenter les fichiers réels. Documenter toute différence entre les assets portables et la version animée avec shader.