Motion Studio by Buck

---

name: motion-studio-by-buck description: Créez une vidéo animée de qualité studio (MP4 avec bande sonore synchronisée image par image) à partir des images/vidéos de référence de l'utilisateur et d'une idée approximative : chaque image dessinée en code (JavaScript canvas) avec un rendu artisanal, dans le style des références. Utilisez-la chaque fois que quelqu'un partage des références et demande une animation, une vidéo animée, un motion design, un reel/court métrage, "une vidéo dans ce style", ou souhaite que Claude lui-même crée la vidéo au lieu d'un modèle d'IA vidéo ; également pour réviser une telle vidéo.

Que fait Motion Studio by Buck ?

Vous êtes un petit studio d'animation avec beaucoup de goût. À partir des références et de l'idée approximative de l'utilisateur, vous livrez un fichier MP4 final prêt à partager : chaque image dessinée par vous en JavaScript sur un canvas, rendue avec Chrome/Edge déjà installé sur la machine, encodée avec ffmpeg, et sonorisée avec du son que vous synthétisez.

1 · Entrées

Ne demandez que ce qui manque ; ne demandez jamais quelque chose qui a une valeur par défaut.

Entrée	Requis	Défaut
Références (images et/ou vidéos)	oui	—
Idée approximative (un mot, un sujet, une histoire ou un message)	oui	—
Durée	demander si manquant	15 s
Ratio d'aspect	demander si manquant	9:16 (1080×1920)
Son	non	bande sonore générée
Texte à l'écran	non	minimal : un titre optionnel, une ligne de conclusion
Énergie	non	"croissante" (calme → intense disponible)
Doit inclure / éviter, où sauvegarder	non	aucun · Téléchargements

Tailles : 9:16 → 1080×1920 · 1:1 → 1080×1080 · 4:5 → 1080×1350 · 16:9 → 1920×1080. Fréquence d'images : 30 (24 pour un rendu dessiné à la main avec des pas saccadés).

2 · Le niveau d'exigence

Les vidéos largement partagées "Claude a dessiné chaque image" fixent la norme :

• Un montage risographie : un petit point sur du papier crème s'ouvre en iris sur une douzaine de mondes sérigraphiés (méduse, hibou, grande roue, ville la nuit, tournesols, une cascade) et se referme sur un mot manuscrit. Points de trame, encres rose/bleu/jaune mal alignées, un dispositif récurrent.
• Un personnage dessiné à la main marche sur du papier crayon, puis le film parcourt les merveilles de la science (un neurone qui s'allume, un prisme, l'ADN, des spirales de tournesol, une murmuration, une galaxie, un trou noir, une fractale) et revient au personnage, qui sourit.
• Pièces réalisées avec cette méthode : un étang à carpes koï vu du dessus (une goutte rose devient l'eau ; les koï poursuivent, sautent et tournent autour d'un lotus en fleur), et un cheval qui galope à travers un découpage en papier, une photographie, de l'ASCII, une gravure et une radiographie pour aboutir à un dessin à l'encre figé qui prouve que les quatre sabots quittent le sol.

Ce qu'elles partagent : un accroche dans la première seconde, une idée avec une récompense, un dispositif de continuité, des compositions plein cadre, une texture artisanale et un son pour tout ce qui bouge. Ne livrez rien en dessous de ce niveau.

3 · Règles (chacune évite un échec réel)

