IuryDevz/motion-frames

Motion Frames — système de motion design par images

Méthode complète pour produire du motion design de niveau professionnel sans logiciel vidéo : l'animation entière est une page HTML dont la scène est une fonction pure du numéro d'image, photographiée image par image par un Chromium sans tête et assemblée en MP4 avec ffmpeg. Tout est déterministe : même entrée, mêmes pixels — on peut rendre en parallèle, reprendre à n'importe quelle image et synchroniser son et image avec une précision de 1/60 s.

1. Règle inviolable : fonction pure de l'image

• La scène entière vit dans renderFrame(n), où n est le numéro d'image (60 ips).
• Interdit l'horloge (Date.now, performance.now, état accumulé via requestAnimationFrame) et interdit l'aléatoire sans graine : aléatoire uniquement via hash(i) déterministe de l'indice/image.
• Mouvement = formules fermées du temps écoulé depuis le début de l'événement :
  • Ressort analytique (sous-amorti) : spring(t, freq, damp) avec dépassement — c'est la physique par défaut de tout (entrées, pops, empilement).
  • Easings nommés : easeOutCubic, easeInOutCubic, easeOutBack.
  • Segments : seg(n, a, b) = progression 0→1 d'une plage d'images ; clamp, lerp pour interpoler n'importe quelle grandeur (position, couleur, géométrie de morph).
• Format standard : 1080×1920, 60 ips. Durée décidée par le contenu (test rapide : 8 s = 480 images).

2. Pipeline (dossier pipeline/ de cette compétence)

Fichier	Ce que c'est
pipeline/template.html	Page de base avec les helpers (T, seg, spring, easings, hash) et le squelette renderFrame(n)
pipeline/render.mjs	Rendu CDP sans dépendances : node render.mjs <page.html> <dossier> <nb_images> 1080 1920 [image_début]
pipeline/preview.mjs	Rend uniquement les images choisies en PNG : node preview.mjs <page.html> <dossier> "0,60,160,300" <total> 1080 1920
pipeline/sfx_kit.py	Kit d'effets sonores synthétisés (numpy/scipy) liés au numéro d'image

• Chromium : le rendu cherche CHROME_BIN, puis un chrome-headless-shell à côté du script, puis le chemin connu du workspace. Certains Chromium ne conviennent pas : les builds avec politique de domaine/WebGL (ex. : le Chromium géré de Hatch) refusent de fonctionner seuls — utilisez un chrome-headless-shell autonome.
• Vitesse : FMT=jpeg (qualité 90) est ~2× plus rapide que PNG et indistinguable dans le résultat. PNG seulement pour la prévisualisation.
• Shards : les vidéos longues sont rendues en 2 processus parallèles (moitiés de l'intervalle, en utilisant l'argument image_début), chacun avec son PORT (CDP). Maximum 2 en parallèle sur des machines ~8 Go — 3 épuise la RAM.
• Assemblage : ffmpeg -framerate 60 -i dossier/f%04d.jpg -i audio.wav -c:v libx264 -pix_fmt yuv420p -crf 18 -c:a aac -b:a 192k -movflags +faststart out.mp4.
• Polices et images locales : référencez-les par chemin relatif au HTML (fonctionne via file://). Polices de la marque : téléchargez les .woff2 et générez un CSS @font-face local — ne dépendez pas du réseau au moment du rendu. Images utilisées dans les scènes : incluez une <img> cachée de préchargement dans le corps de la page, sinon les premières images sortent sans elle.

3. Flux de production (dans cet ordre)

1. Scénario et références : définissez la phrase de chaque scène. Étudiez les références image par image (extrayez une planche contact avec ffmpeg) et notez la grammaire — ne copiez pas la surface.
2. Audio d'abord (s'il y a narration) : détectez les silences (ffmpeg -af silencedetect) avant de décider les coupures ; transcrivez avec faster-whisper (small, word_timestamps=True, passez l'audio en tableau numpy lu depuis WAV 16 kHz — le décodage interne de faster-whisper plante dans certaines versions de PyAV) et transformez les temps des mots-clés en repères d'image (seconde × 60). N'inventez jamais la durée de la parole.
3. Reconnaissance de marque (vidéos de produit) : récupérez l'identité réelle — téléchargez le HTML/CSS du site et extrayez le logo (fichier image), la palette (hex les plus fréquents dans le CSS) et les polices. Utilisez le logo et les polices officielles dans la vidéo.
4. Conception par scènes : une fonction par scène (s1(n), s2(n)…), frontières aux repères de la parole. Chaque scène naît avec son événement principal déjà synchronisé.
5. Prévisualisation obligatoire : planche contact de 15 à 30 images avec preview.mjs pour vérifier le rythme et la composition — et vérifiez toujours 2–3 images clés en taille réelle : la planche contact trompe (elle cache les collisions de texte, les débordements de largeur et les petits détails).
6. SFX par micro-événement (section 8), avec les mêmes numéros d'image que l'animation.
7. Rendu en shards + assemblage + QA : extrayez les images du MP4 final (pas des trames isolées) et vérifiez avant de livrer.

4. Langage du mouvement (ce qui sépare le professionnel du générique)

• Ouverture au look cinéma : la première seconde est un titre — typographie grande entrant avec ressort et caméra, fond avec profondeur. Rien d'écran statique.
• La caméra ne s'arrête jamais : dérive lente d'échelle (1→1,03–1,09) sur tout plan ; coupures déguisées par le mouvement (dolly/zoom/pan avec parallaxe entre couches).
• Densité : un micro-événement toutes les 0,5–1,5 s. Si un passage reste 2 s sans rien, c'est faux.
• Physique partout : ressorts avec dépassement, squash & stretch sur les chutes et rebonds, anticipation avant le mouvement principal. Le mouvement linéaire est interdit par omission.
• Les transitions sont des événements, pas des coupures : morph de l'objet (la pilule devient barre, la barre devient carte), zoom-through avec flou, ou zoom-punch (échelle traversant 1→1,09 avec crossfade d'environ 18 images aux frontières de scène).
• Palette réduite : fond d'une famille + UNE couleur d'accent avec glow ; typographie épaisse ; beaucoup de respiration.

