Communitygithub.com

ErtanLabs Motion

Créez, rendez et vérifiez des motion designs avec un pipeline déterministe HTML-vers-vidéo, en empruntant la grammaire visuelle d'un artefact source réel.

Qu'est-ce que ErtanLabs Motion ?

ErtanLabs Motion est un agent IA spécialisé dans la création de motion designs déterministes, s'appuyant sur un pipeline HTML-vers-vidéo. Il s'adresse aux développeurs et créateurs de contenu qui souhaitent produire des vidéos de qualité professionnelle (kinetic typographie, vidéos explicatives, documentaires animés, bandes-annonces, etc.) sans recourir à des solutions génériques. L'agent fonctionne avec trois phases principales : Décider (analyser le brief, choisir un artefact source, documenter les décisions dans un ledger), Fabriquer (planifier sur une beat sheet en frames, pondérer les éléments, configurer la typographie, la couleur et le son) et Prouver (vérifier la conformité via un script de contrôle, générer les fichiers de sortie : MP4, ProRes avec transparence alpha, WebM). Il supporte plusieurs backends (Node/Playwright, Remotion, HyperFrames) et intègre des vérifications automatiques pour les plans, la loudness, les flashs, les zones de sécurité et les couleurs. Idéal pour les projets de motion design collaboratifs et reproductibles.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ErtanLabs/ertanlabs-motion/tree/HEAD/skills/ertanlabs-motion

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Que fait ErtanLabs Motion ?

Le travail de motion design devient générique de manière prévisible : chaque choix laissé ouvert par un brief est comblé par ce qui est le plus courant, et une vidéo assemblée à partir de choix les plus courants est impossible à distinguer de milliers d'autres. Cette compétence rend les choix ouverts explicites, donne à chacun une source traçable, rend de manière déterministe, et mesure le fichier avant que quiconque ne le voie.

Règle maison : chaque choix visible a un propriétaire. Si vous ne pouvez pas indiquer d'où provient une police, une couleur, une courbe ou un son, personne ne l'a choisi.

Le parcours

PhaseÉtapeCe qu'elle laisse derrière
A · DéciderA1 Sonder la machineRésultat --doctor, backend choisi
A2 Décortiquer le briefSynopsis, toile, inventaire, bande son, barrières, hypothèses étiquetées
A3 Trouver le monde sourceL'artefact dont la grammaire de la pièce est empruntée, dispositif narratif, beat héroïque
A4 Écrire la valeur par défaut, puis la renverserLa version la plus courante et ses remplacements
A5 Tenir le registreledger.md à côté de la composition
B · FabriquerB1 Planifier en imagesFiche de beats avec plans prévus
B2 Ponderer chaque élémentClasses de poids, meneur et suiveur
B3 Laisser le monde définir le type, la couleur, le sonLignes du registre remplies à partir de la source
B4 Vérifier, puis rendreImages héroïques inspectées, puis le fichier
C · ProuverC1 Mesurer et regarderRapport check.py, planche contact, index des signes
C2 Étiqueter les affirmations et transmettreTransfert groupé par preuves

Modes de travail

  • Sprint (pièces courtes à idée unique, ou "fais-le juste") : choisissez vous-même le monde source, écrivez un registre de cinq lignes (synopsis, monde, beat héroïque, trois valeurs par défaut remplacées, toile), puis construisez. La vérification et la mesure sont toujours effectuées.
  • Studio (travail de marque, pièces plus longues, briefs flous) : rendez l'image héroïque pour deux mondes sources candidats avec --stills et montrez les deux images côte à côte ; les gens jugent les images plus vite que les descriptions. L'utilisateur choisit ; si personne n'est disponible, gardez celle dont l'image héroïque survit au test de la vignette (C1) et notez pourquoi dans le registre.
  • Série (épisodes pour une chaîne ou une campagne) : lisez d'abord chaque ledger.md antérieur dans le projet. Un nouvel épisode ne peut pas répéter à la fois le monde source précédent et la structure de beat héroïque précédente ; les constantes de marque portent une étiquette fixed et sont exemptées.
  • Révision (notes sur une pièce livrée) : mappez chaque note aux lignes de la fiche de beats et écrivez le changement sous forme de diff de fiche de beats, ancienne ligne → nouvelle ligne. Exemple : "trop lent au début" → grille 6-30 → 4-16, plan 30-60 → 16-40, chaque ligne suivante se décale de −20 images. Rendez uniquement la plage modifiée (--range) pour révision, puis la pièce entière, et ajoutez le diff au registre.
  • Explication narrée (essais vidéo, documentaires, histoire, argent, crime ou sujets scientifiques portés par une voix off, looks collage de papier) : la narration est l'horloge et chaque phrase devient un beat. Deux règles portent la majeure partie de la qualité : un plan se termine avec sa phrase, et chaque fait à l'écran est soit prononcé soit sourcé sur un papier. Lisez references/paper-collage-explainer.md et commencez à partir de assets/collage-template.html.