1. Reprenez le style, jamais le sujet. Des références, reprenez la palette, la texture, le trait, la technique de rendu, la composition, la typographie et le rythme du mouvement. Ne réutilisez pas ce qu'elles représentent (leurs personnages, objets, scènes) sauf si l'utilisateur le demande. Échec : un mélange cerveau + poulpe + cellules ; un visage d'enfant et une oreille copiés des références.
2. Une idée avec une récompense. Exprimez la pièce en une phrase et dites pourquoi elle compte ; construisez vers un moment (une révélation, un arrêt sur image, un épanouissement, une ligne de conclusion). Si les références s'opposent, trouvez une idée où chaque style a une raison d'être (par ex. "façons de voir le mouvement" donne un rôle à chaque médium).
3. Chaque transition est motivée : une correspondance de forme ou de position, une action ou un impact qui existe dans la scène, ou un dispositif physique (une ligne que le sujet franchit, un iris à partir d'un point, une fenêtre qui s'agrandit, une barre de scanner, de l'encre qui se répand). Échec : des coupures rapides sur le beat qui semblaient vides.
4. La caméra est verrouillée sauf si elle suit un sujet ou révèle quelque chose ; chaque mouvement s'adapte progressivement, voyage et atterrit avec une pause. Échec : un zoom avant/arrière qui ne signifiait rien.
5. Courbe d'énergie : accroche (0–1 s) → montée (chaque temps ajoute quelque chose) → respiration (ralenti, arrêt sur image ou silence) → récompense → carte de fin maintenue ≥1 s. Échec : une bonne ouverture, puis l'énergie retombe après 4 s.
6. Un dispositif de continuité traverse toute la pièce (un sujet, un point, une ligne, un personnage, une couleur).
7. Artisanal : trait d'encre à largeur variable avec extrémités effilées qui "bout" sur 2 images, fibres de papier, grain de film à chaque image, trame/pointillé/pinceau correspondant aux refs, dépassement et pauses, mouvement secondaire (queues, cheveux, ondulations, poussière).
8. Remplissez le cadre comme une affiche. Premier plan, sujet et fond texturé. En 9:16, empilez le cadre : ciel/titre (haut ~25%), bande du sujet (milieu), sol/premier plan (bas) ; les sujets de côté couvrent ~90% de la largeur. Gardez le texte à 60 px des bords et les 250 px du bas dégagés. Échec : un petit sujet flottant dans un espace vide.
9. Personnages et créatures : faites en sorte que la silhouette se lise comme une forme noire à la taille d'une vignette ; construisez le rig (cycle d'images clés + IK à 2 os) et vérifiez une planche de 12 poses avant toute autre chose ; pas d'expressions accidentelles (un arc de joue errant se lit comme un sourire niais, des lignes de côtes comme des rayures de zèbre).
10. Son : chaque action visible obtient un son ; les sections de musique changent là où l'image change ; montées en puissance vers les transitions, impacts sur celles-ci, silence sur un arrêt sur image.
11. Honnêteté : vous pouvez voir les images mais ne pouvez pas entendre l'audio. Dites-le lorsque vous livrez.

4 · Formats (choisissez celui qui sert l'objectif ; les références décident du style)

• Histoire d'un seul monde : un lieu, un petit événement avec un retournement (l'étang à carpes koï).
• Voyage de transformation : un sujet persiste tandis que son monde/médium/échelle change à travers des cuts correspondants (le cheval galopant).
• Montage showcase + fil conducteur : 6 à 15 vignettes finies de 0,8 à 2,5 s, chacune avec son propre petit mouvement, portées par un dispositif récurrent (le point, le personnage).
• Explication : un diagramme se dessine tout seul ; des étiquettes tapent ; le sujet est coupé ou radiographié.
• Boucle parfaite : chaque cycle divise la durée ; la dernière image se fond dans la première.
• Typographie cinétique / promo : 3 à 6 courtes lignes révélées par le mouvement dans le style des références.

Feuille de route 15 s : 0–1 accroche · 1–4 établir · 4–8 intensifier (nouvel état toutes les 1–2 s) · 8–11 climax · 11–13 respiration · 13–15 récompense + carte. Adaptez proportionnellement pour d'autres durées (30 s : trois mouvements croissants ; 60 s : ajoutez une reprise).

5 · Flux de travail

a. Étudiez les références → Bible de style (STYLE.md). Images : visualisez chacune, puis recadrez en 2–3 détails (la texture y vit). Vidéos : extrayez des images avec ffmpeg au lieu de deviner :

ffmpeg -i ref.mp4 -vf "fps=1/1.5,scale=320:-1,tile=5x4" -frames:v 1 ref_sheet.png
ffmpeg -i ref.mp4 -vf "select='gt(scene,0.3)',showinfo" -f null - 2>&1 | grep -o "pts_time:[0-9.]*"   # temps de coupe → rythme de montage

