Motion Lab

Que fait Motion Lab ?

Une pièce de mouvement dirigée : chaque adjectif devient un nombre, chaque suivi est une note mesurée, et le film montre le vrai mécanisme en action. Référence de construction : examples/cofoundr/ dans cette compétence (SPEC.md, compositions/, REVIEW.md, preview.mp4). Lisez-la avant votre première construction dans une session.

Chargez hyperframes pour le contrat de rendu, puis suivez ces étapes. Les règles hyperframes priment sur le format ; cette compétence prime sur l'histoire, l'apparence et le processus.

1. Lire la source

Avant d'écrire quoi que ce soit, lisez le sujet lui-même : dépôt, README, la route ou le fichier de pipeline principal, la tarification, le site en ligne. Extrayez :

• le mécanisme : les vraies étapes dans l'ordre (noms de fonctions, appels API, étapes).
• les vrais nombres : tailles de jeux de données, comptages, poids, minutages, limites. N'en inventez jamais un. Une valeur que la source ne donne pas est soit supprimée, soit marquée comme illustrative dans REVIEW.md.
• la marque : hex de la couleur d'accent, deuxième couleur, SVG du logo, polices, tout fichier de verrouillage de style.
• un détail surprenant qu'un développeur citerait (une limite, une chaîne de repli, un bug qui a été livré).

Si la personne nomme une technologie que la source n'utilise pas (un sponsor, un outil d'un tweet), ne la dessinez pas. Dites-le et demandez à quoi elle sert.

2. Écrire SPEC.md (le prompt dirigé)

Le prompt vague (« cool, premium, moderne ») donne du bleu marine foncé, des anneaux lumineux, des particules et un slogan inventé. Le prompt dirigé donne le film. Écrivez SPEC.md à la racine du projet à partir de references/spec-template.md. Chaque ligne est un nombre :

• OBJECTIF, SORTIE (1080x1080, 60 ips par défaut pour X), TEMPS (secondes x 60 = images).
• APPAT : fond, encre, encre atténuée, couleur de règle, accent et sa signification, polices d'affichage et de corps avec tailles en px et crénage, rayon et ombre des cartes.
• OBJETS : chaque chose que le spectateur doit reconnaître, tirée de l'interface utilisateur réelle du produit.
• MOUVEMENT : easings par rôle, durées et décalages en images (references/numbers.md).
• PLANS : plages d'images, un mouvement héroïque chacun, ce que le spectateur lit, la transition vers le plan suivant.
• INTERDIT et QA (les images à vérifier et ce que chacune doit montrer).

3. Forme narrative (ce qui a fait fonctionner le film cofoundr)

1. Accroche à l'image 0. La première image est la vignette. La ligne d'accroche est déjà posée dessus, dans la police serif d'affichage, alignée à gauche, un mot en accent. Une grande forme de marque se tient à côté. Exemple : « i couldn't find a cofounder. » avec le cercle bleu.
2. Un exemple parcourt tout le mécanisme. Une entrée réelle (l'URL LinkedIn de l'utilisateur, une requête réelle) entre dans une carte produit et se déplace à travers chaque étape. La forme de l'accroche se prolonge dans la carte (elle devient l'avatar), de sorte que le spectateur ne perde jamais le fil.
3. Un rail d'étapes en haut nomme les vraies étapes (« enrich you, search 700M, score 30, write intros ») et allume chaque nœud lorsque l'image l'atteint. C'est le diagramme d'architecture, intégré au film.
4. Chaque étape a sa propre forme visuelle : un champ tapé, un champ de points qui se réduit de 700M à 30, des barres triées par score avec les 10 premières conservées en accent, une carte de résultat tapant sa sortie. Des lignes similaires n'obtiennent jamais la même image.
5. Payoff = le logo qui prend un sens. Les deux formes (vous et la correspondance) glissent ensemble dans le logo, le wordmark apparaît en fondu, une ligne avec les chiffres clés. Maintenez 2 s+, immobile.

Longueur 15-17 s. Moins de 15 s si la personne veut une boucle.

4. Apparence