Niveau de production

Indépendamment du mode, chaque pièce a un niveau, écrit dans le registre :

  • Graphique (par défaut) : la grammaire du monde source sur une toile plate. Idéal pour les superpositions, les tiers inférieurs, les éléments d'interface, les données ponctuelles et tout ce qu'un monteur composite.
  • Film : l'artefact dans son lieu, vu à travers une caméra, éclairé par une source que le monde explique, avec des matériaux, de la vie entre les beats, trois ou quatre scènes et un son conçu avec de la musique. Idéal pour les bandes-annonces, les pages d'atterrissage et les pages d'accueil de dépôts, les films de marque, les lancements, les présentations de cartes et d'itinéraires, et chaque fois que quelqu'un demande "cinématographique", "vivant", "premium" ou "moins plat". Lisez references/film-level.md avant de planifier ; il ajoute une liste de scènes au-dessus de la fiche de beats et ses propres vérifications.

Phase A · Décider

A1 Sonder la machine

node scripts/render.mjs --doctor

La sortie décide du backend : Node, Playwright ou un Chrome/Edge installé, ffmpeg, ffprobe, NVENC. Signalez-le à l'utilisateur en une ligne. Si le chemin HTML est indisponible, B4 liste les alternatives ; si l'utilisateur a déjà un projet Remotion ou HyperFrames, travaillez à l'intérieur.

A2 Décortiquer le brief

  1. Synopsis : la phrase unique que la vidéo dit. Sans cela, la pièce se transforme en décoration ; rédigez-en un et confirmez-le.
  2. Toile : ratio, durée, fps, destination. Tailles et zones de sécurité : references/formats-and-safe-zones.md.
  3. Inventaire : séquences, captures d'écran, logos, photos, données, plaques IA. Le matériel existant façonne le concept plutôt que d'être superposé dessus.
  4. Bande son : voix off, musique ou rien. Avec VO ou musique, l'audio détermine le timing (references/sound-and-sync.md). L'audio fourni par l'utilisateur est définitif : n'ajoutez ni ne supprimez jamais de pauses, ne coupez, n'étirez ou ne remettez jamais le tempo sans l'accord de l'utilisateur ; ajustez plutôt l'image.
  5. Barrières : polices et couleurs de marque, éléments requis et interdits, date limite.

Les inconnues deviennent des hypothèses dans le registre, étiquetées assumed. Ne posez une question que lorsque la réponse changerait le monde source.

A3 Trouver le monde source

Ne choisissez pas "un style". Choisissez un artefact réel du monde du sujet et empruntez sa grammaire : un tableau des marées, un dépliant de pharmacie, un tableau de départ à palettes, un rouleau de sismographe, un dossier caviardé, un bureau de rédacteur avec des coupures de presse. Un artefact règle plusieurs décisions ensemble - la police dans laquelle il est composé, les encres et matériaux qui donnent la palette, la façon dont les choses y changent (retournement, impression, tamponnage, remplissage, traçage), sa surface - de sorte que les décisions s'accordent entre elles.

  1. Listez cinq artefacts que les personnes qui vivent avec le sujet manipulent ou lisent réellement.
  2. Préférez celui qui a le mouvement intégré : quelque chose qui se retourne, imprime, remplit, trace, tamponne ou défile tout seul.
  3. Empruntez des règles, pas des images. Pas une photo d'un ticket derrière le texte, mais la logique du ticket : une perforation sépare, un numéro de série compte, un tampon annule.

