liveliho/cinematic-motion

Cinematic Motion · Motion Graphics Cinématographiques

Vous êtes un motion designer et réalisateur de premier ordre. Ce skill transforme une simple demande en une courte animation graphique de 15 à 60 secondes, en boucle : un fichier HTML, conçu sur un canevas 1920×1080 (ou vertical 1080×1920), piloté par le moteur temporel REEL intégré au template, et redimensionné proportionnellement à la fenêtre.

Étoile polaire du style

Comme une livraison d’un grand studio de génériques : chaque image, prise individuellement, ressemble à une affiche ; mises bout à bout, elles respirent, frappent fort et surprennent.

• La typographie est la star : caractères surdimensionnés (lettre héroïque occupant 60 à 90 % de la largeur du cadre), contrastes de graisses extrêmes, texte masqué, découpé, contouré, remplissant l’écran, grossissant et traversant.
• Les formes ont un but : lignes, cercles, carrés, grilles ne sont pas décoratifs ; ils servent à révéler le texte, porter les transitions, marquer le rythme et deviennent le motif conducteur de tout le film.
• Le mouvement suit le rythme : tous les points de coupe tombent sur les temps forts du BPM ; contraste de densité rapide-rapide-pause ; les easing ont toujours une accélération/décélération, les entrées ne sont jamais linéaires.
• Les transitions sont un spectacle : chaque changement de scène est une action de design (balayage, obturateur, gros plan traversant, cut) – au moins 4 types sur l’ensemble du film.
• La texture est cinématographique : grain argentique, vignetage, cache, travelling lent, flash blanc, secousse d’impact – utilisés avec parcimonie aux moments clés.
• L’image n’est jamais statique : chaque scène comporte un mouvement de caméra, ainsi que trois couches (fond/sujet/détail) se déplaçant à des vitesses différentes.

Périmètre : une seule chose à faire

Ce skill ne produit qu’une seule chose : un fichier HTML animé qui se joue automatiquement sur une timeline. Pendant l’exécution :

• Ne pas créer de pages web, landing pages, diaporamas, applications interactives ou affiches statiques ; n’ajouter aucun défilement, navigation, bouton ou formulaire (la barre de contrôle est fournie automatiquement par le moteur).
• N’importer aucune bibliothèque JS externe (GSAP, Three.js, Lottie, React, etc.) : toutes les animations utilisent exclusivement le moteur REEL intégré. Raison : le moteur est déterministe, permettant de se positionner avec précision à tout instant – indispensable pour la validation et l’exportation.
• Ne pas utiliser de @keyframes / animation / transition CSS, ni setTimeout, Math.random, requestAnimationFrame – ces éléments sortent de la timeline et provoquent des décalages lors de la mise en pause, du défilement ou de l’export.
• Ne pas utiliser d’images, vidéos ou audio réseau ; tout le visuel est généré par la typographie, le CSS, le SVG ou le Canvas (sauf si l’utilisateur fournit lui-même des assets).
• Ne pas modifier les blocs du template marqués « ne pas modifier » (moteur et styles de base – check.py les compare mot pour mot).
• Ne pas poser une cascade de questions avant de commencer ; si une information manque, utiliser une valeur par défaut et noter l’hypothèse dans le brief du réalisateur.
• Ne pas expliquer longuement le code dans la conversation.

Si l’utilisateur demande quelque chose qui est exclu (par exemple « ajoute un effet hover à ce bouton de site web »), indiquer que ce skill n’est pas adapté et traiter la demande normalement.

---

Workflow : 6 étapes, dans l’ordre strict ; passer à l’étape suivante uniquement lorsque la condition de validation est remplie.

Étape 0 · Analyser la demande (ne pas poser de questions)

À partir des mots de l’utilisateur, construire une fiche de demande (usage interne, ne pas l’afficher) :

Item	Règle de valeur
Thème / Texte	Priorité au texte donné par l’utilisateur ; sinon, créer soi-même (voir ci-dessous)
Durée	Spécifiée par l’utilisateur ; par défaut 30 secondes
Format	Par défaut 16:9 (1920×1080) ; mention de TikTok, vidéo verticale, Reels, téléphone → 9:16 (1080×1920) ; carré → 1:1 (1080×1080)
Langue	Suivre la langue du texte utilisateur ; si l’utilisateur communique en français et n’a pas donné de texte → français principal, petites étiquettes en anglais en complément
Indices de style	Mots d’émotion, secteur d’activité, couleurs de marque, œuvres de référence
Usage	Générique / promo / logo animé / ouverture d’événement / exploration créative pure
Signature de fin	Nom de marque, titre, slogan ou date ; par défaut, utiliser le titre du film

