Motion Design en Code

Que fait Motion Design en Code ?

Avant tout, demande

• Format et durée (ex. reel 9:16 1080×1920 30 fps), où sera-t-il publié.
• Couleurs, police, logo de la marque et ce qui ne peut pas être modifié (le logo s'utilise tel quel).
• Style de référence (une vidéo ou une image) et s'il y a des textes ou uniquement des graphismes.
• Si le montage final est fait par l'utilisateur (Premiere/After Effects) : livre alors des clips, pas seulement une vidéo unique.

Moteur

• Node + @napi-rs/canvas pour dessiner, ffmpeg pour encoder.
• Chaque image est une fonction pure du temps draw(ctx, t) : pas d'état entre les images, ainsi n'importe quel instant peut être régénéré, vérifié ou rendu en parallèle.
• Fichiers séparés pour : bibliothèque (palette, police, easing, ressorts), séquences, arrière-plan, rendu, planche de contact, analyse.
• Sur Windows, Python s'appelle py.

Mouvement

• Ressorts (réponse d'un ressort amorti en survitesse) pour les entrées et déplacements : départ décidé, arrivée douce, survitesse à peine perceptible. Tiens 3–4 préréglages (standard, rapide pour les sorties, lent pour les grands déplacements, doux) plutôt que des valeurs éparpillées.
• Ease-in-out doux pour le morphing des formes et les lignes qui se tracent.
• Motion blur : 4 sous-images sur un obturateur à 180°, moyennées. Ralentit le rendu : prévois une option sans flou pour les aperçus.
• Décalages de 0,05–0,15 s entre les éléments en série.
• Pas de rebonds cartoon si le style est élégant ; rythme relaxé, espace entre les actions.

Continuité

• Style « une forme qui se transforme » : chaque scène naît de la géométrie de la précédente, pas de coupes nettes.
• Un élément ne disparaît pas et ne réapparaît pas pendant une transformation : l'original cesse d'être dessiné dans la même image où naissent ses successeurs, avec la même position, taille et couleur.
• Deux formes qui échangent partagent rotation, échelle et couleur à l'instant de l'échange ; les fondus se chevauchent (jamais une image vide ou double).
• Grands remplissages blancs : les faire croître depuis le centre pleins, pas en fondu (en fondu ils semblent gris).
• Si le style le demande, rien de fixe : respirations, rotations lentes, flottements, léger push-in de caméra.

Contrôle

• Planche de contact des images avant le rendu complet.
• Un script d'analyse qui mesure combien l'image change toutes les 0,5 s : trouve les passages fixes et les sauts brusques.
• Vérifie la durée, la résolution et les images par seconde du fichier final avec ffprobe.

Export

• Aperçu / réseaux sociaux : MP4 H.264 -crf 14 -pix_fmt yuv420p.
• Montage : MOV ProRes 422 HQ 10 bits.
• Audio ajouté après :

  ffmpeg -i video.mp4 -i audio.wav -map 0:v -map 1:a -c:v copy -c:a aac -b:a 256k -shortest final.mp4
  

Reel Instagram

• Centre des graphismes à (540, 960) ; zone utile large au maximum ~900 px.
• La grille du profil recadre le centre en 4:5 (1080×1350) et 3:4 : le contenu clé se situe entre y ~420 et ~1500.
• En bas et à droite se trouvent la légende et les boutons de l'application : laisse-les libres.
• Pour les autres tailles d'export, vois le plugin grafica.