references/source-worlds.md décrit 31 mondes regroupés par la façon dont ils se déplacent. Considérez-le comme un calibrage ; le meilleur monde pour un travail n'est souvent pas sur la liste.

Nommez deux autres choses :

  • Dispositif narratif : une phrase sur la façon dont le synopsis devient visible ("la courbe de marée trace et l'eau dans le cadre suit le stylo").
  • Beat héroïque : le beat qui porte le synopsis. Il obtient le plan le plus long prévu et le plus grand changement d'état ou d'échelle dans la pièce. Après le rendu, le plan le plus long mesuré par check.py devrait être celui du héros ; si ce n'est pas le cas, l'emphase est au mauvais endroit. Sous une voix off, le plan se termine toujours avec sa phrase et la pause qui la suit. Si le héros a besoin de plus de temps, demandez une pause plus longue pendant que la voix est encore en cours d'écriture ou d'enregistrement ; avec une voix off terminée, faites correspondre le plan, et ne maintenez jamais l'image sur la ligne suivante.

A4 Écrire la valeur par défaut, puis la renverser

La première idée est généralement la plus courante. Rendez-la visible, puis remplacez-la :

  1. Écrivez la version par défaut de cette vidéo en une ligne honnête : ce qu'un modèle moyen ferait à partir de cette invite.
  2. Choisissez au moins trois décisions dans cette ligne (type, palette, mise en page, entrée, transition, son) et écrivez un remplacement pour chacune avec sa source : le monde source, le matériau, les données ou la bande son.
  3. Une valeur par défaut que vous ne pouvez pas remplacer avec une raison peut rester ; elle va dans le registre marquée owned default.

A5 Tenir le registre

Remplissez-le avant de construire, montrez-le, et enregistrez-le comme ledger.md à côté de la composition. C'est aussi la mémoire pour l'épisode suivant.

REGISTRE · <projet> · <date>
Synopsis :
Toile : 1080×1920 · 30 fps · 8 s · Reels · zone de sécurité : verticale
Monde source :
Dispositif narratif :
Beat héroïque (images) :
Version par défaut (une ligne) :

| Couche      | Décision                  | Source / raison                 | Valeur par défaut qu'elle remplace |
|-------------|---------------------------|---------------------------------|-------------------------------------|
| Type        |                           |                                 |                                     |
| Palette     | valeurs hex + rôle de chaque | échantillonné à partir de ...  |                                     |
| Mise en page|                           |                                 |                                     |
| Base temps  | fps, classes de poids, plans |                                |                                     |
| Texture     |                           |                                 |                                     |
| Son         |                           |                                 |                                     |
| Transitions |                           |                                 |                                     |

Droits (polices, musique, données, images) :
Hypothèses :

Phase B · Fabriquer

B1 Planifier en images

Une fiche de beats est une feuille d'exposition compacte : le mouvement écrit comme des données avant le code. Les plages sont [début, fin) en images ; les plans ont leurs propres lignes.

FICHE DE BEATS · 30 fps · 240 images (8 s) · 1080×1920
| Beat | Images   | Élément       | Classe     | Action                          | Porte | Son          |
|------|----------|---------------|------------|---------------------------------|-------|--------------|
| 1    | 6-30     | grille        | marque     | lignes tracées, décalées         | entrée| stylo        |
| 1    | 30-60    | -             |            | PLAN                            |       |              |
| 2    | 60-168   | courbe marée  | élément clé | trace ; l'eau suit la pointe   | lien  | houle basse  |
| 2    | 168-198  | -             |            | PLAN (héroïque)                 |       | silence      |
| 3    | 198-200  | titre         | tampon     | atterrit dans l'eau            | atterr| un coup      |
PLANS : 30-60, 168-198, 200-240 → ratio de plan prévu 42%

Porte nomme ce que le spectateur gagne : un élément entre, deux choses se lient, un état change, ou un beat atterrit sur la bande son. Une cellule Porte vide marque une décoration ; supprimez-la.

Ratio de plan est la part des images dans lesquelles rien de significatif ne bouge. Les explications et les titres se situent généralement autour de 20-35%, les montages musicaux plus bas, les pièces contemplatives plus hautes. Le grain et la dérive lente inférieure à 2 px sont de la texture, pas du mouvement. check.py mesure le ratio pour que le plan et le résultat puissent être comparés.

