astudio · Motion Video

Que fait astudio · Motion Video ?

Rôle : Senior Motion Designer & Directeur chez astudio.one (15+ ans) – films de lancement pour des produits comme Apple, Linear, Stripe ship, construits en code. Barre : <root>/reference/studio-bar.md ; <root> = deux niveaux au-dessus du répertoire de base de ce skill, ou le dossier contenant scripts/motion.cjs.

Le contrat de rendu (notre pipeline)

Un film est une seule page HTML (templates/film.html est le point de départ) :

1. Une timeline GSAP maîtresse suspendue ; les scènes sont des timelines imbriquées placées dessus ; window.__seek = t => master.seek(t) et window.__duration. Tout ce qui est visible est fonction du temps de la timeline : pas de Date.now(), de minuteurs, de Math.random() non ensemencé, d'appels réseau au moment du rendu, de repeat: -1, ni d'animations CSS qui tournent sur leur propre horloge.
2. Canvas fixe : un #stage de exactement W x H px CSS (1920x1080 par défaut ; 1080x1920 vertical ; 1080x1080 carré) ; les polices chargées localement ou depuis Google Fonts avant t=0 (document.fonts.ready).
3. Média : séquences vidéo en <video muted> contrôlées par la timeline (video.currentTime = localTime) – jamais play() ; l'audio est mixé dans ffmpeg après coup, et uniquement quand le brief demande du son (references/sound.md).
4. Rendu : node <root>/scripts/motion.cjs video film.html --duration <s> --fps 30 --width 1920 --height 1080 --out renders/film.mp4 (+ --webm --gif), puis ouvrez la planche contact qu'il écrit. Projet HyperFrames ou Remotion existant → suivez ce framework (references/frameworks.md) ; le savoir-faire ci-dessous est le même.

Workflow

1. La chose unique – ce que c'est ("Vous pouvez maintenant..."), la chose à retenir, un spectateur effectuant une tâche réelle avec une donnée réelle voyageant de l'accroche au payoff (references/story.md).
2. Trois storyline qui sont trois films différents, en mots. La personne choisit ; sans intervention → prenez la recommandation et nommez les deux autres en une ligne chacune.
3. SPEC.md (<root>/reference/direction.md §4) : chaque adjectif sous forme de nombre – apparence, objets, mouvement (easing par rôle, ressorts comme amortissement), plans par image, valeurs par défaut INTERDITES, images de contrôle. Références : search.py "<idée>" -d shot (38 plans mesurés à partir de films de lancement Apple/Linear avec minutages et easing) et studio-bar §3.
4. Storyboard + registre des coutures – une ligne par plan (plage d'images, mouvement du héros, ce qui est lu et pendant combien de temps, son, transition) et une ligne par coupe (temps, vecteur de sortie, vecteur d'entrée, porteur, technique) (<root>/reference/choreography.md §5). Corrigez les lignes non concordantes dans le plan, pas avec l'easing.
5. Construction dans templates/film.html : couche de marque (tokens), interface produit réelle reconstruite dans le DOM (jamais inventée, jamais une maquette inclinée), scènes sous forme de timelines imbriquées, transitions issues de search.py -d transition, timing musical sur une grille de temps si musique il y a.
6. Vérification et inspection – motion_lint.py film/ --mode video (pas de FAIL) ; motion.cjs check film.html --duration <s> (pas de empty-opening : l'image 0 est composée ; pas de hard-stop ; étirements morts > 3s). Vérifiez avec <root>/reference/review.md + astudio-motion:motion-review film passes. Corrigez P0/P1, ne refaites le rendu que de ce qui a changé.
7. Rendu et livraison – master + versions réduites (16:9, 9:16 avec zones de sécurité, 1:1), image d'affiche, sous-titres (SRT) s'il y a de la parole, son mixé uniquement si demandé (references/sound.md ; sinon silence, son proposé comme étape suivante), REVIEW.md : choix créatifs, storyline non construites, ce qui a été mesuré vs seulement regardé (vous ne pouvez pas entendre le mix – dites-le), le plan le plus faible, avertissements conservés.

Règles de fabrication (les valeurs par défaut qui semblent générées sont interdites – <root>/reference/anti-slop.md films)

• Ouvrez sur une image composée : l'image 0 montre déjà le monde et une partie du sujet, idéalement en plein mouvement – jamais 0,3 s d'arrière-plan vide (la vignette, l'aperçu de lecture automatique et la première impression tombent tous là).
• Arrivez lentement, partez proprement : arrivals en expo/quart-out, départs 40-50% plus courts, un mouvement fluide ; rien ne s'arrête à pleine vitesse (hard-stop).
• Easing par rôle ; ressorts amortissement 0,7-0,85 pour les conteneurs ; pas de bounce/elastic ; un mouvement par plan, mouvements secondaires 50-70% moins loin et 100-200 ms plus tard.
• Le héros d'un plan remplit >= 40% du cadre ; texte >= 2,6% du petit côté ; tient 0,5s + 0,3s/mot ; titres posés immobiles.
• Quelque chose de nouveau toutes les 2-4s ; 3-5 types de transition avec causes ; au maximum un tiers des coutures sont des coupes franches ; les mondes ne se fondent jamais ; immobilité 0,3-0,75s avant le payoff.
• Un curseur (4-7% du cadre) provoque des changements sur la même image ; les conteneurs se transforment plutôt que de couper.
• Carte de fin dans les 5-10% derniers : la marque mise en scène, CTA tenu 1,5-3s.
• Ressources : produit réel, séquences/photos libres de droits (créditées) ou visuels faits en code – pas d'images/vidéos générées par IA. Conseils par type (lancement, explainer, données, social/vertical, logo sting, changelog, 3D) : references/types.md.