nxrskyaa/motionite

Motionite : motion design pour agents

Motionite transforme un brief en un film Remotion fini et déterministe qui a l'air conçu, pas généré. Il se compose de trois parties :

Partie	Emplacement	Utilisez-la pour…
15 NxrStyles	styles/ · comparaison + sélecteur	Choisir un système visuel complet par film
70 techniques	techniques/	Construire chaque mouvement avec des chiffres éprouvés (IDs T, N, X, C, U, H, R)
Code fonctionnel	examples/	Copier les tokens de lib/anim.ts, les démos de composition et les compositions de style

La consigne n'est pas le différenciateur. Une même consigne de showreel d'une ligne peut donner des films radicalement différents. Ce qui fait la différence, c'est l'itération sur les images fixes et le goût dans la boucle de critique. Ce skill est cette boucle.

Workflow (suivez dans l'ordre)

1 · Brief → faits vs choix

Notez :

• Faits : les actifs réels que vous possédez (fichiers logo, captures d'écran, séquences, hexagones de marque, polices, VO, musique + BPM), les affirmations, le rapport d'aspect, la durée et la plateforme.
• Choix : tout le reste. Si l'interface utilisateur ou le logo d'un produit réel manque, demandez ou laissez un espace réservé étiqueté. N'inventez jamais.
• Une phrase que le spectateur doit retenir. Un film a une idée par temps et un message global.

2 · Planche d'ambiance

Rassemblez 2 à 3 films de planche d'ambiance et notez ce qu'il faut en retenir, en chiffres : rythme de coupe (secondes par plan), hex de palette, famille de police, mouvement signature. Vous trouverez les IDs dans techniques/README.md. Si possible, réalisez une planche de contacts de chacun (ffmpeg -vf fps=2,scale=480:-1,tile=6x5) et lisez-la.

3 · Choisissez UN NxrStyle

Utilisez le tableau de décision dans styles/COMPARISON.md, puis ouvrez le fichier de ce style et suivez son ADN visuel (palette, type, mise en page, mouvement, transitions, timing, audio) et ses À faire/À ne pas faire.

• Un guide de marque fourni remplace la palette et la police du style, ainsi que toute interdiction.
• Vous pouvez emprunter une technique d'un autre style. N'empruntez jamais une palette ou un système de police complet.

#	Style	Sensation	#	Style	Sensation
01	Beat Reel	fort, champs de couleur coupés en barres	09	Live Bento Grid	affiche 1:1 en boucle de tuiles en direct
02	Night Caption Explainer	légendes VO 9:16, grand nombre	10	Pixel Bar-Grid Trailer	bande-annonce de jeu pixel, coupes de tramage
03	Floating Product UI	téléphone 3D, grand nombre, puces	11	One-Take Portal Zoom	un zoom logarithmique à travers les mondes
04	Editorial Ink	papier, sérif, surligneur	12	Console-as-Film	l'objet est le monde
05	One-Pan Flat World	un travelling de caméra, ciel par x	13	Clean Launch Film	sobre, un accent
06	PRESS START Menu	menu rétro 8 bits	14	Paper Stop-Motion	papier découpé sur 12s, riso
07	Frost Collectible	glacé, orbite, compteur menthe	15	Hand-Drawn Ink	auto-dessin bouillonnant, tache d'encre
08	Duotone Storybook	navire gravé + un chaud

4 · Liste des plans en images

Écrivez un tableau avant de coder :

Plan	Images	À l'écran à la première image	Ce qui bouge (image exacte)	Texte	IDs des techniques	Indice audio

Règles :

• Choisissez le fps (30 pour la plupart des travaux, 60 pour les films à interface lisse), puis définissez une grille de temps : BEAT = fps·60/BPM. Les plans durent des mesures entières, et les coupes arrivent 2 i avant le temps.
• L'image 0 est l'affiche, donc elle doit déjà être composée.
• Une idée par plan, avec ≥ 0,8 s de maintien lisible pour toute ligne.
• Ne mettez jamais deux dispositifs de transition dos à dos. Un changement de look arrive sur une coupe franche et dure ≥ 1 s.

5 · Construisez dans Remotion

Partez de examples/. Copiez src/lib/anim.ts (assouplissements E, ressorts SPR, prog, spr, lmix, track, hitPulse, blurIn/blurOut, rand, onTwos), ainsi que src/styles/kit.tsx et la composition de votre style choisi.

Règles de construction :

• render(frame) est pure : pas de Math.random, Date.now, minuteurs, transitions/animations CSS, ou d'état entre les images. Seulement rand(key) seedé. Re-simulez toute physique à partir de l'image 0 à un pas fixe.
• Entrez avec E.out et sortez avec E.in. Le mouvement secondaire commence à 55–75 % du primaire.
• Échelles les mouvements dans l'espace logarithmique (lmix). Une valeur qui recible est une somme de ressorts (track).
• Limite de vitesse : ≤ 25 px/image @60 sauf si étalé ou flou.
• Dépassement ≤ 2 par film et jamais sur le texte. Flash ≤ 2 par film, limité à 65–85 % (jamais une image entière vierge).
• Le texte entre en flou (12–20 px → 0, net à 60 % du mouvement). N'utilisez pas de fondus d'opacité simples.
• fontVariantNumeric: 'tabular-nums' sur chaque compteur. Mettez des guillemets autour des noms de police contenant des chiffres : '"Press Start 2P"'.
• Ne mettez jamais d'opacité ou de filtre sur un élément preserve-3d, ne mettez jamais will-change sur du texte mis à l'échelle par caméra, et n'utilisez jamais backdrop-filter dans les rendus sans tête.
• Cadence des couches : interface sur 1, personnages dessinés sur 2, marionnettes papier sur 12s. Les textures ne bouillonnent jamais.
• Boucles : la dernière image égale la première.

6 · Images fixes pour approbation (avant tout rendu complet)

Rendez une image fixe par temps, plus 3 images autour de chaque transition :

npx remotion still src/index.ts <CompId> out/s_<f>.png --frame=<f> --scale=0.5

Mettez-les dans une planche de contacts et regardez-les. Corrigez la composition, la lisibilité et la palette à ce stade, car une image fixe coûte des secondes et un rendu coûte des minutes. S'il y a un humain dans la boucle, obtenez l'approbation sur les images fixes.

7 · Rendu

npx remotion render src/index.ts <CompId> out/raw.mp4 --codec=h264 --crf=18 --pixel-format=yuv420p
ffmpeg -i out/raw.mp4 -c:v copy -af loudnorm=I=-14:TP=-1:LRA=11 -c:a aac -b:a 192k -movflags +faststart out/film.mp4

8 · QA (commandes complètes)

1. ffprobe : codec, taille, fps, et durée vidéo = durée audio (±1 i).
2. Loudness : −14 LUFS intégré (±1), ≤ −1 dBTP.
3. Planche de contacts à partir du MP4 final (pas à partir des images fixes) : 2 fps, tuiles 6×5.
4. Déterminisme : rendez une image deux fois et différenciez les pixels (elle doit être identique).
5. Courbe de différence d'image : pas de pics sur une seule image plus de 3× leurs voisins.
6. Hex de marque échantillonné à partir d'une image fixe, et débuts audio dans ±1 i de leurs coups visuels.

9 · Auto-critique (3 tours)

Notez la planche de contacts par rapport aux six tests dans qa.md : affiche, lecture, temps, budget, style et marque. Corrigez les trois pires problèmes, refaites le rendu et répétez jusqu'à trois fois. Rapportez ce que vous avez changé à chaque tour.

Règles de goût universelles (forme courte)

1. L'image 0 est une affiche, et chaque image en pause est composée.
2. Texte avec flou d'entrée. Pas de fondus simples. Les sorties accélèrent.
3. Une couleur d'accent, et elle signifie quelque chose.
4. Zoom et échelle dans l'espace logarithmique, et gardez les mouvements de caméra continus plutôt que par étapes (sauf dans les styles pixel).
5. Coupez sur la mesure, une idée par mesure, avec des maintiens lisibles.
6. Limite de flash 65–85 %, au plus deux fois. Dépassement au plus deux fois, jamais sur le texte.
7. Les transitions sont des dispositifs conçus (iris, étalement, tache, échelle à travers, inversion de polarité), jamais un fondu enchaîné.
8. Actifs réels plutôt que dessinés. Ne simulez jamais l'interface utilisateur d'un produit réel.
9. Le déterminisme est une caractéristique : la même image rend toujours les mêmes pixels.
10. Les interdictions esthétiques (sérif, crème, lueur, verre, emoji, particules) sont des valeurs par défaut pour les films de produits génériques. Une marque ou sa planche d'ambiance peut les outrepasser. Les lois physiques ne sont pas optionnelles.

Lois complètes : techniques/laws.md. Modèle de brief : techniques/prompt-skeleton.md.

Contrat de sortie

Lorsque vous livrez un film, rapportez :

• le style utilisé
• la liste des plans (images + IDs des techniques)
• le chemin vers le MP4 et la planche de contacts
• la ligne ffprobe, la lecture LUFS et le résultat du déterminisme
• ce qui a changé à chaque tour de critique
• tout espace réservé ou actif inventé