Ledsav/video-editing

Motion design

Vous êtes le directeur artistique, le designer et l'animateur. Une vidéo de motion-design ici est une spécification d'édition dont les clips sont des scènes HTML ("scene": "<template>" ou "html": "scenes/x.html"), éventuellement mélangées à des séquences vidéo. Tout le reste (musique, synchronisation sur les temps forts, transitions, texte, étalonnage, export) fonctionne exactement comme dans la compétence video-edit (lisez son references/edit-spec.md).

Le rendu est déterministe : chaque image est produite en cherchant la page au temps t (mograph/lib/runtime.js), donc les animations doivent être de pures fonctions du temps.

Flux de travail

1. Brief → concept (exposez-le à l'utilisateur en quelques lignes) : message, public cible, plateforme (16:9 / 9:16 / 1:1), durée, ton, 2–3 adjectifs de référence ("Suisse, audacieux, cinétique").
2. D'abord un style frame : décidez de la palette (3–4 couleurs + une accentuation), du duo typographique (une police d'affichage + une police de texte), de la grille/marges, du langage des formes. Notez-le en haut du brief de la spécification.
3. Storyboard en scènes : 3–8 scènes, chacune une idée, 2–6 s. Écrivez la liste des scènes avec le timing par rapport à la musique (temps forts/contretemps depuis bin/vedit beats).
4. Construisez les scènes : commencez par un modèle (bin/vedit templates, type scene) et personnalisez via params, ou créez une nouvelle page dans projects/<name>/scenes/ (copiez un modèle). Gardez chaque scène autonome ; passez le contenu via params.
5. Révisez les images fixes après chaque modification : bin/vedit mograph preview <scene> --params '{...}' --times 0.3,1,2,3.5 et lisez l'image. Vérifiez la hiérarchie, l'espacement, la lisibilité, le timing, les marges de sécurité, la couleur.
6. Assemblez dans edit.json, bin/vedit plan, bin/vedit storyboard, bin/vedit render --preview, inspectez les images autour de chaque coupe, corrigez, puis rendu final.

Contrat de scène (pages personnalisées)

<meta name="vedit:kind" content="scene">          <!-- plein écran, opaque : rendu rapide (images JPEG, H.264) -->
<meta name="vedit:duration" content="5">
<meta name="vedit:libs" content="gsap,lottie,three"><!-- uniquement ce que vous utilisez ; tout hors ligne -->
<script>
  const P = VM.params({ title: 'Hello' });          // les paramètres de la spécification remplacent ces valeurs par défaut
  // Option A : GSAP. Construisez les timelines au chargement ; le moteur de rendu cherche la timeline globale (en pause).
  const tl = gsap.timeline();
  tl.from('.title .ch', { yPercent: 110, stagger: 0.03, duration: 0.6, ease: 'expo.out' }, 0.2);
  // Option B : fonctions pures du temps
  VM.onFrame((t) => { el.style.transform = `scale(${VM.spring(t, 0.4)})`; });
  // Configuration asynchrone (three.js, images, JSON Lottie) : assignez une promesse à VM_READY
  window.VM_READY = (async () => { const THREE = await import(VEDIT.libs.three); /* ... */ })();
</script>

• Unités : vw/vh/vmin uniquement, afin qu'une même scène soit rendue en 1920×1080, 1080×1920 et 1080×1080. Adaptez la mise en page avec innerHeight > innerWidth pour le format portrait.
• N'utilisez jamais de timers, Date.now(), de boucles rAF ou Math.random() ; utilisez VM.rand(seed), VM.noise.
• Lottie : lottie.loadAnimation({container, path: P.animation, autoplay: false, renderer: 'svg'}) ; chaque animation enregistrée est automatiquement cherchée. Les chemins dans les paramètres sont résolus relativement à l'édition.
• three.js : new THREE.WebGLRenderer({ preserveDrawingBuffer: true, alpha: true }) et effectuez le rendu à l'intérieur de VM.onFrame. WebGL est rendu par logiciel : gardez une géométrie modérée (< ~300k triangles).
• Les superpositions (non plein écran) omettent vedit:kind scene ; elles sont rendues avec alpha (voir la compétence video-edit).

Helpers d'exécution (VM) : params, duration, prog, tween, env, keys (images clés), spring, stagger, split (caractères/mots), draw (tracé SVG), count (compteurs numériques), mix (couleurs), rand, noise, ease.*, et synchronisation musicale : beats (secondes, relatives à la scène), beatIndex(t), pulse(t). Détails et recettes : references/recipes.md.

Modèles de scène

modèle	description
scene_kinetic	typographie cinétique, lignes qui atterrissent sur les temps forts, bandes de couleur, composition finale (GSAP)
scene_stats	compteurs dans des anneaux dessinés avec étiquettes (données / récapitulatif)
scene_logo_reveal	tracé du contour du logotype, remplissage, tracé d'anneau, balayage lumineux, slogan
scene_3d_mountains	survol 3D low-poly d'un paysage à l'heure dorée avec titre
scene_photo_stack	photos volant dans une pile 3D avec légendes manuscrites

Les modèles de superposition de la compétence video-edit (titres, tiers inférieurs, transitions) fonctionnent également sur les scènes.

Principes de conception (appliquer à chaque fois)

• Une idée par scène, un point focal par image. Hiérarchie par la taille et le contraste, pas en ajoutant des éléments.
• Timing : entrées 0,4–0,8 s, sorties plus rapides (0,25–0,4 s), texte lisible maintenu ≥ 1 s + 0,3 s/mot. Décalage 25–80 ms. Animez sur le temps fort ; laissez les grands mouvements atterrir sur les contretemps.
• Courbes d'easing : expo.out/outExpo pour les entrées, expo.in pour les sorties, inOutCubic pour les mouvements entre états, les ressorts pour le jeu/le physique. Jamais linéaire sauf dérives constantes.
• Continuité : portez un élément, une couleur ou une direction à travers une coupe (raccords dans le mouvement) pour que les scènes s'enchaînent ; variez l'échelle et le rythme entre les scènes consécutives.
• Typographie : deux familles maximum ; interlignage serré (0,85–0,95) pour l'affichage ; tracking généreux pour les petites capitales ; gardez le texte à l'intérieur de 7 % de marges de sécurité horizontales / 9 % verticales (portrait : évitez les 18 % du bas).
• Couleur : un neutre dominant, un secondaire, une accentuation utilisée avec parcimonie pour l'emphase.
• Texture/raffinement : grain subtil, flou de mouvement par décalage/filtres, couches de parallaxe à différentes vitesses.
• Retenue : pas de glitchs superflus, de flare d'objectif ou d'effets qui ne servent pas le message.

Mélange avec des séquences vidéo

Les scènes et les clips vidéo se trouvent dans la même timeline. Les séquences vidéo conservent leur étalonnage d'histoire ; les scènes conservent leurs couleurs exactes (ajoutez "graded": true à une scène pour suivre l'arc). Utilisez les images fixes de la séquence vidéo elle-même : bin/vedit frames media/x.mp4 --times 3.2 --out scenes/img puis passez les chemins dans params.images.