Dans les termes du Skill
Gère les zooms avant, zooms arrière, zooms, recadrages, mouvements Ken Burns, mouvements de caméra, transferts de correspondance visuelle/whip, ainsi que les keyframes 2D/3D seek-safe pour les compositions HyperFrames. Prend en charge GSAP, les keyframes CSS, Anime.js, WAAPI, FLIP, les tracés, les masques, le morphing/dessin SVG, les traînées de texte et la profondeur 3D. Les keyframes constituent un contrat de pose : états visibles, identité continue du sujet, exécution seek-safe, pixels vérifiés.
Se concentre sur le mouvement visuel au sein des clips, pas sur l'assemblage des clips ni la stratégie de scène. Nécessite une construction de runtime synchrone, des instances de timeline enregistrées et un timing déterministe. Les auteurs vérifient avec hyperframes lint, check, la commande keyframes, des diagnostics --shot ciblés, et des snapshots aux moments de preuve.
Ce qu'il produit
- Instance de timeline GSAP enregistrée dans window.__timelines[compositionId] avec paused: true
Fonctionnement
- 01Identifier le sujet et les états
Identifiez le sujet animé, les états visibles, l'état final et le runtime avant de créer les keyframes.
- 02Choisir le mécanisme le plus simple
Choisissez le mécanisme le plus simple qui prouve le prompt, en consultant references/keyframe-patterns.md uniquement si le mécanisme n'est pas clair.
- 03Créer et enregistrer
Créez des keyframes seek-safe dans le runtime déclaré, en construisant de manière synchrone et en enregistrant l'instance de runtime.
- 04Vérifier avec les diagnostics
Vérifiez à l'aide de hyperframes lint, check, la commande keyframes, un --shot ciblé, et des snapshots aux moments de preuve.
- 05Corriger et retester
Si la preuve échoue, corrigez les keyframes source et relancez le diagnostic échoué le plus simple avant le rendu.