nikisge/claude-motion-kit

À utiliser pour construire, vérifier ou rendre un film de motion graphics, une style frame ou un animatic dans HyperFrames (compositions HTML/GSAP/SVG/Three.js), pour configurer un projet HyperFrames, ou lorsqu’un rendu HyperFrames présente des bandes, des couleurs incorrectes, des fonds noirs, des images manquantes ou un flou de mouvement absent.

Qu'est-ce que claude-motion-kit ?

Ce skill est une traduction locale et ciblée de `nikisge/claude-motion-kit`, un kit dédié aux assistants IA (comme Claude Code) qui travaillent avec le pipeline HyperFrames de HeyGen. Il fait le pont entre le module `motion-director` (qui gère le flux de travail, le style et les critiques) et les skills officiels d’HyperFrames (qui gèrent la technique). Conçu pour les développeurs et les créateurs de motion design, il automatise les étapes clés : initialisation de projet avec une version figée d’HyperFrames, linting et vérifications d’exécution, rendu sans perte en 10 bits pour éviter le banding, et application de motion blur ciblé. Le skill met en garde contre des pièges courants comme l’utilisation de `z-index: -1` qui ne rend pas, ou le recours à `Math.random` qui est bloqué par le linter ; il impose des bonnes pratiques : tous les composants doivent être conçus sur-mesure (jamais issus du catalogue 1:1), et le rendu 10 bits doit être associé à un grain fin et à une correction de matrice colorimétrique via un script shell dédié.

Compatible avec✓Claude Code~Codex CLI~Cursor

npx skills add https://github.com/nikisge/claude-motion-kit/tree/HEAD/motion-kit/skills/motion-hyperframes

Documentation

Motion HyperFrames : Module de Construction

Pont entre motion-director (flux, style, critique) et les skills officiels HyperFrames de HeyGen (technique). Le flux provient de motion-director. Les workflows HyperFrames (/hyperframes, product-launch-video, motion-graphics …) intègrent leurs propres boucles de briefing, remplacées par le processus du Director. Leurs règles techniques s’appliquent intégralement.

Configuration (par projet)

claude plugin marketplace add heygen-com/hyperframes   # skills officiels (une fois)
claude plugin install hyperframes@hyperframes          # alternative sans plugin : npx hyperframes skills update
cd projects/<nom>
export HYPERFRAMES_NO_TELEMETRY=1
npx -y hyperframes@<version> init hf --non-interactive   # version figée, jamais @latest en cours de projet

Quel skill HyperFrames lire et quand

Tâche	Skill
Contrat de composition : `data-*`, clips, pistes, sous-compositions, déterminisme	`hyperframes-core` (avant le premier HTML)
Mouvement, GSAP, transitions ; Three.js (`adapters/three.md`) ; Flou de mouvement	`hyperframes-animation`
Caméra, zoom, punch-in, match/whip, masques, SVG Draw	`hyperframes-keyframes`
Commandes, options de rendu, dépannage	`hyperframes-cli`
Recherche de composant	`hyperframes-registry`

Le son n’est pas construit dans HyperFrames : le mix provient de motion-sound et est ajouté à la fin.

Composants personnalisés d’abord

Design propre à chaque film, construisez vous-même les composants (hf/components/<nom>.html). Le catalogue (npx hyperframes catalog --query "<mouvement, en anglais>") est une mine d’or : lisez le code source, comprenez la technique, traduisez-le dans votre propre design. N’utilisez jamais un look du catalogue 1:1, c’est exactement le look que toute vidéo IA possède.

Vérification

npx hyperframes lint                      # rapide, après chaque étape importante
npx hyperframes check                     # exécution, mise en page/débordement, contraste (WCAG)
npx hyperframes snapshot --at 1.2,4.0,9.5 --describe false   # images individuelles ; sans --describe false, un modèle d’image payant est sollicité
npx hyperframes render --quality draft --output ../renders/draft.mp4   # animatic, rapide

Ensuite, les vérifications de motion-director/references/rules.md.

Rendu + Mastérisation (contre le banding)

Les MP4 normaux = 8 bits : les dégradés et lueurs présentent des paliers. Pour cette raison, effectuez un rendu sans perte et mastérisez en 10 bits avec un grain fin :

npx hyperframes render --format mov --quality delivery --output ../renders/master.mov
bash scripts/master_10bit.sh ../renders/master.mov ../renders/film.mp4 0.35 ../renders/mix.wav

Le script corrige la matrice colorimétrique (BT.601 sans balises → BT.709), applique un grain fin 10 bits sur la luminance, ajoute le son et vous avertit en cas d’image transparente. Attention : QuickTime ne lit pas le H.264 10 bits (VLC, mpv, ffplay, navigateurs le font). Pour l’envoi, ajoutez une copie 8 bits (-pix_fmt yuv420p -crf 18).

Mémoire

Les rendus avec 3D, verre ou grands calques nécessitent beaucoup de RAM. Ainsi : un rendu à la fois, aucune boucle de rendu en arrière-plan, commencez par rendre une image individuelle et observez la mémoire, aucun calque au-dessus de 4096 px par côté.

Flou de mouvement

Méthode	Quand	Limite
Composant du registre `motion-blur` (interimages, obturateur)	éléments individuels rapides	seulement `transform` ; coûteux sur les grands conteneurs
Flou de mouvement du moteur	images entières	uniquement via l’API Producer, pas avec les transitions de shaders

Jamais sur des surfaces de lecture (texte/pages), uniquement là où l’œil ne doit pas lire.

Pièges (mesurés ou issus des issues, à jour octobre 2026)

Fond sur <body> au lieu du root [data-composition-id] : transparent en MOV, noir en MP4.
z-index: -1 ne rend pas. Les animations créées par un script avant le chargement du runtime peuvent décaler d’une image ; les animations CSS dans les shadow roots / pseudo-éléments aussi.
Repli silencieux sur la capture d’écran lente : lisez le résumé du rendu.
Math.random / Date.now bloqués par le linter : le hasard doit toujours être ensemencé. repeat infini interdit.
Les grands flous CSS ralentissent fortement. Stockez les assets après reconstruction sous un nouveau nom de fichier (cache basé sur le chemin).