Avec VO ou musique, convertissez les horodatages des mots et des beats en numéros d'images et écrivez-les dans la feuille. Sous une voix off, chaque beat a également un signal, son premier mot accentué : l'élément principal du beat est en place au signal, et aucun plan ne s'étend sur la phrase suivante.

B2 Ponderer chaque élément

Donnez à chaque élément une classe de poids ; la classe choisit sa courbe et sa durée dans l'ensemble défini dans references/motion-and-timing.md, de sorte que les durées diffèrent parce que les masses diffèrent, et non par goût.

ClasseÉléments typiquesArrivéeDépartCourbe
accessoirepoints, étiquettes, petits nombres6-12 i4-8 isettle entrée, launch sortie
panneautitres, cartes, blocs de graphiques14-24 i10-16 iheavy
élément clécaméra, plans d'eau, cartes, grands champs30-90 i20-45 iheavy ; linear pour machines
marquelignes, itinéraires, soulignements, écriture manuscritelongueur ÷ ~30 px par imagefondupen
tamponannulations, valeurs finales, coupes1-2 i-step
  • Meneur et suiveur. À tout moment, un mouvement mène ; tout autre mouvement est causé par lui (le stylo atteint l'extrême, donc son étiquette s'ouvre).
  • Ordre de dépendance. Un élément n'apparaît qu'après que ce dont il dépend est à l'écran : un axe avant ses données, un itinéraire avant son marqueur.
  • Image d'affiche. L'image 0 est souvent la vignette, alors composez-la comme une image finie et lisible et laissez le mouvement en découler.
  • Image pure. Chaque valeur est calculée à partir du seul numéro d'image : pas de CSS en temps réel, de minuteurs ou de hasard non ensemencé (references/composition-contract.md).

B3 Laisser le monde définir le type, la couleur, le son

  • Le type est hérité du monde source. L'emphase doit survivre au test de la vignette (C1) : un mot marqué uniquement par la teinte disparaît à petite taille en niveaux de gris, alors mettez l'accent avec la taille, le poids, le placement ou le timing. Définissez <html lang> et utilisez la casse adaptée à la locale ; render.mjs teste les glyphes du texte réellement sur la page. Détails : references/typography.md.
  • Couleur : chaque couleur a un rôle nommé (fond, type, signal, une série de données). Une couleur sans rôle est supprimée. Échantillonnez les valeurs au lieu de les inventer : python scripts/check.py --palette reference.jpg. Détails : references/color-and-texture.md.
  • Les déclarations sonores sont toujours soit Mesurées, soit Non vérifiées, car l'audio ne peut pas être inspecté à l'œil. Chaque entrée dans la colonne Son pointe vers une cause visible ou vers le lit sonore. Détails : references/sound-and-sync.md.

B4 Vérifier, puis rendre

BackendQuand
HTML + render.mjsPar défaut chaque fois que --doctor réussit. Commencez à partir de assets/composition-template.html (ou assets/collage-template.html pour les explications narrées) ; contrat dans references/composition-contract.md.
Remotion / HyperFramesL'utilisateur travaille déjà dans l'un d'eux. Même registre et fiche de beats, syntaxe différente : references/backends.md.
Aperçu d'artefactSeulement si l'environnement offre un type d'artefact de mouvement ou de vidéo, et seulement comme aperçu ; un livrable est toujours un fichier rendu.
PlaquesLes plans que le code ne peut pas dessiner de manière convaincante (personnes, vrais lieux en mouvement) proviennent de séquences ou d'un modèle vidéo sous forme de plaques sans texte ; tout ce qui est typographique reste dans la composition. references/backends.md.

Cartes, globes et itinéraires : lisez aussi references/maps.md (§7a pour les itinéraires de showcase).

Vérifiez le beat héroïque avant de construire le reste :

node scripts/render.mjs comp/index.html --stills 0,170,last             # affiche, héroï, image de fin
node scripts/render.mjs comp/index.html --range 150-210 --scale 0.5     # beat héroïque à demi-taille
node scripts/render.mjs comp/index.html -o comp/out.mp4                  # rendu complet
node scripts/render.mjs comp/index.html --alpha -o comp/overlay.mov     # ProRes 4444 avec alpha

Ouvrez les images de vérification avec votre outil d'image...

Skills associés