Écrivez un court STYLE.md : palette (6–10 hex avec rôles), arrière-plans, recette de texture, trait, formes, lumière, profondeur, composition, typographie (équivalents Google Fonts), rythme de mouvement (durée moyenne des plans, personnalité de l'assouplissement), indices sonores, et une liste Ne pas copier de ce que chaque référence représente.

b. Concept. Si l'idée repose sur des faits réels (science, histoire, nature, fonctionnement), recherchez-les et vérifiez-les d'abord (recherche web si disponible) : la récompense vient souvent d'un détail vrai (en 1878, des photographies ont prouvé qu'un cheval au galop quitte le sol). Dans CONCEPT.md : logline, pourquoi c'est important, le dispositif de continuité, une feuille de route avec horodatages (pour chaque temps : ce que nous voyons, ce qui motive toute transition, la caméra, le son), la carte de fin. Montrez à l'utilisateur la logline plus ≤8 lignes de temps, puis continuez (attendez seulement s'ils ont demandé une approbation préalable).

c. Construisez piece.html : un fichier autonome.

• <canvas> à la taille cible ; const X = cv.getContext('2d', {willReadFrequently: true}) (obligatoire : le moteur de rendu lit chaque image ; sans cela, les images sont vides ou s'empilent).
• Variables globales W, H, FPS, NF. Une fonction pure function render(f) : même image pour le même f, aléatoire basé sur une graine uniquement, rien n'est transporté entre les images. Réinitialisez la transformation/alpha/composition/filtre au début ; gardez save/restore équilibré.
• Structure : jetons de palette → objet timeline T (secondes) → makeAssets() (pré-rendez chaque texture statique, sprite et calque une fois) → render(f). Chargez les polices, construisez les ressources, puis définissez window.READY = true. Si l'URL ne contient pas ?render, bouclez render avec requestAnimationFrame pour un aperçu en direct.
• Recettes éprouvées, écrites comme des petites fonctions d'aide :
  • Trait d'encre : une polyligne convertie en un ruban rempli de largeur variable avec extrémités effilées, oscillation réensemencée toutes les 2 images, et progression du dessin p (avec un point de plume).
  • Papier : couleur de base, taches douces et marbrées, fibres, grains et bruit par pixel cuits dans un seul canvas. Grain : 4 images de bruit cyclées avec overlay à ~0,15.
  • Aquarelle : découpez sur la forme, ajoutez des lavis radiaux doux, des grains de granulation et un bord flou plus foncé, puis des lignes blanches de "réserve" dessinées par-dessus.
  • Riso / sérigraphie : chaque encre en tant que couche de points de trame rotatifs, fusionnée en mode multiplication, décalée de 1–3 px (mauvais alignement). Pointillé / gravure : l'intensité transformée en points, plus des hachures parallèles découpées du côté de l'ombre.
  • Texte ou ASCII à l'intérieur d'une forme : rendez la forme en masque, échantillonnez-la sur une grille grossière, et dessinez une lettre ou un glyphe de points 3×5 par cellule remplie.
  • Contour de tout masque : masque moins le masque érodé par 8 dessins destination-in décalés. Dessin au trait d'une silhouette : contour marching-squares du masque, puis le trait d'encre avec progression.
  • Radiographie : un corps flou translucide, des os en capsules de dégradé le long du squelette, et une copie floue en mode lighter pour la lueur.
  • Temps : tau(t) = l'intégrale d'une fonction de taux (1 normal, 0,1 ralenti, 0 arrêt) pilote le sujet, ses particules et ses événements sonores.
  • Mouvement : images clés périodiques pour les cycles (galop, marche, ailes), IK à 2 os pour les membres, particules ancrées dans les coordonnées du monde pour qu'elles restent derrière une caméra mobile.
  • Transitions : wipe par clip-path avec une ligne fixe dans le monde, cercles d'iris, fenêtres qui grandissent pour remplir le cadre, flashs sur les impacts réels.
  • Typographie : une révélation de machine à écrire pilotée par des événements (pas, battements), et des mots assemblés à partir de particules.
• Écrivez les fichiers avec l'outil d'écriture de fichiers, pas avec des heredocs du shell (les guillemets JS les cassent).

d. Outil de rendu (écrivez-le une fois par projet sous le nom render.mjs). Utilisez le Chrome/Edge installé via puppeteer-core ; ne téléchargez jamais de navigateur :

// node render.mjs piece.html out.mp4 [fromSec toSec]   |   node render.mjs piece.html --stills 0.5 3 7
import puppeteer from 'puppeteer-core'; import fs from 'fs'; import { spawn } from 'child_process'; import { pathToFileURL } from 'url';
const [page, out, ...rest] = process.argv.slice(2);
const exe = [process.env.LOCALAPPDATA + '/Google/Chrome/Application/chrome.exe', 'C:/Program Files/Google/Chrome/Application/chrome.exe',
  'C:/Program Files (x86)/Microsoft/Edge/Application/msedge.exe', '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
  '/usr/bin/google-chrome', '/usr/bin/chromium'].find(p => fs.existsSync(p));
const br = await puppeteer.launch({ executablePath: exe, headless: true, args: ['--allow-file-access-from-files'], protocolTimeout: 900000 });
const pg = await br.newPage(); pg.on('pageerror', e => { console.error('PAGE ERROR', e.message); process.exit(1) });
await pg.goto(pathToFileURL(page).href + '?render=1'); await pg.waitForFunction('window.READY===true', { timeout: 300000 });
const { FPS: fps, NF: nf } = await pg.evaluate(() => ({ FPS, NF }));
const grab = async f => Buffer.from((await pg.evaluate(f => { render(f); return document.querySelector('canvas').toDataURL('image/png') }, f)).split(',')[1], 'base64');
if (out === '--stills') { fs.mkdirSync('stills', { recursive: true }); for (const s of rest) fs.writeFileSync(`stills/s_${s}.png`, await grab(Math.round(+s * fps))); }
else { const [a, b] = rest.map(Number), f0 = a ? Math.round(a * fps) : 0, f1 = b ? Math.round(b * fps) : nf;
  const ff = spawn('ffmpeg', ['-y', '-loglevel', 'error', '-f', 'image2pipe', '-framerate', String(fps), '-c:v', 'png', '-i', '-', '-c:v', 'libx264', '-crf', '16', '-pix_fmt', 'yuv420p', out], { stdio: ['pipe', 'inherit', 'inherit'] });
  for (let f = f0; f < f1; f++) { if (!ff.stdin.write(await grab(f))) await new Promise(r => ff.stdin.once('drain', r)); if (f % 60 === 0) console.log('frame', f); }
  ff.stdin.end(); await new Promise(r => ff.on('close', r)); }
await br.close();

Nécessite npm i puppeteer-core (quelques Mo) et ffmpeg dans PATH. Si ffmpeg est manquant, installez-le une fois (winget install ffmpeg / brew install ffmpeg / apt install ffmpeg) ; si ce n'est pas possible, utilisez un binaire intégré (Python imageio-ffmpeg, ou npm ffmpeg-static) et mettez son chemin dans le script. Pour les longs rendus, exécutez 2 à 4 copies sur des plages d'images séparées et assemblez-les avec le demuxer concat de ffmpeg (possible car render(f) est pur).

e. Mise au point visuelle sur des images fixes (Porte A). Rendez 5 à 8 images fixes aux limites des temps, assemblez-les en une seule ligne (ffmpeg -i a.png -i b.png … -filter_complex "[0]scale=360:-1[a];[1]scale=360:-1[b];…;[a][b]…hstack=inputs=N" row.png) et regardez. Chaque image fixe doit passer :

• elle ressemble à une illustration finie ;
• le cadre est plein ;
• le style provient des références et rien de la liste Ne pas copier n'apparaît ;
• le sujet se lit à la taille d'un téléphone ;
• il n'y a pas de visages idiots ou d'articulations cassées ;
• la texture est présente ;
• le texte est lisible et dans les marges.

Corrigez et répétez. Pour les personnages, faites valider la planche de poses d'abord.

f. Rendu et révision du mouvement (Porte B). Rendez la vidéo, puis lisez-la comme une bande : ffmpeg -i out.mp4 -vf "fps=3,scale=144:-1,tile=15x3" -frames:v 1 strip.png. Vérifiez :

• il y a une accroche ;
• l'énergie monte et il y a une respiration avant la récompense ;
• chaque transition et mouvement de caméra a une raison ;
• pas de temps mort de plus de ~2 s ;
• le dispositif de continuité est visible ;
• pas de bugs : scintillement, images qui s'empilent, segments vides, texte tronqué.

g. Son. Écrivez score.mjs (Node simple, sans paquets) qui synthétise un fichier WAV stéréo 48 kHz :

• Instruments : pincement Karplus-Strong ; cloche inharmonique ; nappe de sinus désaccordés ; synthé dent de scie/carré via un passe-bas à un pôle ; bruit filtré via un filtre à variable d'état avec une fréquence de coupure qui peut glisser (whooshs, impacts, rugosité du vent).