Dans les termes du Skill
Direction créative non liée à l'animation pour les vidéos HyperFrames, utilisée une fois le contrat technique de hyperframes-core en place. Gère l'analyse des spécifications de design (frame.md / design.md avec frontmatter comme référence de marque), les palettes, la typographie, la narration, la planification des beats, les visuels réactifs à l'audio et les décisions de composition et de marque.
Deux références priment sur les réflexes web pour les travaux non triviaux : house-style.md explique comment interpréter les prompts et générer du contenu réel avec des recettes de calques d'arrière-plan/avant-plan, tandis que video-composition.md définit l'échelle, la profondeur et le détail du premier plan propres au médium vidéo afin d'éviter des mises en page de page web vides. Pour les motifs d'animation atomiques, les blueprints de scène, les transitions et les effets de marqueurs CSS, utilisez plutôt hyperframes-animation.
Ce qu'il produit
- Composition HTML utilisant l'échelle du médium vidéo, des motifs de profondeur, ainsi que des couleurs et une typographie cohérentes avec la marque
- Rapport de contraste généré par contrast-report.mjs, inspectant l'accessibilité de l'image rendue
- Fichier de données de bandes audio issu de extract-audio-data.py pour les compositions réactives à l'audio
Fonctionnement
- 01Lire d'abord la spécification de design
Si un projet contient frame.md, design.md ou DESIGN.md, lisez-le d'abord et considérez les tokens du frontmatter comme la référence de marque pour les couleurs, les polices, l'espacement, le ton et les contraintes.
- 02Choisir une direction visuelle
Si aucune spécification de design n'existe, adoptez un preset de cadre prêt à l'emploi depuis frame-presets/, choisissez un style nommé dans visual-styles.md, utilisez les valeurs par défaut rapides de house-style.md, ou lancez une sélection interactive via design-picker.md.
- 03Planifier les beats avant d'écrire le HTML
Pour un travail multi-scènes, consultez beat-direction.md pour planifier le rythme et le timing avant d'écrire le HTML. Pour les transitions de scène, passez à hyperframes-animation/transitions/.
- 04Appliquer les garde-fous de mouvement
Pour un travail riche en mouvement, lisez motion-principles.md pour les garde-fous de haut niveau, puis passez à hyperframes-animation pour les règles de mouvement atomiques.