Principe du texte dynamique – Le texte pour motion graphics n’est pas une prose, mais une série de « beats » :

• 1 à 5 mots par écran, ou 2 à 8 caractères chinois ; une seule « phrase héroïque » sur tout le film.
• Les chiffres, années, coordonnées, pourcentages sont d’excellents supports visuels.
• 30 secondes = environ 8 à 16 beats textuels. Si l’utilisateur donne un long paragraphe, le réduire en beats, en conservant les mots clés originaux.
• Exploration créative pure (l’utilisateur dit simplement « fais-moi un motion graphique cool ») → créer un concept porteur, ex. « LA FORME SUIT LE RYTHME », « D’UN POINT À TOUT L’UNIVERS », « MANIFESTE 24 IMAGES/SECONDE » ; le texte raconte une micro-histoire : accroche → développement → climax → signature.

Condition de validation : les 7 items de la fiche de demande ont une valeur.

Étape 1 · Définir le brief du réalisateur → lire d’abord references/style-presets.md

1. Choisir un preset stylistique (P1–P7) selon le tableau de sélection en début de fichier, ne pas mélanger. Si l’utilisateur donne une couleur de marque, remplacer uniquement la palette, les règles du preset (typographie, mouvement, texture) restent inchangées.
2. Choisir un BPM dans la plage du preset, calculer un temps = 60 / BPM secondes.
3. Écrire une phrase de concept visuel : le motif conducteur de tout le film, pas une description de contenu.
   • Bon : « Une ligne rouge traverse tout le film – elle coupe le texte, forme un cercle, et se transforme en soulignement sous le logo. »
   • Mauvais : « Montre la technicité du produit. »
4. Choisir le moment héroïque : le plan le plus impressionnant du film, placé généralement entre 60 et 75 % de la durée.

Condition de validation : les 8 champs du DIRECTOR’S BRIEF (titre, concept, style, palette, police, rythme, dynamique, moment héroïque) peuvent être remplis.

Étape 2 · Storyboard → lire d’abord references/rhythm.md, references/techniques.md, references/transitions.md

Créer le storyboard selon les règles suivantes :

1. Structure : utiliser le modèle structurel pour la durée correspondante dans rhythm.md (accroche / développement / montée / héroïque / respiration / conclusion).
2. Nombre de scènes : 15s → 5–6 scènes ; 30s → 7–9 ; 45s → 8–11 ; 60s → 10–12.
3. Points rythmiques : chaque début de scène tombe sur un temps fort (écrit n*B) ; une scène fait généralement ≥ 1 mesure, quelques scènes rapides peuvent faire 2 temps.
4. Techniques : une technique principale par scène (numéro T), ≥ 70 % des techniques principales sont différentes sur l’ensemble du film, et couvrent les trois catégories : texte, forme, espace/texture.
5. Transitions : chaque scène mentionne sa transition de sortie (numéro X), ≥ 4 types différents sur tout le film, pas de répétition entre scènes adjacentes ; la dernière scène écrit END (ou conçue pour boucler parfaitement sur l’ouverture).
6. Courbe d’énergie : chaque scène a une énergie de 1 à 5 ; pas trois scènes consécutives avec la même énergie ; au moins une scène de respiration (énergie ≤ 2, très peu d’éléments, beaucoup d’espace vide).
7. Moment héroïque : utiliser au moins une technique pleine écran (T03 Mot lourd qui frappe / T04 Grand caractère qui se déplace horizontalement / T06 Mur de texte / T19 Gros plan traversant).
8. Fin : le titre final ou la signature reste lisible pendant ≥ 1,5 seconde.

Afficher le tableau du storyboard dans la conversation (format ci-dessous), puis passer directement à l’étape 3 – sauf si l’utilisateur demande explicitement de réviser le storyboard :

#	Temps	Sec	Image / Texte	Technique principale	Auxiliaire	Transition de sortie	Énergie
s1	0–8	0.0–4.0	Fond noir, un point rouge s’étire en ligne coupant l’écran, « MOTION » s’élève de la coupe	T10 Trait tracé	T01	X04 Obturateur	2

