reel-motion-graphics

Reel motion graphics

Cette compétence crée des vidéos courtes dans le style maison développé pour « Upcycling in 30 Seconds ». Le dossier template/ contient cette vidéo comme projet HyperFrames fonctionnel, donc une copie fraîche s'affiche correctement avant toute modification. Votre travail consiste à remplacer son contenu par le nouveau script tout en respectant chaque règle ci-dessous.

Chargez /hyperframes-core pour le contrat de composition avant d'écrire le HTML de composition. Chargez /hyperframes-animation uniquement si vous avez besoin d'un motif d'animation absent de references/primitives.md.

1. Lire le script et planifier les séquences

Rassemblez ou déduisez les éléments suivants, et ne demandez que ce qui change le film :

• Le script ou le concept. Obligatoire.
• Séquence vidéo du présentateur (MP4) ou une image fixe. Sans cela, conservez l'image fixe de remplacement du modèle.
• Crédit source pour le surtitre, par ex. ICLR 2023 · Author et al..
• Durée cible. Par défaut 30s ; 20–60s fonctionne.

Découpez le script en : une carte titre (environ 4s), 2 à 5 étapes (4,5 à 6s chacune), et une optionnelle conclusion/clôture (environ 5,5s). Pour chaque étape, écrivez :

• un titre en mots simples plus un accent en italique de 1–2 mots (« Copier le MLP huit fois »), d'au maximum environ 22 caractères pour tenir dans 656px à 60px ;
• une légende : la ligne 1 est une phrase d'au maximum environ 34 caractères (Bodoni italique 40px), et la ligne 2 est une phrase de soutien d'au maximum environ 40 caractères ;
• le mouvement de diagramme issu du vocabulaire des primitives (references/primitives.md → « Écrire un nouveau diagramme »).

Rythmez environ 2,5 mots parlés par seconde si les légendes suivent la narration. Écrivez le plan dans STORYBOARD.md du projet (séquence, plage temporelle, titre, légende, mouvement visuel), montrez-le à l'utilisateur, et construisez une fois approuvé. Un script court déjà approuvé par l'utilisateur peut passer directement à la construction.

2. Échafaudage

Cette compétence vit dans le projet Reel Creator (.claude/skills/reel-motion-graphics/). Exécutez les commandes depuis la racine du projet, et placez chaque nouveau reel dans reels/<slug>/. Les chemins de scripts ci-dessous, tels que scripts/solve-fold.py, sont relatifs au dossier de cette compétence.

.claude/skills/reel-motion-graphics/scripts/new-reel.sh reels/<slug> [presenter.jpg|.mp4]

Pour la vidéo du présentateur, remplacez <img id="presenter"> dans index.html par : <video id="presenter" class="clip" src="assets/presenter.mp4" data-start="0" data-duration="<D>" data-has-audio="true" playsinline></video> Le CSS #presenter (cover, ancrage 20%, en dessous de --fold) s'applique sans changement.

3. Construire : éditer d'abord les données, puis écrire le diagramme