5. Fonds : jamais plats, toujours vivants

Le fond noir plat (ou toute couleur plate) est interdit — le fond a sa propre vie, son flux et sa parallaxe entre arrière-plan/milieu/premier plan. Trois recettes éprouvées :

• Studio vivant (promos sombres) : dégradé avec teinte de la couleur d'accent, 2 blobs de couleur flous dérivant lentement, cône de lumière en haut, particules bokeh flottantes (hash déterministe), sol avec grille de points en perspective + ligne d'horizon lumineuse + reflet sous l'élément central.
• Aurore liquide (scènes continues) : 3–4 bandes de dégradé radial allongé, mix-blend-mode: screen, flou fort, dérivant en Lissajous et tournant lentement ; deux palettes avec crossfade quand une commande change la « couleur » de la scène ; poussière de particules par-dessus.
• Glace de la marque (typographie claire) : dégradé clair de la couleur de la marque, soie menthe fluide (même technique que l'aurore, en clair), grille de points subtile et poussière — propre, mais respirant.

6. 3D réelle (soignez — c'est là que les vidéos sont les plus en retard par rapport aux références)

• CSS perspective + rotateX/rotateY sur téléphones, cartes et tableaux de bord ; l'élément flotte avec une ombre vivante qui réagit à l'inclinaison.
• Parallaxe réelle : fond, milieu et premier plan à des vitesses différentes dans tout zoom/pan.
• Cubes et boîtes 3D en CSS : chaque face est un div positionné avec translateZ = moitié de la largeur/hauteur (la rater ouvre les arêtes).
• Escaliers/blocs isométriques montants, piles avec profondeur, verre (backdrop-filter quand le fond derrière est simple) et éclat spéculaire balayant.
• Règle pratique : si la scène peut être décrite comme « texte + rectangle plat », il manque de la 3D. Ajoutez inclinaison, couche ou profondeur jusqu'à ce qu'elle semble photographiée, pas dessinée.

7. Les quatre grammaires (structures plan par plan)

A. Cinéma/morph (ouvertures et tests de style)

Titre cinématographique → objet avec squash & stretch sur trajectoire pointillée → caméra plonge et l'objet fait morph (cercle→pilule→écran) → élément 3D tournant avec zoom sur la face → typographie cinétique avec cercle dessiné à la main → panneau de verre avec graphique en ressort → fermeture retournant au point initial (boucle parfaite, le cas échéant).

B. App promo premium (références type Opal/Qwix)

1. Fond ambiant vivant + spotlight ; UNE couleur d'accent avec glow/bloom.
2. Ouverture : UI/téléphone en perspective 3D flottant, dolly-in avec pull focus (commence flou, fait le point).
3. Plongée de la caméra dans un détail (barre du graphique) qui devient le plan suivant.
4. Pilules de verre avec icône + numéro comptant (easeOut) + étiquette ; bordure avec arc de lumière voyageur.
5. Agrégation : lignes de support se dessinent depuis les pilules et convergent vers un nombre géant avec ▲.
6. Icône de l'app avec morph + explosion de particules.
7. Sheet de l'app + bouton-pilule géant de CTA avec balayage de lumière.
8. Logo reveal : symbole se dessine (SVG dash) + wordmark + petite URL.

C. Scène continue interactive (référence « Built with Claude »)

Une seule scène, sans coupures, sur aurore liquide : symbole se dessine → pilules de commande entrent → curseur voyage et clique sur une pilule → la pilule fait morph en barre de prompt → prompt tapé mot par mot (caret clignotant, dernier mot en évidence) → la barre fait morph en résultat (carte qui se construit de l'intérieur : anneau, barres, play, pourcentage de progression) → deuxième commande tapée change la couleur du fond entier → fermeture avec symbole + signature. L'histoire est « quelqu'un utilisant le produit ».

D. Type clair (annonces PT-BR de typographie)

Fond glace de la marque ; typographie épaisse de la police de la marque comme protagoniste, mot par mot sur le beat de la parole, mot-clé avec couleur d'accent, ombre-fantôme colorée et gribouillis à la main (barré, cercle, swoosh — SVG dash). Entrecoupé d'UI réelle qui raconte l'histoire : notifications s'empilant avec physique, comparatif de barres, système orbital de nœuds autour du logo, chat avec bulles parlantes, carte de statut avec graphique, compteur géant. Frontières de scène par zoom-punch ; beat d'inversion sombre au milieu (« Et ça ne s'arrête pas là ! ») ; slogan en 3 coups avec icône ; fermeture avec logo + CTA cliqué par le curseur + URL.

8. Son : SFX par micro-événement

• Piste montée dans sfx_kit.py : chaque événement sonore utilise le même numéro d'image que l'événement visuel.
• Vocabulaire : pop (clics, cartes, grands mots), tick (frappe, barres, compteurs), whoosh (transitions et morphs), shimmer (confirmations, révélations), pad (nappe harmonique discrète en dessous de tout).
• Densité égale à celle de la vidéo : s'il y a un micro-événement visuel, il y a du son. Sous la narration, mixer la piste à ~0,5 et laisser la voix dominer.
• Ne générez ni ne remplacez jamais la voix de l'utilisateur : la narration est toujours la sienne, intacte (coupures de silence uniquement avec l'audio analysé et la synchronisation refaite après la coupure).

9. Checklist anti-générique (à vérifier avant de livrer)

1. La typographie est-elle protagoniste ou simple étiquette d'UI ? (elle doit être protagoniste)
2. Y a-t-il un micro-événement toutes les 0,5–1,5 s dans TOUTES les scènes ?
3. Quelque chose s'empile, tombe ou entre en collision avec physique — ou tout flotte isolé ?
4. Existe-t-il une interaction (curseur cliquant, prompt tapé, produit utilisé) ?
5. Y a-t-il une couche de gribouillis dessinés (cercle, souligné, flèche, barré) ?
6. Au moins une transition est-elle un morph d'objet, pas seulement un zoom ?
7. Le fond coule-t-il avec sa propre vie et parallaxe entre couches ?
8. L'UI a-t-elle un contenu « réel » qui raconte l'histoire (valeurs, conversations, noms) au lieu de placeholders abstraits ?
9. Y a-t-il un système orbital, un texte sur trajectoire ou un autre élément « signature » ?
10. La 3D passe-t-elle le test de la section 6 ?
11. SFX sur chaque micro-événement ?

10. Vérité commerciale (n'inventez pas de chiffres)

• Un nombre qui devient une promesse commerciale (taux %, % d'approbation, prix) ne s'invente pas : si la marque ne publie pas, utilisez un comparatif visuel sans nombre (barre haute × barre basse), des compteurs de volume/croissance comme ressource de motion et un langage qualitatif (« élevé », « bien moindre »).
• Un fait incertain sur le produit se signale AVANT d'écrire le scénario, jamais après le rendu.

11. Erreurs déjà arrivées (ne pas répéter)

• La planche contact trompe : les miniatures cachent les collisions de texte et les débordements de largeur. Toujours valider les images clés en taille réelle.
• Attribut dupliqué dans SVG : deux stroke-dasharray sur le même élément — le premier gagne et le draw-on meurt silencieusement. Un attribut par élément.
• Index de scène codé en dur : une fonction qui renvoie une scène fixe (return 5) casse la dernière scène quand le nombre de scènes change. Dérivez du tableau de frontières.
• Cube 3D ouvert : faces avec translateZ erroné (≠ moitié de la dimension) laissent des interstices sur les arêtes.
• 3 shards en parallèle = OOM sur petite machine. Maximum 2.
• Le Chromium du système peut ne pas convenir (politique de domaine/WebGL) : utilisez chrome-headless-shell autonome.
• Image sans préchargement n'apparaît qu'après les premières images : <img> caché dans le corps résout le problème.
• Scène « presque juste » : mesurez le texte large dans une grande police — une phrase de slogan en 118 px peut dépasser 1080 px et casser méchamment ; vérifiez la largeur réelle dans la prévisualisation grande.

12. Projets-exemples (productions réelles de ce système)

• ~/workspace/motion-frames/teste_8s.mp4 — grammaire A : boule/morph/cube/typographie en boucle, 8 s.
• ~/workspace/iphone18/iphone18_pro.mp4 — narration synchronisée mot par mot (53 s), iPhone 3D en CSS.
• ~/workspace/kalo/kalo_app_v2.mp4 — grammaire B avec fond studio vivant + scène de scan de repas par IA, 15 s.
• ~/workspace/kalo/feito_com_muse.mp4 — grammaire C : scène continue, curseur, prompt tapé, morphs, aurore avec crossfade, 14 s.
• ~/workspace/turtle/turtlepags.mp4 — grammaire D complète avec narration, identité réelle de la marque (logo/palette/polices du site), 53 s.