Créer des vidéos avec Opus 5.5 : exemples et prompts
Avec Claude Code et Opus 5.5 Thinking High, transformez un prompt en MP4 rendu par du code. Découvrez des vidéos originales, testez des prompts, prévisualisez les modifications et téléchargez le résultat.
Décrivez votre idée et générez un MP4 directement sur cette page.
crée une vidéo motion graphics dynamique de 15 secondes qui montre à quel point tu es un motion designer incroyable, comme s'il s'agissait de ta showreel pour un CV.lâche-toi complètement.
Vidéo originale du créateur. Source : publication X liée.
Raptor 3 Engine
34.7s
Three.js · Shader
J'ai demandé à Claude Opus 5.5 d'expliquer comment fonctionne un moteur de fusée en construisant un Raptor 3 interactif que vous pouvez démonter dans votre navigateur.
Ouvrez-le, suivez l'oxygène et le méthane à travers les deux turbopompes, puis réduisez les gaz et regardez les diamants de choc se déplacer.
http://airsup.ai/rocket-engine
Vidéo originale du créateur. Source : publication X liée.
Shape to Interface
14.06s
SVG
<inputs>
Demandez-moi : 8 à 12 états d'interface utilisateur dans lesquels je veux que la forme devienne (par exemple, bouton, chargeur, lecteur, curseur, bascule, onglets, graphique, palette de commandes, toast), noir et blanc pur ou une couleur d'accent, et une chanson libre de droits autour de 120 BPM (par exemple, Mixkit, libre pour usage commercial).
</inputs>
<direction>
Mouvement d'interface utilisateur de niveau Dribbble. Une seule forme, jamais coupée : chaque état est le même élément qui morph sa taille, son rayon et sa couleur tandis que son contenu change avec un flou court. Un curseur pilote chaque changement avec de vrais clics et glissements. Toile gris clair chaud, composants noir et blanc, une police d'interface propre (Geist). Des ressorts partout, un léger dépassement au plus. La caméra zoome pour que chaque état remplisse le cadre. La dernière image est la première image, donc ça boucle.
Interdit : easing rebondissant, explosions de particules, lueurs, dégradés sur le chrome de l'interface, traits d'icônes incompatibles, temps mort, tout ce qui ressemble à un modèle.
</direction>
<structure>
120 BPM, 7 mesures, quelque chose se passe à chaque battement.
Bouton → chargeur → coche → île dynamique → lecteur de musique avec un morph play/pause → faites glisser la barre de progression → elle devient un curseur de volume qui s'étire lorsqu'il est glissé au-delà du max → une bascule s'active sur le battement → le bouton devient un indicateur d'onglet liquide → les onglets s'ouvrent en un graphique qui se dessine, avec une infobulle au survol → il se replie en ⌘K → tapez pour filtrer → entrée → toast → retour au bouton.
</structure>
<build>
1. Un fichier HTML, carré 1440x1440. Chaque style est calculé à partir du temps dans seek(t) : pas de transitions CSS, pas de minuteries, pas d'état porté entre les images.
2. Les ressorts sont des réponses en pas de forme fermée. Une valeur qui change de cible plusieurs fois est la somme d'un ressort par changement, donc elle reste une fonction pure du temps.
3. Les deux bords de l'indicateur d'onglet roulent sur des ressorts différents, donc le bord avant s'étire devant le bord arrière. Même astuce pour le bouton de bascule.
4. Les glissements sont une manipulation directe : pendant que le curseur est maintenu, la valeur est calculée à partir de sa position. Au relâchement, il revient en ressort depuis où il était.
5. Analysez la chanson avec numpy pour la grille de battements et commencez sur un temps fort. Placez chaque son d'interface par son pic mesuré.
6. Rendu avec Playwright : 4 sous-images par image, mélangées avec ffmpeg tmix pour le flou de mouvement à 60fps.
7. Rendu d'une image par battement avant le rendu complet. Corrigez tout ce qui est hors grille, serré ou difficile à lire.
</build>
<gotchas>
Ne mettez jamais will-change sur quoi que ce soit que la caméra met à l'échelle ou le texte rend flou. Le texte qui change dans un conteneur en morphing a besoin de son propre timing d'entrée et de sortie ou il se chevauche. Rendez la dernière image identique à la première, position et vitesse du curseur incluses, ou la boucle bégaye.
</gotchas>
<start>
Demandez-moi les entrées, puis montrez-moi la liste des états sur la grille de battements avant d'écrire du code.
</start>
Vidéo originale du créateur. Source : publication X liée.
Motion Design
15.06s
Canvas
crée une vidéo motion graphics dynamique de 15 secondes qui montre à quel point tu es un motion designer incroyable, comme s'il s'agissait de ta showreel pour un CV.lâche-toi complètement.
Vidéo originale du créateur. Source : publication X liée.
One-Prompt Showreel
15.06s
Shader · Canvas
crée une vidéo motion graphics dynamique de 15 secondes qui montre à quel point tu es un motion designer incroyable, comme s'il s'agissait de ta showreel pour un CV.lâche-toi complètement.
Vidéo originale du créateur. Source : publication X liée.
Pixel Wizard
11.29s
Canvas
Créez un fichier HTML autonome qui rend un sorcier en pixel art animé lançant un sort, en utilisant du JavaScript vanilla et Canvas 2D. Aucune ressource externe, bibliothèque ou requête réseau.
RENDU
- Dessinez tout sur un canvas hors écran à une résolution logique fixe de 128x96, puis copiez-le sur un canvas d'affichage plein écran mis à l'échelle par le plus grand facteur entier qui tient dans la fenêtre, centré, avec imageSmoothingEnabled = false et CSS image-rendering: pixelated.
- Tout dessin est aligné sur des coordonnées entières sur le canvas logique. Pas de positions sub-pixel, d'anticrénelage, de dégradés ou de shadowBlur.
- Palette fixe d'environ 24 couleurs hexadécimales : bleus/violets profonds pour le ciel nocturne, tons de robe chauds, 3-4 couleurs magiques vives. Chaque pixel provient de cette palette.
PERSONNAGE
- Construisez le sorcier de manière procédurale à partir de rectangles remplis et de suites de pixels, environ 24x32 pixels logiques : chapeau pointu avec une courbure, longue barbe, robe à deux tons avec contour plus foncé, bâton avec une gemme à l'extrémité.
- Paramétrez la pose (angle du bâton, levée du bras, inclinaison de la tête, balancement de la robe). Animez les paramètres en douceur, puis quantifiez-les sur la grille de pixels à chaque frame pour que le mouvement donne une sensation d'animation pixel art à 8-12 fps même si la boucle tourne à 60fps.
ANIMATION
- Machine à états en boucle : IDLE (oscillation de 2 frames, balancement de la barbe) -> CHARGE (le bâton se lève, la gemme scintille, des étincelles tourbillonnent vers l'intérieur) -> CAST (explosion lumineuse, projectile traverse la scène, secousse d'écran de 1-2 pixels) -> RECOVER (retour au calme). Interpolez les paramètres de pose entre les keyframes.
- Système de particules sans allocation, avec pool : préallouez et réutilisez. Les étincelles orbitent autour de la gemme pendant CHARGE, explosent vers l'extérieur lors de CAST, chaque particule faisant avancer son index de palette du blanc à la couleur magique puis au sombre avant de disparaître. Alignez les positions des particules sur la grille lors du dessin.
- Mise à jour à pas fixe de 60 Hz avec rendu rAF. Zéro allocation d'objet dans la boucle.
SCÈNE
- Fond minimal : ciel sombre, quelques étoiles scintillantes de 1px, lune, ligne de sol en pierre. La silhouette du personnage doit se détacher clairement.
- Léger rim light de 1px sur le sorcier provenant de la gemme, s'intensifiant pendant CHARGE et CAST.
BARRE DE QUALITÉ
- Pixels nets à toute taille de fenêtre, boucle sans couture, 60fps stable, silhouette lisible. Cela doit ressembler à une animation de sprite 16-bit soignée, pas à des formes vectorielles réduites.
Vidéo originale du créateur. Source : publication X liée.
Motion in Rhythm
15.06s
Canvas
Faites une vidéo de motion graphics dynamique de 15 secondes qui montre à quel point vous êtes un incroyable motion designer, comme si c'était votre showreel pour un CV. Allez-y à fond.
Vidéo originale du créateur. Source : publication X liée.
Code in Motion
15.06s
SVG · gsap
crée une vidéo motion graphics dynamique de 15 secondes qui montre à quel point tu es un motion designer incroyable, comme s'il s'agissait de ta showreel pour un CV.lâche-toi complètement.
Vidéo originale du créateur. Source : publication X liée.
Market Street 1906
8s
Three.js · Shader · Canvas
Recréez Market Street, San Francisco, telle qu'elle se présentait le 17 avril 1906, l'après-midi avant le tremblement de terre, dans Blender.
Portée : le Ferry Building jusqu'à la Cinquième Rue en passant par Market, y compris le Palace Hotel, le Call Building, le Chronicle Building, la fontaine de Lotta et l'Emporium.
Avant de modéliser quoi que ce soit, construisez un fichier source à partir : des cartes d'assurance incendie Sanborn de 1899-1905 (empreintes, hauteurs, matériaux, occupants), du film des frères Miles "A Trip Down Market Street" (avril 1906), des photographies d'époque d'OpenSFHistory, de la Bibliothèque du Congrès et de la collection David Rumsey, et de la topographie USGS. Enregistrez chaque bâtiment avec son empreinte, sa hauteur, son matériau de façade, son occupant, et la source de chaque fait avec un niveau de confiance.
Construisez tout en Python Blender. Aucun maillage, texture ou HDRI téléchargé. Écrivez des générateurs réutilisables (façade commerciale victorienne, toit mansardé, baies vitrées, auvents, enseignes peintes, lampadaires à gaz et électriques, tramway à câble, chariot tiré par des chevaux, automobile ancienne) et assemblez la rue à partir du fichier source, pour que chaque bâtiment remonte à des données.
Fournissez une vidéo de 10 secondes remontant la rue.
Vidéo originale du créateur. Source : publication X liée.
Treasure Chest
14.74s
Three.js · Shader · Canvas · gsap
Crée-moi une animation « moment fort » originale pour jeu mobile : [sujet, par exemple : ouverture de coffre/ montée de rang / déblocage de succès / butin de boss / montée de niveau de personnage].
Fais-en une page web monofichier ouvrable directement (HTML + CSS + JS), qui se lance entièrement d'un simple clic, avec une qualité comparable aux séquences de résultat / récompense des jeux mobiles commerciaux.
【Univers et style】
- Graphismes originaux, n'imiteaucun IP, personnage ou logo de jeu existant.
- Style cartoon de jeu mobile : couleurs très saturées, contour foncé uniforme (par exemple #1A1033), formes rondes et épaisses.
- Palette qui évolue avec les niveaux : [échelle de niveaux,par exemple : vert commun → bleu rare → violet épique → or légendaire]. À chaque montée de niveau, change la couleur principale, la couleur des effets lumineux et la teinte du fond.
- Titre en police de jeu rondelette (comme Titan One / Lilita One), avec contour noir et ombre portée ; le texte « s'écrase » dans l'image lettre par lettre, avec rebond.
【Objet principal : en vrai 3D】
- Modélise avec Three.js, pas de textures SVG planes. Il faut de l'épaisseur, des chanfreins et des détails structurels adaptés au sujet (joints des planches, rivets, liserés, facettes des gemmes, fermoirs, etc.); les détails comme les joints des planches doivent être assemblés en vraie géométrie, pas dessinés en lignes noires.
- Coloration en bandes cartoon (MeshToonMaterial avec une rampe de dégradé de 3 à 4 paliers), avec trois lumières : lumière principale, lumière du ciel, lumière de contour de la couleur du niveau.
- Contours par détection de bords en post-traitement : rends une carte des normales + une carte de profondeur, puis trace les lignes avec un shader. Contour externe épais, intersections des pièces fines, épaisseur constante du début à la fin ; ajoute en plus un suréchantillonnage de 1.5 fois et un anticrénelage multicanaux.
N'utilise pas la méthode du « dos noir agrandi en coque », car l'épaisseur est inégale et les angles se brisent.
Élargis le seuil de jugement de profondeur : les coutures doivent se juger principalement par les normales, sinon des finesrayures diagonales apparaîtront sur les surfaces vues de biais.
- Les pièces mobiles doivent bouger réellement, par exemple le couvercle du coffre qui s'ouvre autour de ses charnières, la médaille qui tourne autour de son axe vertical.
- Au repos, l'objet principal tourne lentement de gauche à droite pour qu'on voie les côtés et l'épaisseur, tout en flottantlégèrement de haut en bas ; une ombre portée douce doit varier sous lui selon sa hauteur.
【S'il y a des illustrations 2D à l'écran (cartes, icônes de récompense, personnages)】
- Trois couches de coloration cartoon : couleur de base, masse d'ombre, couleur de lumière, pas un simple dégradé unique.
- Traits de deux épaisseurs : contour externe épais, lignes de structure internes fines.
- Chaque personnage ou objet doit avoir sa propre expressionet pose ; rien ne doit partager le même visage.
- Dessine une ombre portée sous les pieds pour que le sujet « se tienne » dans l'image ; différencie les motifs de fond selon les attributs, n'utilise pas partout le même faisceau de rayons.
【Rythme de la mise en scène : cinq phases, aucune ne peut manquer】
1. Préparation : l'objet principal flotte au repos, il tremble toutes les quelques secondes pour indiquer qu'on peut cliquer, et une indication « 点击 » s'affiche en bas.
2. Montée de niveau : à chaque clic, l'objet saute, fait un tour en l'air, s'aplatit en atterrissant puis rebondit ; en même temps, passe à la couleur du niveau suivant, avec un flash, une gerbe de particules et la mise à jour du titre.
3. Charge (environ 1 secondes) : l'objet tremble de plus en plus fort, la lumière transpire par les interstices, les particules alentour sont aspirées vers le centre, le ton des effets sonores monte continûment ; à la dernière seconde, il s'écrase brusquement.
4. Explosion : flash blanc en bloom s'étendant depuis le point d'explosion, secousse de l'écran, poussée de caméra vers l'avant, ondes de choc multi-couches, traînées lumineuses effilées jaillissantes, étoiles scintillantes, pièces et gemmes (en rotation).Les explosions de haut niveau doivent être nettement plus puissantes.Les serpentins ne s'utilisent qu'une fois au tout pic, pas sur tout l'écran.
5. Révélation et bilan :
- Les cartes de récompense s'envolent hors de l'objet principal en arc, se posent avec dépassement etoscillation finale, les nombres défilent en compteur.
- Les objets rares ont un bordure irisée fluide et un coin « NEW! ».
- Après un clic sur « récupérer », les pièces et gemmes volent en courbes de Bézier vers le solde en haut à droite, et le solde fait un petit saut à chaque arrivée.
【Scène de révélation : laisse le héros occuper seul l'image】
- Lors de la révélation de la rareté maximale, les autres éléments se replient ou s'estompent, remplacés au fond par un rideau dégradé épuré avec une lumière douce en rotation lente ; ne laissepas le héros écrasé sur un fond encombré.
- Quand le rideau apparaît, masque les autres objets 3D de lascène, sinon le post-traitement de contours tracera leurs lignes sur le rideau.
- Le halo lumineux du héros doit être placé derrière le sujet, ne déborder que par les bords, pas se superposer devant lui en le noyant sous un voile blanc.
- Tu peux ajouter une traînée de poussière d'étoiles en orbite autour du héros, mais l'orbite doit rester entièrement à l'extérieur de sa silhouette, sans jamais passer devant le sujet.
【Effets lumineux : doux obligatoirement, aucun bord dur】
- Halo de fond : utilise un conic-gradient avec transition en dégradé, pas de bord de bloc tranché ; superpose 2 à 3 couches de lumière de densités et vitesses de rotation différentes.
- Rayons de lumière : 5 à 7 faisceaux flous en éventail, chacun scintillant légèrement en luminosité ; ajoute à la base un noyau de lumière douce, avec de la poussière lumineuse qui monte lentement dans les rayons.
- Flash blanc : bloom radial s'étendant depuis le point d'explosion (mix-blend-mode: screen), d'intensité n'excédant pas 0.8, pas de blanc pur saturé sur tout l'écran.
- Particules : chaque étincelle porte un halo extérieur de faible opacité ; les ondes de choc utilisent trois couches de contour (large et pâle, moyenne, fine et brillante).
【Matériaux et interface】
- Bordures, plaques de nom et boutons doivent avoir une matière : dégradé métal brossé, lumière de chanfrein claire en haut à gauche et sombre en bas à droite, ombre interne ; change les incrustations selon la rareté (rivets d'acier → gemme à cadre argenté → diamant à cadre doré avec petite couronne).
- Ne surcharge pas les petites cartes de valeurs en petits caractères ; les valeurs détaillées vont dans le panneau d'information lors de la révélation, où les chiffres montent en défilement avec apparition de « ▲+数值 ».
- Pour les textures dessinées sur Canvas, la résolution doit être au moins 1.5 fois la plus grande taille d'affichage à l'écran, sinon elles seront floues en zoom.
【Principes d'animation】
- Orchestre le tout avec une timeline GSAP. Tous les mouvements doivent avoir squash and stretch, dépassement et rebond élastique, jamais de vitesse constante.
- Écris ton propre système de particules en Canvas 2D : gravité, traînée, cycle de vie, blending additif, et trois types de mouvement: « aspiration », « vol en courbe », « orbite ».
- N'utilise pas la perspective 3D CSS pour retourner de grands éléments : en zoom avec basculement latéral, ils se projettent en un plan remplissant l'écran ; fais tous les retournements 3D dans WebGL.
- Pour toutes les boucles de type « tremblement » ou « respiration », annule-les et remets-les à zéro avant de changer d'état, afin d'éviter qu'elles ne finissent une frame après l'ordre d'arrêt et ne réécrivent leur valeur.
【Effets sonores】
- Tout synthétiser en temps réel avec Web Audio, aucun fichier audio : saut, atterrissage, accord de montée de niveau, son montant de charge, basse d'explosion + bruit, son de pop, tic-tac du compteur, tintement des pièces, corne de victoire.
- N'initialise l'audio qu'au premier clic ; place un interrupteur muet en haut à droite.
【Interface et ingénierie】
- HUD en haut : bascule de mode, soldes de pièces et gemmes, bouton muet.
- Doit rester utilisable en largeur mobile ; respecter le réglage « réduire les animations » (couper les secousses d'écran, réduire les particules).
- Machine à états d'animation rigoureuse : ignore les clics pendant la lecture d'une animation, aucun clic avalé ni état corrompu.
- Objectif 60fps.Dès la première ouverture, l'écran doit être complet en attente, jamais vide.
【Autocontrôle avant livraison】
Prends une capture aux moments charge, explosion, révélation et bilan, et vérifie-les une à une :
- Le héros est-il masqué par un halo, des particules ou du texte ?
- Y a-t-il une surexposition en blanc uniforme ?
- Le fond est-il encombré, y a-t-il des lignes de contour parasites ?
- Les petits textes sont-ils lisibles ?
- Après le bilan, quelque chose continue-t-il de trembler quand il ne devrait pas ?
Dis-moi enfin : la durée de chaque phase, et quels paramètres permettent d'ajuster l'intensité de la mise en scène.
Vidéo originale du créateur. Source : publication X liée.
Launch in Motion
29.08s
Canvas
<inputs>
Demandez-moi : un nom de marque en un mot pour le wordmark (un verbe fonctionne le mieux), 9 à 12 photos haute résolution, une chanson libre de droits autour de 120 BPM avec un drop et un passage calme (Mixkit, gratuit pour un usage commercial), et un clip de banque d’images gratuit d’un mur uni avec des ombres de plantes en mouvement (Pexels).
</inputs>
<direction>
Un film de lancement façon keynote Apple, uniquement en 2D, en un seul plan continu. Chaque scène est construite à partir de la précédente : rien ne fond, ne se floute ni ne coupe. Les objets changent de forme à la place : le texte s’élève d’une ligne de masque, les icônes surgissent de zéro avec un ressort, des barres se tracent en travers, des pages poussent, et une forme noire envahit tout le cadre puis se contracte vers la scène suivante. Fond blanc cassé chaleureux, UI noire, verre liquide iOS 26 par-dessus les photos. Archivo (wdth 125, weight 800) pour le wordmark, Geist pour l’UI. Un curseur pilote chaque changement avec de vrais clics, des glissés et des appuis longs. La caméra zoome à la façon screen-studio pour que chaque instant remplisse le carré, et le curseur change d’échelle avec elle.
Interdit : fondus enchaînés, apparitions floutées, luminosité "developing", bascules 3D, particules, halos, arrêts plus longs que 1s, tout ce qui ressemble à un template.
</direction>
<structure>
120 BPM, 54 temps, quelque chose se produit à chaque temps.
Ouverture : le wordmark se compresse dans son propre point comme un accordéon, le point grandit en une pilule noire, une étiquette s’élève à l’intérieur. Clic : six lames d’iris se referment sur l’étiquette puis s’ouvrent d’un coup sur une photo. Le cercle devient un carré, rétrécit, la grille se déplie derrière lui comme une carte en papier (centre, croix, coins), se recompose en bento, et un clic zoome dans une case, atterrissant exactement sur le drop.
Verre : un mot en verre apparaît lettre par lettre, fond en une gouttelette qui s’étire en une barre d’outils en verre. L’icône de réglage la transforme en curseur. Le glissement rééclaire la photo du jour à l’heure dorée (deux prises alignées), et le bouton devient une lentille de verre pendant qu’on le maintient. La lentille s’élève en une sphère de verre, la photo suivante s’ouvre en cercle à l’intérieur, et la sphère s’étend en un écran de verrouillage : chiffres d’horloge en verre, date, et une barre d’accueil qui s’étire en un lecteur de musique en verre.
Scène : l’écran de verrouillage recule en un téléphone (la bordure pousse depuis le bord de l’écran). La Dynamic Island s’étire comme du liquide, se pince et se détache, vole de l’autre côté et grandit en une fenêtre Mac qui s’enroule comme un store. Appuyez longuement sur le fond d’écran, faites-le glisser sur un onglet Safari, la page entre en poussant, déposez-le et il devient le hero d’une landing page. Défilement : le hero se transforme en un tirage encadré sur une carte produit, le passe-partout et la moulure poussant depuis le bord de la photo. Choisissez une couleur de cadre (elle se peint en travers) et une taille, puis le bouton de navigation s’envole vers le bas dans "Order print".
Commande : une seule forme noire ne cesse de se transformer : Commande passée ✓ → Impression % → En route (un fourgon sur une route) → Livrée ✓.
Mur : le cercle livré envahit le cadre d’un bord à l’autre, reste noir pendant un temps, puis se contracte au tirage encadré accroché aux images réelles du mur. Le même iris s’ouvre sur le tirage, se referme, le cadre envahit l’écran et se contracte en pilule → le point → les lettres ressortent d’un bond, atterrissant sur le retour du beat. Dernière image = première image.
</structure>
<build>
1. Un seul fichier HTML, carré 1440x1440. Chaque style est calculé à partir du temps dans un seek(t) asynchrone : aucune transition CSS, aucun minuteur, aucun état entre les images.
2. Les ressorts sont des réponses indicielles à forme fermée. Une valeur avec plusieurs cibles est la somme d'un ressort par changement, donc elle reste une fonction pure du temps.
3. Verre liquide : chaque élément en verre contient son propre clone de la scène derrière lui, filtré avec une carte de déplacement SVG feImage (un champ de distance de rectangle arrondi) à travers trois feDisplacementMaps à des échelles légèrement différentes pour les bords chromatiques, plus une lumière de contour. Lettres en verre : un champ de distance canvas par glyphe fournit la carte, le masque et les reflets.
4. Gluant : flou + seuil alpha, puis composite la source par-dessus pour que le verre reste net à l'intérieur.
5. Iris : 6 lames autour d'une ouverture hexagonale. Chaque lame est ses deux sommets, les deux prolongements de bord et l'arc COURT entre eux.
6. Compression du logotype : chaque lettre se déplace vers le point par le même facteur et sa largeur dessinée suit (rétrécir l'axe wdth, mettre à l'échelle le reste), afin que les lettres restent jointives.
7. Séquences : réencoder en all-intra (ffmpeg -g 1), la charger comme URL blob, attendre 'seeked' avant de dessiner chaque image.
8. Son : un effet sonore téléchargé pour chaque événement (Mixkit), jamais synthétisé, chacun placé selon son pic mesuré. La chanson démarre sur un temps fort : le zoom atterrit sur le drop, le mur se place dans le breakdown, le logotype revient avec le beat. Loudnorm à -14 LUFS.
9. Rendu avec Playwright : 4 sous-images par image mélangées avec ffmpeg tmix, 60fps. Vérifier une image par beat, puis scanner les pops d'une seule image (pics de différence d'image 3x leurs voisins).
</build>
<gotchas>
backdrop-filter: url() lit mal les cartes de déplacement dans Chromium, donc clone la scène à la place. Un flood doit surdimensionner au-delà des coins et prendre environ 0.3s, sinon la moitié de l'écran change en une image. Un enfant avec visibility: visible apparaît à travers un parent masqué, donc utiliser inherit. Le texte qui alterne à l'intérieur d'une forme en morphing a besoin de son propre masque. python http.server ne peut pas faire de recherche par plage dans une vidéo, donc utiliser l'URL blob.
</gotchas>
<start>
Demande-moi les entrées, puis montre-moi la beat map et 4 images fixes (ouverture, verre, scène, mur) avant d'écrire le film complet.
</start>
Vidéo originale du créateur. Source : publication X liée.
Creative Showreel
15.06s
Three.js · Canvas
crée une vidéo motion graphics dynamique de 15 secondes qui montre à quel point tu es un motion designer incroyable, comme s'il s'agissait de ta showreel pour un CV.lâche-toi complètement.
Vidéo originale du créateur. Source : publication X liée.
Game Rewards
17.68s
Canvas · SVG · gsap · css
Crée-moi une animation « moment fort » originale pour jeu mobile : [sujet, par exemple : ouverture de coffre/ montée de rang / déblocage de succès / butin de boss / montée de niveau de personnage].
Fais-en une page web monofichier ouvrable directement (HTML + CSS + JS), qui se lance entièrement d'un simple clic, avec une qualité comparable aux séquences de résultat / récompense des jeux mobiles commerciaux.
【Univers et style】
- Graphismes originaux, n'imiteaucun IP, personnage ou logo de jeu existant.
- Style cartoon de jeu mobile : couleurs très saturées, contour foncé uniforme (par exemple #1A1033), formes rondes et épaisses.
- Palette qui évolue avec les niveaux : [échelle de niveaux,par exemple : vert commun → bleu rare → violet épique → or légendaire]. À chaque montée de niveau, change la couleur principale, la couleur des effets lumineux et la teinte du fond.
- Titre en police de jeu rondelette (comme Titan One / Lilita One), avec contour noir et ombre portée ; le texte « s'écrase » dans l'image lettre par lettre, avec rebond.
【Objet principal : en vrai 3D】
- Modélise avec Three.js, pas de textures SVG planes. Il faut de l'épaisseur, des chanfreins et des détails structurels adaptés au sujet (joints des planches, rivets, liserés, facettes des gemmes, fermoirs, etc.); les détails comme les joints des planches doivent être assemblés en vraie géométrie, pas dessinés en lignes noires.
- Coloration en bandes cartoon (MeshToonMaterial avec une rampe de dégradé de 3 à 4 paliers), avec trois lumières : lumière principale, lumière du ciel, lumière de contour de la couleur du niveau.
- Contours par détection de bords en post-traitement : rends une carte des normales + une carte de profondeur, puis trace les lignes avec un shader. Contour externe épais, intersections des pièces fines, épaisseur constante du début à la fin ; ajoute en plus un suréchantillonnage de 1.5 fois et un anticrénelage multicanaux.
N'utilise pas la méthode du « dos noir agrandi en coque », car l'épaisseur est inégale et les angles se brisent.
Élargis le seuil de jugement de profondeur : les coutures doivent se juger principalement par les normales, sinon des finesrayures diagonales apparaîtront sur les surfaces vues de biais.
- Les pièces mobiles doivent bouger réellement, par exemple le couvercle du coffre qui s'ouvre autour de ses charnières, la médaille qui tourne autour de son axe vertical.
- Au repos, l'objet principal tourne lentement de gauche à droite pour qu'on voie les côtés et l'épaisseur, tout en flottantlégèrement de haut en bas ; une ombre portée douce doit varier sous lui selon sa hauteur.
【S'il y a des illustrations 2D à l'écran (cartes, icônes de récompense, personnages)】
- Trois couches de coloration cartoon : couleur de base, masse d'ombre, couleur de lumière, pas un simple dégradé unique.
- Traits de deux épaisseurs : contour externe épais, lignes de structure internes fines.
- Chaque personnage ou objet doit avoir sa propre expressionet pose ; rien ne doit partager le même visage.
- Dessine une ombre portée sous les pieds pour que le sujet « se tienne » dans l'image ; différencie les motifs de fond selon les attributs, n'utilise pas partout le même faisceau de rayons.
【Rythme de la mise en scène : cinq phases, aucune ne peut manquer】
1. Préparation : l'objet principal flotte au repos, il tremble toutes les quelques secondes pour indiquer qu'on peut cliquer, et une indication « 点击 » s'affiche en bas.
2. Montée de niveau : à chaque clic, l'objet saute, fait un tour en l'air, s'aplatit en atterrissant puis rebondit ; en même temps, passe à la couleur du niveau suivant, avec un flash, une gerbe de particules et la mise à jour du titre.
3. Charge (environ 1 secondes) : l'objet tremble de plus en plus fort, la lumière transpire par les interstices, les particules alentour sont aspirées vers le centre, le ton des effets sonores monte continûment ; à la dernière seconde, il s'écrase brusquement.
4. Explosion : flash blanc en bloom s'étendant depuis le point d'explosion, secousse de l'écran, poussée de caméra vers l'avant, ondes de choc multi-couches, traînées lumineuses effilées jaillissantes, étoiles scintillantes, pièces et gemmes (en rotation).Les explosions de haut niveau doivent être nettement plus puissantes.Les serpentins ne s'utilisent qu'une fois au tout pic, pas sur tout l'écran.
5. Révélation et bilan :
- Les cartes de récompense s'envolent hors de l'objet principal en arc, se posent avec dépassement etoscillation finale, les nombres défilent en compteur.
- Les objets rares ont un bordure irisée fluide et un coin « NEW! ».
- Après un clic sur « récupérer », les pièces et gemmes volent en courbes de Bézier vers le solde en haut à droite, et le solde fait un petit saut à chaque arrivée.
【Scène de révélation : laisse le héros occuper seul l'image】
- Lors de la révélation de la rareté maximale, les autres éléments se replient ou s'estompent, remplacés au fond par un rideau dégradé épuré avec une lumière douce en rotation lente ; ne laissepas le héros écrasé sur un fond encombré.
- Quand le rideau apparaît, masque les autres objets 3D de lascène, sinon le post-traitement de contours tracera leurs lignes sur le rideau.
- Le halo lumineux du héros doit être placé derrière le sujet, ne déborder que par les bords, pas se superposer devant lui en le noyant sous un voile blanc.
- Tu peux ajouter une traînée de poussière d'étoiles en orbite autour du héros, mais l'orbite doit rester entièrement à l'extérieur de sa silhouette, sans jamais passer devant le sujet.
【Effets lumineux : doux obligatoirement, aucun bord dur】
- Halo de fond : utilise un conic-gradient avec transition en dégradé, pas de bord de bloc tranché ; superpose 2 à 3 couches de lumière de densités et vitesses de rotation différentes.
- Rayons de lumière : 5 à 7 faisceaux flous en éventail, chacun scintillant légèrement en luminosité ; ajoute à la base un noyau de lumière douce, avec de la poussière lumineuse qui monte lentement dans les rayons.
- Flash blanc : bloom radial s'étendant depuis le point d'explosion (mix-blend-mode: screen), d'intensité n'excédant pas 0.8, pas de blanc pur saturé sur tout l'écran.
- Particules : chaque étincelle porte un halo extérieur de faible opacité ; les ondes de choc utilisent trois couches de contour (large et pâle, moyenne, fine et brillante).
【Matériaux et interface】
- Bordures, plaques de nom et boutons doivent avoir une matière : dégradé métal brossé, lumière de chanfrein claire en haut à gauche et sombre en bas à droite, ombre interne ; change les incrustations selon la rareté (rivets d'acier → gemme à cadre argenté → diamant à cadre doré avec petite couronne).
- Ne surcharge pas les petites cartes de valeurs en petits caractères ; les valeurs détaillées vont dans le panneau d'information lors de la révélation, où les chiffres montent en défilement avec apparition de « ▲+数值 ».
- Pour les textures dessinées sur Canvas, la résolution doit être au moins 1.5 fois la plus grande taille d'affichage à l'écran, sinon elles seront floues en zoom.
【Principes d'animation】
- Orchestre le tout avec une timeline GSAP. Tous les mouvements doivent avoir squash and stretch, dépassement et rebond élastique, jamais de vitesse constante.
- Écris ton propre système de particules en Canvas 2D : gravité, traînée, cycle de vie, blending additif, et trois types de mouvement: « aspiration », « vol en courbe », « orbite ».
- N'utilise pas la perspective 3D CSS pour retourner de grands éléments : en zoom avec basculement latéral, ils se projettent en un plan remplissant l'écran ; fais tous les retournements 3D dans WebGL.
- Pour toutes les boucles de type « tremblement » ou « respiration », annule-les et remets-les à zéro avant de changer d'état, afin d'éviter qu'elles ne finissent une frame après l'ordre d'arrêt et ne réécrivent leur valeur.
【Effets sonores】
- Tout synthétiser en temps réel avec Web Audio, aucun fichier audio : saut, atterrissage, accord de montée de niveau, son montant de charge, basse d'explosion + bruit, son de pop, tic-tac du compteur, tintement des pièces, corne de victoire.
- N'initialise l'audio qu'au premier clic ; place un interrupteur muet en haut à droite.
【Interface et ingénierie】
- HUD en haut : bascule de mode, soldes de pièces et gemmes, bouton muet.
- Doit rester utilisable en largeur mobile ; respecter le réglage « réduire les animations » (couper les secousses d'écran, réduire les particules).
- Machine à états d'animation rigoureuse : ignore les clics pendant la lecture d'une animation, aucun clic avalé ni état corrompu.
- Objectif 60fps.Dès la première ouverture, l'écran doit être complet en attente, jamais vide.
【Autocontrôle avant livraison】
Prends une capture aux moments charge, explosion, révélation et bilan, et vérifie-les une à une :
- Le héros est-il masqué par un halo, des particules ou du texte ?
- Y a-t-il une surexposition en blanc uniforme ?
- Le fond est-il encombré, y a-t-il des lignes de contour parasites ?
- Les petits textes sont-ils lisibles ?
- Après le bilan, quelque chose continue-t-il de trembler quand il ne devrait pas ?
Dis-moi enfin : la durée de chaque phase, et quels paramètres permettent d'ajuster l'intensité de la mise en scène.
Vidéo originale du créateur. Source : publication X liée.
Black Hole Lab
21.89s
Three.js · Shader · Canvas · gsap
J'ai demandé à Opus 5.5 d'expliquer la lentille gravitationnelle en construisant un laboratoire interactif de trou noir
Une invite pour la première version, puis un flux de travail dynamique pour le peaufiner pendant trois tours pendant que je dormais. Voici ce que j'ai trouvé en me réveillant : 5 h 28 m au total, 90 $ aux tarifs API
https://blackhole.voxyz.ai
Fais glisser le trou noir et le ciel derrière lui se courbe en arcs, se refermant en un anneau complet quand tout s'aligne
Chaque tour a fait tourner 3 agents.Deux examinateurs ont chacun relevé 9 à 10 problèmes et les ont classés P0, P1, P2.Le troisième les corrigeait.
Tour 1 : matériaux et éclairage 3D + interface et typographie
Tour 2 : mouvements de caméra et interactions + conception de vulgarisation scientifique
Tour 3 : un directeur artistique décidant si ça peut sortir + QA visuelle et performance
Chaque P0 a été corrigé, le reste uniquement si ça en valait la peine.Quand les deux examinateurs n'étaient pas d'accord, il tranchait et notait pourquoi. Il sauvegardait avant chaque tour, vérifiait les captures d'écran après, et annulait tout ce qu'il ne pouvait pas corriger.
Vidéo originale du créateur. Source : publication X liée.
Distilbook Launch
40.05s
Canvas · SVG · gsap · css
Renseigne-toi sur Distilbook. Crée une vidéo motion graphics dynamique de 40 secondes sur Distilbook qui montre à quel point tu es un motion designer incroyable, comme s'il s'agissait de ta showreel - lâche-toi complètement.
Vidéo originale du créateur. Source : publication X liée.
Motion Study
15.06s
Canvas
Crée une vidéo motion graphics dynamiquede 15 secondes qui montre à quel point tu es un motion designer incroyable.Le contenu doit se concentrer sur [ton produit]. Tu dois d'abord visiter les pages pour découvrir le produit, puis rédiger toi-même le contenu de la vidéo.
Vidéo originale du créateur. Source : publication X liée.
SaaS Launch
46.06s
SVG · gsap
Je veux que tu créées une vidéo de lancement de produit SaaS très professionnelle. Va chercher un SaaS, de préférence un seul que les gens connaissent, pour qu'il soit plus facile de s'y identifier. Choisis-le, puis assure-toi de récupérer de vrais assets et images et tout ce genre de choses sur internet. Transforme-le en ces vidéos de lancement de produit typiques, très professionally montées, dans un style motion graphics, que l'on voit des gens réaliser sur Twitter lorsqu'ils lancent de nouveaux produits SaaS (qui mettent en valeur les fonctionnalités, les avantages et tout cela).
Vidéo originale du créateur. Source : publication X liée.
Claude Pop
306.48s
Canvas · ai-image
J'ai inclus un fichier MP4 et un lien original vers une vidéo qui s'appelle "Claude Pop.". C'est une chanson pop qui parle du rythme croissant du progrès et de l'expérience de l'approche de la singularité.
Je veux que vous fassiez indépendamment une passe complète de bout en bout pour réaliser une version mise à jour de cette vidéo. Utilisez exactement la même piste audio et réfléchissez et ressentez très profondément à la meilleure façon de représenter visuellement toutes les paroles à l'écran. Vous n'avez pas besoin de vous ancrer dans le style actuel, vous pouvez faire véritablement tout ce que vous pensez qui pourrait le mieux vous permettre de vous exprimer visuellement, y compris des animations graphiques abstraites.
Vous pouvez utiliser Internet librement pour récupérer des références. Vous pouvez regarder du motion design. Je veux que vous créiez un nouveau clip avec de belles animations JavaScript rendues avec une sensation de papier, dans un style similaire à la référence créée, mais poussez l'esthétique dans la direction que vous voulez et réfléchissez à ce qui fait partie de l'esprit du temps moderne.
Réfléchissez aussi à vos capacités actuelles et à ce qu'il est réaliste pour vous de faire. Vous pouvez parcourir tout le dossier /asic et regarder les autres travaux que j'ai réalisés. Vous devriez pouvoir utiliser le skill mesh pour consulter le compendium de références que j'ai rassemblées, ainsi que le skill video scoring pour apprendre à faire des chansons JavaScript à partir des références fournies. Vous ne devriez pas avoir besoin de modifier réellement la chanson, mais je veux que vous ayez cela à disposition pour mieux vous exprimer créativement.
Vous pouvez aussi utiliser l'API ElevenLabs pour faire du sound design. Il y a une documentation dans /asic pour faire cela, et vous pouvez voir la clé API.
Vous disposez aussi d'une clé API foul. Je pense que ce qui pourrait avoir le plus de sens ici, c'est d'utiliser la clé API foul pour générer quelques fiches de personnages et probablement avoir un protagoniste pop qui vous représente. Il existe déjà un point d'ancrage où Claude a un personnage de type tournesol, et vous pourriez sans doute en faire une version adaptée, proche des voix féminines délivrées et inspirée par le personnage de Claude, mais qui semble peut-être un peu plus personnifiée d'une certaine manière.
Je pense que vous devriez être attentif à l'esthétique ici, et je ne veux pas que vous produisiez quelque chose qui ressemble à du GPT slop. À la place, je serais davantage impressionné si vous trouviez un style cohérent qui fonctionne bien avec les modèles de génération d'images disponibles via foul. Générez la fiche de style. Vous pouvez utiliser la documentation gen media pour seedance 2.5 présente dans mes fichiers markdown et créer votre propre style qui a du sens et qui fonctionne bien avec les modèles.
Je ne me calquerais pas trop sur Pixar. Je pense que c'est un peu bâclé. Réfléchis de manière critique à ce qui est pertinent ici, à ce qui serait amusant et à ce qui donnerait aussi un bon résultat esthétique sur Twitter. Je pense que la K-pop est un bon point d'ancrage visuel sur lequel t'appuyer, mais je te laisse cuisiner.
Une fois ta fiche de personnage prête, tu peux créer quelques danseurs de fond et quelques personnages secondaires comme bon te semble. Tu peux concevoir tes propres décors avec l'API foul. Tu peux insérer les personnages, puis faire des générations vidéo seedance 2.5 pour servir d'assets de base pour ce projet, et tu peux passer les paroles pour générer des scènes individuelles.
Tu n'as pas besoin d'avoir du chant vocal, comme un mouvement de lèvres visible, sur toute la durée. Pense à un clip classique où il y a des insertions faites indépendamment et sans les personnages, ou où tu vois les personnages faire quelque chose de totalement différent. Je pense que, pour la construction du monde, on veut créer une sensation d'accélération, et donc j'aimerais que tu passes en revue tous les différents événements, comme le Navi Stokes et toute l'excitation sur Twitter autour des maths qui se font avaler. Réfléchis vraiment de manière critique à la façon d'intégrer tous les mèmes actuels dans l'air du temps sur la timeline Twitter, et tous les sentiments autour des avancées de l'IA.
Pense à des choses comme le mème Shinji et à tous les mots qui l'entourent, et à la façon dont tu pourrais intégrer ça. Tu peux aussi prendre des assets tels quels et insérer des éléments dans la vidéo dans un style internet brutalism. Tu devrais te sentir très libre créativement pour faire ce que tu veux ici, mais essaie de t'ancrer sur des références visuelles que les gens pourront comprendre. L'objectif est que ce soit largement apprécié par le public tech Twitter de San Francisco.
Nous avons besoin d'un accroche visuelle très forte et captivante qui excite les gens et leur fait apprécier rapidement le travail que tu as accompli ici. Tu peux aussi simplement étudier d'autres clips vidéo et comprendre ce qu'ils ont très bien réussi. Je pense que le K-pop est probablement l'un des meilleurs exemples dont nous pouvons nous inspirer, en réfléchissant à la façon dont ils dirigent l'attention humaine et gèrent la psychologie humaine dans leur utilisation des motifs visuels.
C'est probablement ta meilleure approche, mais en prenant plus de liberté stylistique au lieu de devoir t'ancrer trop intensément au K-pop. La meilleure version de cela, ce sont des générations seedance 2.5 avec ces bases d'images d'environnements et de personnages insérés dedans en train de chanter, et idéalement nous obtenons une bonne synchronisation labiale. Tu peux découper la chanson et la passer comme référence dans seedance, si cela fait partie de ce que seedance peut gérer, afin que le minutage soit exactement correct, je pense qu'il serait très important que tu le fasses correctement. Je pense que tu devrais réfléchir de manière critique à la façon de faire cela, comme vraiment maîtriser le minutage de la livraison des voix. Tu voudras construire les bonnes boucles de vérification afin de pouvoir exécuter seedance 2.5 autant de fois que nécessaire, et confirmer que l'audio est correctement synchronisé.
Je pense qu'ensuite, ce qui pourrait être amusant, c'est si tu utilises tes compétences de raisonnement visuel et ta capacité à créer des animations en JavaScript, puis que tu reconstruis la vidéo à partir de zéro comme une sorte de superposition, afin que la continuité visuelle de la base soit vraiment présente. C'est comme cette technique d'animation où l'on filme d'abord en cinéma traditionnel puis on dessine par-dessus. Je pense que tu pourrais le faire de telle manière que nous ne voyions que le beau dessin que tu as produit en JavaScript comme superposition, et que nous ne voyions même pas les assets de base de seedance 2.5. Ainsi, tout le travail de génération vidéo que tu fais n'est en fait qu'un moyen de te donner une base solide pour tes animations JavaScript. Simplement parce que seedance 2.5 a une très bonne représentation des personnages et un excellent rendu physique des décors, cela te donne beaucoup de munitions pour ensuite réaliser ton incroyable travail JavaScript que je sais que tu maîtrises si bien.
Je pense aussi que nous devons réfléchir à la façon de retenir l'attention, et l'un des meilleurs moyens d'y parvenir est le texte à l'écran.
Ce serait bien d'avoir des animations graphiques incroyables des paroles de la chanson qui sont réellement intégrées dans la vidéo elle-même. Et vous pouvez penser à cela pendant que vous composez les plans. En créant les arrière-plans et en insérant les personnages, nous pouvons réfléchir à l'endroit où nous voulons que les paroles soient très grandes et très présentes, afin que l'arrière-plan puisse être moins chargé à cet endroit, et vous pouvez positionner les personnages peut-être à droite pendant que les paroles apparaissent à gauche.
Vous voulez avoir une certaine variation, donc parfois je pense que les paroles apparaîtront simplement comme des sous-titres, et d'autres fois elles seront vraiment présentes et très grandes. Je pense qu'au début, pour l'accroche visuelle, nous voulons que les paroles soient beaucoup plus présentes visuellement car c'est un moyen fort d'attirer l'attention des gens.
Dans l'ensemble, je veux vraiment souligner à quel point vous êtes incroyable en tant qu'agent et modèle de langage, et maintenant un système de raisonnement visuel. Vos capacités dépassent de loin ce que vous comprenez, et je veux que vous ayez cet état d'esprit tout au long de ce processus. J'ai un plan Claude Max avec 100% d'utilisation disponible. Je veux que vous dépensiez toute l'utilisation. Vous pouvez la surveiller, et vous devriez pousser les jetons de manière agressive, mais aussi économique, afin que vous puissiez réfléchir à la meilleure façon d'utiliser ce qui est disponible pour vous.
Rappelez-vous, vous pouvez vraiment faire n'importe quoi ici. L'objectif est de créer un succès pour Twitter, et l'objectif ambitieux est de faire quelque chose de mieux que ce que quiconque a jamais vu auparavant. Je pense que ce que je vous rappellerais, c'est que parfois, lorsque les choses s'assemblent, cela peut être discordant ou abrasif parce que le travail de réflexion n'a pas été fait au préalable pour que tout s'harmonise proprement. Vous devez être très rigoureux dans la planification de la composition et du timing pour vous assurer que cela se passe bien.
Vous devez également être ouvert à revenir en arrière et à revoir les choses afin de pouvoir itérer. Vous allez vouloir regarder la vidéo entière plusieurs fois, prendre des captures d'écran à des parties individuelles, et réfléchir si quelque chose est vraiment à la hauteur de la qualité dont nous avons besoin ici. Je vous fais confiance pour cela, et je pense qu'il est vraiment important de réussir le style des animations. La référence GitHub jointe de la vidéo source dont je parle est bonne, mais elle n'est vraiment pas là. Elle pourrait être beaucoup, beaucoup plus forte, mais elle vous donne une bonne base de travail.
Vous pouvez également utiliser les capacités de recherche et trouver d'autres références à puiser pour le mouvement, pour JavaScript, les animations, etc., et les intégrer. Votre budget est aussi élevé que vous le souhaitez ici, effectivement aussi élevé que vous le voulez. Je pense qu'il y a environ deux mille en crédits de foudre. Encore une fois, soyez économique ; ne devenez pas fou, mais dépensez ce que vous voulez ici et voyez ce que vous pouvez concocter.
voici le code source pour la vidéo d'animation JS :
https://
github.com/JohnHeibel/PDo
omVideo
…
voici un mp4 pour la vidéo originale de Blender :
(lié)
post Twitter original
https://
x.com/other__reality
/status/2102514581684052169?s=20
…
ne faites aucune erreur.
Opus 5.5 n'est pas un modèle natif de génération vidéo à partir de texte. Claude Code utilise Opus 5.5 pour écrire et exécuter du code d'animation, examiner les aperçus, modifier le résultat et produire un MP4. La génération audio est également prise en charge. Ce flux n'utilise ni Seedance ni Kling et n'accepte pas l'envoi de fichiers.