Par défaut, utilisez l'interface claire du produit, pas un vide sombre : fond comme #f0f2f8, cartes blanches de rayon 28 avec 0 18px 40px rgba(15,23,42,.08), encre #0f172a, atténué #64748b. Affichage : la police serif de la marque (téléchargez-la dans assets/fonts/, @font-face dans chaque scène qui l'utilise). Corps : Inter 500/700. Texte lu à 28 px minimum. L'accent marque un point focal par image.

Interdit : fond bleu marine foncé, lueur, bloom, néon, particules, dégradés violet/bleu, cartes en verre, étiquettes en monospace majuscules, chips en pilules, tout centré, chaque élément qui apparaît en fondu, titres qui dérivent après l'atterrissage, le logo coincé dans un coin, trois cartes en ligne, grilles de KPI, visages ou noms de personnes réelles comme faux candidats.

5. Construction

• npx hyperframes init <dir> dans <slug>-video/. La racine index.html monte 3 scènes : hook, la scène du mécanisme (un cadre continu pendant que l'interface utilisateur agit), payoff.
• Initialisez chaque aléatoire (mulberry32). Les points et barres générés sont des enfants d'une scène chronométrée.
• Utilisez fromTo pour chaque tween ; immediateRender: false sur les fromTo répétés de la même cible après le premier.
• Gardez un helper de décalage temporel (const at = (t) => t + …) dans la scène du mécanisme, de sorte qu'un changement de tempo soit une ligne, pas vingt.
• Le texte qui peut changer (l'URL, le titre) va dans des variables de composition.

6. La boucle de laboratoire (suivis avec preuves)

Ne faites jamais confiance à la première construction. Après chaque passage :

1. npx hyperframes check --json ; corrigez chaque erreur. line_unread signifie maintenir la ligne plus longtemps (0,5 s + 0,3 s par mot) ou couper des mots ; ne réduisez jamais la taille.
2. npx hyperframes snapshot --at <chaque milieu et fin de plan> et lisez la planche contact.
3. Écrivez chaque problème comme un suivi numéroté avec des chiffres, comme la référence les imprime : « le tag besoin est à l'écran 0,56 s, minimum 1,27 s : placez-le à 0,9 s et décalez tout après 1,6 s de +0,6 s ». Enregistrez-les dans REVIEW.md.
4. Après le rendu, extrayez les images de couture du MP4 lui-même (ffmpeg -vf "select='eq(n\,F1)+eq(n\,F2)',scale=360:-1,tile=Nx1") et regardez-les.

7. Musique

Utilisez la piste que l'utilisateur donne (copiez-la dans assets/audio/). Sans aucune, demandez-en une, ou proposez une partition synthétisée en code à partir des numéros d'images (references/sound.md).

1. python3 scripts/find_drop.py <track> affiche la carte de volume et les plus grosses chutes avec leur début exact et les temps autour d'elles.
2. Choisissez le moment héroïque du film (les formes du logo qui se touchent, le résultat qui atterrit). Calculez l'image où cela se produit réellement (pour back.out(1.4) les formes se touchent à ~23 % du tween).
3. data-media-start = début de la chute − temps héroïque, ajusté au temps le plus proche pour que le film commence sur un temps. Le son arrive 0 à 1 image après l'image, jamais avant.
4. <audio id="music" class="clip" data-start="0" data-duration="<film>" data-media-start="…" data-volume="1" data-fade-in="0.05" data-fade-out="1.2">.
5. Rendez, puis mesurez : npx hyperframes audio <mp4> --json doit montrer un début à moins d'une image de l'image héroïque ; volume −16 à −14 LUFS, pic vrai ≤ −1 dBTP. Dites que cela a été mesuré, pas entendu.

8. Livraison

• npx hyperframes render -f 60 -q delivery -o renders/<slug>.mp4, puis ffprobe pour la taille, les ips et le nombre d'images.
• Envoyez le MP4 à l'utilisateur.
• REVIEW.md : choix créatifs, ce qui a été mesuré, le temps le plus faible, les avertissements conservés intentionnellement.
• Rédigez le post dans la voix de l'utilisateur (par défaut : minuscules, accroche en premier, lignes courtes, le mécanisme en étapes >, un détail réel du code, pas de mots accrocheurs). Ne le postez jamais.