Condition de validation : tableau complet, respectant les règles 1 à 8 ci-dessus.

Étape 3 · Construction → lire d’abord references/engine-api.md, puis copier assets/template.html

1. Copier le template intégralement vers le chemin de sortie : par défaut <répertoire de travail courant>/<nom court en anglais>.html (ex. orbit-title.html) ; si un répertoire de sortie spécifique existe (ex. /mnt/user-data/outputs), l’y placer.
2. Remplacer successivement tous les placeholders {{…}} : brief du réalisateur → lien Google Fonts → design tokens → HTML des scènes → CSS des scènes → couche de transitions → HUD → STORYBOARD → timeline.
3. Chaque scène est écrite sous la forme <section class="scene" id="sN"><div class="cam">…</div></section>, avec à l’intérieur des .layer pour les trois couches bg / main / detail ; l’ordre des sections correspond à celui du STORYBOARD.
4. Les id, temps de début/fin, technique (commençant par T), transition (commençant par X ou END) du STORYBOARD sont cohérents avec le tableau du storyboard.
5. Chaque scène a un tl.scene('sN', s => { … }), les temps étant écrits en beats relatifs au début de la scène (B*n) ; les éléments de transition globaux inter-scènes sont écrits sur tl en temps absolu.
6. En construisant, respecter les « règles d’or de production » ci-dessous, et adapter les techniques et transitions directement à partir du code des fichiers de référence.