Fichier	Ce qu'il faut changer
index.html	Racine et hôtes data-start/data-duration pour correspondre au plan. Hôtes : bg (total), titre (0–4), titres et diagramme (4–fin), résultat (sa fenêtre), légendes (total), présentateur (total).
compositions/title.html	Crédit du sourcil, les deux lignes d'affichage, les deux lignes de thèse, et le mini diagramme si l'idée n'est pas « 1 → plusieurs ».
compositions/headings.html	Uniquement le tableau STEPS (secondes locales à l'hôte). Les barres et « Étape n/N » en sont dérivées.
compositions/captions.html	Uniquement le tableau CAPS (secondes globales). Entrez chaque légende environ 0,35s après le début de son étape et laissez-la à la fin de l'étape.
compositions/diagram.html	Réécrivez le monde pour le nouveau sujet, en utilisant les primitives. Conservez la structure lens/world/drift, le motif token-clock et la récession d'arrière-plan.
compositions/result.html	Étiquettes de statistiques, valeurs, compteurs et lignes méta, ou supprimez l'hôte si le script n'a pas de chiffres.
compositions/bg.html	Généralement inchangé. Adaptez ses répétitions yoyo pour qu'elles se terminent à la durée racine.

Quand la bibliothèque ne contient pas de graphique adapté : demander un lien HyperFrames

La bibliothèque est references/primitives.md. Quand une séquence nécessite un visuel qu'aucune primitive ne couvre (un type de graphique, une carte, une frise chronologique, une comparaison ou autre chose non listé), n'improvisez pas à partir de zéro. Pausez et demandez à l'utilisateur un lien :

« La séquence 3 (« le chiffre d'affaires a triplé depuis 2021 ») nécessite un graphique de croissance et la bibliothèque n'en a pas. Pouvez-vous envoyer un lien du catalogue HyperFrames pour un graphique que vous aimez ? Je le restylerai selon notre charte. »

Pour les aider à choisir, vous pouvez lister 2 à 4 candidats depuis npx --yes [email protected] catalog "<mot-clé>", mais laissez l'utilisateur choisir. Continuez à construire les autres séquences en attendant, et laissez un espace réservé étiqueté dans l'intervalle.

Quand le lien arrive :

1. Installez-le. Le nom de l'élément du registre est le dernier segment du chemin du lien catalogue. Exécutez npx --yes [email protected] add <nom> --no-clipboard --json depuis le projet. Pour un lien qui ne vient pas du registre, lisez la page ou la source et reconstruisez-le.
2. Restyler selon les règles maison :
   • remplacez les couleurs par des tokens de marque et les panneaux par .glass ;
   • utilisez Bodoni et Instrument Sans avec les fichiers opsz-18 ;
   • placez chaque valeur d'espacement sur la grille de 4px ;
   • adaptez-le à la colonne de contenu et aux zones ;
   • ajoutez les accents de lustre, brillance et dérive ;
   • supprimez tout ce qui n'est pas de la marque, comme les remplissages plats et lumineux, les autres polices ou les styles d'ombre portée.
3. Intégrez-le comme hôte de sous-composition sur la piste graphique, ou incorporez son mouvement dans diagram.html quand il doit partager le monde continu. Vérifiez ensuite, prenez un instantané et corrigez comme d'habitude.
4. Ajoutez-le à la bibliothèque. Ajoutez une entrée dans references/primitives.md sous « Restylé depuis HyperFrames » : le nom, le lien source, ce qu'il montre, et ses paramètres clés. Copiez le fichier restylé dans template/compositions/library/ pour que le prochain reel puisse le réutiliser sans redemander.

4. Règles maison (chaque reel, sans exception)

1. Ligne de pli équidistante. La ligne de pli se situe à mi-chemin entre le contenu d'animation le plus bas (bas des légendes, environ y 900) et le haut de la tête du présentateur. Résolvez-la avec scripts/solve-fold.py <image fixe du présentateur ou une image> 900 et définissez --fold dans brand.css (un multiple de 4). Vérifiez avec scripts/measure-fold.py <instantané> <fold>. Avec une vidéo, vérifiez une image où la tête est la plus haute.
2. Grille de 4px. Chaque padding, gap, décalage, taille et line-height est un multiple de 4. Les conteneurs pad uniformément et se dimensionnent à leur contenu ; ne donnez jamais une hauteur fixe à une carte. Exécutez scripts/audit-grid.sh <projet> ; les seuls restes autorisés sont les bordures de cheveux, les rayons de lueur et les décalages de mouvement de tween.
3. Sérif robuste. Utilisez uniquement les fichiers Bodoni *-opsz18.woff2 dans fonts/. La taille optique automatique de la police variable choisit des coupes d'affichage en cheveux qui disparaissent après H.264 et la réduction d'échelle sur téléphone. Ne revenez jamais au fichier variable ou à la plage 6..96 de Google.
4. Zones. Barre d'appli 0–175 (rester libre), animation 192–780, bande de légende 812–904, présentateur en dessous de --fold, colonne de contenu x 172–828 (hors du rail droit). Les légendes vivent sur une seule piste.
5. Un seul monde de diagramme continu. Les éléments qui persistent d'une étape à l'autre vivent dans diagram.html et se déplacent. Ils ne rentrent jamais dans un nouveau fichier de scène.
6. Déterminisme. Utilisez uniquement des timelines GSAP en pause enregistrées sur window.__timelines["<id>"]. Utilisez rng() ou hh() avec seed au lieu de Math.random, et pas de requestAnimationFrame, d'horloges ou de réseau. Les compteurs et particules animés sont des fonctions pures de la valeur d'un tween proxy.
7. Rédaction conforme au lint.
   • Ciblez la racine d'une sous-composition avec document.querySelector('[data-composition-id="<id>"]:not([data-composition-src])'), jamais #root (plusieurs racines partagent cet identifiant une fois assemblées).
   • Préfixez les identifiants d'éléments par la composition (dg-, hd-, rs-, ti-).
   • Utilisez un fromTo par paire élément-propriété, puis to.
   • Ne tweenez jamais letterSpacing, width, height, top ou left ; utilisez des transformations et l'opacité.
   • Échelonnez les étiquettes isolées pour qu'elles ne se chevauchent pas au repos.
8. Aspect. Fond chaud quasi noir avec lumière dérivante et grain ; .glass pour chaque panneau ; lustre doré sur les accents ; petite dérive de caméra sur chaque temps d'arrêt ; maintenez chaque état final au moins 1s.

5. Vérifier, puis livrer

Exécutez ces commandes depuis le répertoire du projet :

npx --yes [email protected] check
npx --yes [email protected] snapshot --at <le point médian de chaque séquence>

• check doit réussir avec 0 erreurs. Passez en revue les éventuels avertissements.
• Regardez la planche contact. Recadrez et zoomez sur chaque image dense : surveillez les chevauchements, le texte coupé, les jetons atterrissant hors cible et les espacements inégaux.
• Exécutez measure-fold.py et audit-grid.sh, et corrigez tout ce qu'ils signalent.
• Effectuez le rendu avec npx --yes [email protected] render ; le résultat va dans renders/. Réalisez une copie de partage de moins de 30 Mo pour la visualisation sur téléphone : ffmpeg -i renders/<fichier>.mp4 -c:v libx264 -crf 23 -preset slow -pix_fmt yuv420p -movflags +faststart renders/<slug>-share.mp4
• Lecteur en direct : depuis la racine du projet, exécutez node viewer/build.mjs. Il reconstruit le lecteur en direct de chaque reel (reel/ plus chaque reels/<slug>/) et écrit le carrousel viewer/index.html, avec une copie par reel dans viewer/reels/. Publiez viewer/index.html sur l'artefact de la bibliothèque de reels https://claude.ai/artifact/Joet84qdr6Kb47vYZzc8YR, en passant tous les fichiers viewer/reels/*.html dans files. L'utilisateur préfère le lecteur HTML en direct à une vidéo intégrée. Pour un seul reel autonome, exécutez node build-preview.mjs dans son dossier pour écrire dist/preview.html.
• Signalez le temps d'exécution, ce qui a été vérifié (images, écarts de pli, audit), et tout ce qui n'a pas encore été vérifié.

Référence

• references/primitives.md : chaque bloc de construction visuel, avec le fichier qui l'implémente.
• template/ : le reel Upcycling complet. C'est la référence de qualité ; comparez le nouveau travail avec lui.