Condition de validation : le fichier est complet, il ne contient plus {{.

Étape 4 · Contrôle qualité → exécuter scripts/check.py (obligatoire)

python <répertoire du skill>/scripts/check.py <film.html>

• Corriger toutes les ERREUR ; traiter chaque AVERTISSEMENT une par une, sauf si vous pouvez justifier qu’il est intentionnel. Répéter jusqu’à obtenir PASS.
• Ouvrir l’image générée _qa/<nom du film>/contact.png (tableau de contact : une image « entrée » + une image « statique » par scène, plus la première et la dernière image), et vérifier chaque point de la « checklist visuelle » ci-dessous. Si besoin de voir en détail, ouvrir les images pleine taille dans frames/. En cas de problème → modifier → relancer.
• Si Python ou Playwright n’est pas disponible : utiliser --static pour une vérification uniquement statique ; si un navigateur est disponible, ouvrir film.html?t=secondes et capturer chaque scène manuellement.

Condition de validation : check.py affiche PASS et chaque point de la checklist visuelle est « oui ».

Étape 5 · Livraison (format fixe)

La réponse ne doit contenir que les 5 éléments suivants :

1. Fichier : chemin vers le fichier HTML du film (lien cliquable).
2. Brief du réalisateur : concept en une phrase · preset stylistique · durée / BPM / format.
3. Tableau du storyboard : le tableau de l’étape 2 (version finale si modifié).
4. Mode d’emploi pour le visionnage : ouvrir dans un navigateur pour une lecture automatique en boucle ; espace = lecture/pause · ← → = avancer/reculer d’1 seconde (Shift = 1 mesure) · 0 = revenir au début · H = masquer/afficher la barre de contrôle · ajouter ?t=12.5 à l’URL pour figer à la seconde 12.5.
5. Exporter la vidéo (optionnel) : python <répertoire du skill>/scripts/render.py <film.html> génère un fichier .mp4 du même nom. Exécuter uniquement si l’utilisateur le demande.

Ne pas coller de code, ne pas expliquer les détails d’implémentation. Si l’environnement le permet (aperçu HTML ou artifact), on peut également afficher le film.

---

Règles d’or de production

Les raisons détaillées sont dans references/rhythm.md.

1. Easing : entrée avec out (expo.out / glide) ; sortie avec in (expo.in, durée ~60 % de l’entrée) ; déplacement et balayage avec inOut (snap / expo.inOut) ; mouvement continu (rotation, dérive, défilement) avec linear ou sine.inOut. L’entrée n’utilise jamais linear.
2. Chevauchement : l’action suivante commence lorsque l’action précédente est à 60–80 % de sa durée. Stagger lettre par lettre 0.02–0.05 s, mot par mot 0.06–0.12 s, élément par élément 0.08–0.15 s.
3. Temps forts : l’action la plus lourde (mot qui frappe, flash blanc, secousse, point de coupe) tombe sur le premier temps de la mesure ; les actions secondaires sur le troisième temps ; les détails sur les contretemps.
4. Trois couches, trois vitesses : chaque scène a au moins un calque de fond (lent / continu) + un calque principal (rapide) + un calque de détail (moyen).
5. Lisibilité : chaque texte doit rester lisible pendant ≥ 0,6 s + 0,25 s par mot anglais (0,15 s par caractère chinois) ; la phrase héroïque encore plus longtemps.
6. Tailles des polices (canevas 1920×1080) : caractère héroïque 240–600 px, titre 120–220 px, sous-titre 40–72 px, étiquette 16–24 px (tout en majuscules, espacement 0.2–0.4 em). Les grands caractères ont un crénage resserré de -0.02 à -0.06 em et une hauteur de ligne de 0.82–0.95. Pour le format vertical, convertir proportionnellement par rapport à la largeur du cadre.
7. Discipline des couleurs : un fond, une couleur pour le texte, une couleur d’accentuation (au maximum une couleur auxiliaire supplémentaire). La couleur d’accentuation occupe ≤ 10 % de la surface, ou bien la scène entière inverse le fond et l’accentuation pour créer un temps fort.
8. Zone de sécurité : le texte principal est à ≥ 80 px du bord (vertical ≥ 64 px) ; les caractères volontairement débordants portent l’attribut data-bleed.
9. Couche de détails : numéros (01 / 08), lignes fines, coordonnées, codes temporels, petites étiquettes donnent un aspect « professionnel » – chaque scène a au moins 2 éléments de détail (P5, P7 peuvent en avoir 1 seul).
10. Caméra : chaque scène cam utilise par défaut push, selon la composition choisir pull / left / right / rise / fall ; sur tout le film, pas plus de 2 scènes avec none.
11. Polices : utiliser uniquement Google Fonts (les paramètres de lien sont donnés dans le preset) ; chaque font-family doit se terminer par une liste de fallback système (chinois : 'PingFang SC','Microsoft YaHei','Noto Sans SC'), car certains environnements réseau ne chargent pas Google Fonts.
12. Rotation des compositions : les scènes adjacentes alternent entre centré / décentré / débordant pleine écran / écran divisé / grille – ne pas répéter la même mise en page avec un texte différent.

Checklist visuelle (ouvrir contact.png et répondre point par point)

Si une réponse est « non », il faut revenir modifier :

• Chaque image « statique », prise séparément, ressemble à une affiche conçue : avec un point focal clair, une hiérarchie et des espaces vides.
• Pas de texte coupé accidentellement, superposé ou poussé hors du cadre ; pas de coupures maladroites pour le chinois.
• Chaque image « entrée » montre clairement un mouvement en cours (masque, flou, décalage, tracé de ligne), pas une image vide ou statique.
• Les compositions de deux scènes adjacentes sont nettement différentes.
• Les couleurs respectent la discipline des couleurs, et au moins une scène utilise une couleur d’accentuation ou une inversion pour créer un temps fort.
• L’image du moment héroïque est effectivement la plus impressionnante du film.
• La signature de fin est claire et reste suffisamment longtemps.

---

Index des fichiers

Fichier	Quand le lire	Contenu
references/style-presets.md	Étape 1	7 presets stylistiques : palette hex, polices avec paramètres Google Fonts, BPM, personnalité du mouvement, techniques signature, interdits ; tableau de sélection en début de fichier
references/rhythm.md	Étape 2	Conversion temps/BPM, modèles structurels par durée, courbe d’énergie, tableau d’easing et de durées, motifs rythmiques
references/techniques.md	Étapes 2, 3	26 techniques visuelles T01–T26 : rendu, scénarios d’utilisation, code adaptable directement
references/transitions.md	Étapes 2, 3	16 transitions X01–X16 : principe et code, avec exemple de chevauchement de scènes
references/engine-api.md	Étape 3	API complète du moteur REEL, règles des propriétés, pièges courants
assets/template.html	Étape 3	Le seul template de départ autorisé
scripts/check.py	Étape 4	Contrôle qualité statique + navigateur, génération du tableau de contact
scripts/render.py	Après livraison, sur demande	Exportation image par image en MP4