Marque RoleModel pour HyperFrames
Nous disposons déjà d'un outillage HyperFrames complet. Partez de cet inventaire, pas de zéro. Cette compétence n'est que la couche de marque par-dessus : d'où viennent nos valeurs, laquelle utiliser, et ce que nous ne faisons pas.
L'inventaire
Deux ensembles sont installés, et leurs noms se chevauchent. Sachez lequel vous invoquez.
Officiel (HeyGen), dans ~/.claude/skills :
| compétence | à utiliser quand |
|---|---|
hyperframes | authoring de composition, timing, médias, flux de production |
hyperframes-core | le contrat de composition et les attributs de timing data-* |
hyperframes-animation | règles de mouvement, blueprints de scène, GSAP et autres runtimes |
hyperframes-keyframes | zooms avant, mouvements de caméra, recadrages, keyframes sûres |
hyperframes-creative | palettes, planification des beats, narration, motifs de composition |
hyperframes-audio | mixage d'une piste déjà placée — fondus, ducking, automation |
hyperframes-cli | init, lint, check, preview, render, transcribe, tts |
hyperframes-registry | installation de blocs et composants |
media-use | recherche ou génération de musique, SFX, images, voix |
Standard (nôtre), dans ~/.claude/skills/synced :
| compétence | à utiliser quand |
|---|---|
hyperframes | notre propre compétence de composition — lit design.md, house-style.md |
hyperframes-cli | nos propres notes CLI |
hyperframes-direction-harness | avant un index.html final lorsque la direction n'est pas verrouillée |
optics-context | tout ce qui doit aussi être une surface produit |
gsap | spécificités GSAP |
impeccable | notre exigence de qualité |
Collision de noms.
hyperframesethyperframes-cliexistent dans les deux ensembles. Quand il importe de savoir lequel vous obtenez, dites-le explicitement.
Ne répétez aucune de leurs règles ici. Le contrat de composition, les erreurs de lint, les collisions de pistes, les timelines en pause — tout cela appartient à ces compétences et y est maintenu. Une seconde copie dériverait dès qu'ils publient une mise à jour et personne ne le remarque. Si une règle manque, corrigez-la en amont, pas dans ce fichier.
La marque atteint HyperFrames via design.md
La compétence hyperframes standard lit déjà design.md à la racine du projet comme « source de vérité pour les couleurs, polices et contraintes de la marque », et sait utiliser ses valeurs exactes plutôt que d'en inventer. C'est le point d'accroche. Utilisez-le.
Le dépôt de la marque en génère un :
cp rolemodel-brand/dist/design.md <video-project>/design.md
Il est généré à partir de rolemodel-brand/tokens/brand.json par scripts/build-tokens.mjs, donc il ne peut pas être en désaccord avec les tokens que toutes les autres surfaces RoleModel utilisent. Ne le modifiez jamais à la main — modifiez brand.json et relancez.
Ce fichier contient les couleurs, la typographie, l'échelle complète des mouvements, les quatre principes de mouvement et les contraintes ci-dessous. Une fois dans le projet, la compétence existante fait le reste.
Pour les propriétés personnalisées CSS dans la composition elle-même :
<link rel="stylesheet" href="rolemodel-brand/css/academy-theme.css">
<body data-theme="academy">
Choisir un token de mouvement
Les valeurs complètes sont dans design.md. La règle pour choisir est simple :
Choisissez en fonction de ce que fait l'élément, pas de son apparence.
- Quelque chose qui arrive →
--duration-base+--ease-enter - La même chose qui disparaît →
--duration-fast+--ease-exit. Partir est toujours plus rapide qu'arriver. - Quelque chose déjà à l'écran qui change de place ou de taille →
--ease-move - Un regarde-moi délibéré →
--ease-emphasis, la seule courbe qui peut dépasser - Un groupe → un
--staggerentre les frères, jamais tous en même temps
N'écrivez jamais une durée brute ou un cubic-bezier brut dans une composition. Même règle que le Studio applique aux couleurs, pour la même raison.
Ce que nous ne faisons pas
Ces règles sont impératives. Plusieurs sont vérifiées par npm run check dans la boîte à outils, et toutes sont dans design.md où la compétence de composition les lira.
- Pas de dégradés radiaux, nulle part. La marque est linéaire — direction, pas de taches.
- Pas de balayage de cadre. Ne dessinez pas de cadre, bordure ou boîte blancs ou à contour clair qui balayent l'écran comme transition de scène. Claude fait cela spontanément ; c'est un ornement de modèle standard, pas nous, et cela attire l'attention sur rien. Transitionnez par coupure, ou en révélant le contenu entrant avec
--ease-enter. Rien ne dessine une boîte autour du cadre. - Pas de filets décoratifs, soulignements ou séparateurs. Ne soulignez pas un titre, ne mettez pas de filet entre les sections, ni de bordure autour d'une carte, statistique, citation ou tiers inférieur. Claude les ajoute pour signaler la structure ; ils ne signalent que l'ajout de quelque chose. La séparation vient de l'espace, du poids et du fond. La seule règle autorisée dans le système est la courte barre de marque sous un titre, et
rm-titlela dessine — n'ajoutez jamais une seconde à la main. - Un bord est une bordure pleine, pas un fondu. Cela régit comment un bord nécessaire est dessiné ; ce n'est pas une licence pour en ajouter un. Si rien n'est ambigu sans le bord, il n'y a pas de bord.
- L'orange est une accentuation seulement — jamais un fond.
- Pas d'ornement. Si un élément ne porte pas d'information ou ne dirige pas l'attention, supprimez-le.
Quand la direction n'est pas verrouillée
Ne commencez pas à écrire index.html. Utilisez hyperframes-direction-harness — il est conçu exactement pour cela et produit un tableau de bord révisable avant toute composition :
01_intake.md → 02_design_direction.md → 03_critical_frame_plan.md
→ direction_board.html (Director Workbench, révisé)
→ 04_render_plan.md (prêt seulement après révision)
→ transmission à la compétence hyperframes
Ne le contournez que pour de petites modifications sur une composition existante — une faute de frappe, un ajustement de timing, une couleur, une correction de lint.
Quel outil résout quel problème
HyperFrames compose ; il ne capture pas. Si la vidéo doit montrer l'interface produit réelle, c'est le mauvais outil.
| entrée | outil | reste à jour ? | |
|---|---|---|---|
| Enregistrer | votre écran | openscreen | non — à réenregistrer manuellement |
| Composer | un script ou un brief | HyperFrames | réexécuter le brief |
| Depuis un test | une trace Playwright | playwright-recast | oui — réexécuter le test |
Utilisez HyperFrames pour les cartes titres, tiers inférieurs et graphiques animés qui se superposent à une capture.
Narration, timing, livraison
Ne synthétisez pas la narration à l'intérieur de la composition.
rm-voice <projet> --script opener --voice af_nova
Un clip par ligne, chacun mesuré, SRT écrit à partir de durées déjà connues — donc les timings sont exacts par construction et une révision ne resynthétise que ce qui a changé. Kokoro s'exécute localement : pas de clé API, et rien concernant un produit client non publié ne quitte la machine.
Un rendu et une piste de narration sont sur des horloges différentes. playwright-recast compresse le temps mort ; la narration dure le temps des mots. Gravez une piste de sous-titres de 22 secondes dans un rendu de 3,8 secondes et le repère 1 maintient tout le clip pendant que le reste est silencieusement ignoré — ça a l'air d'avoir fonctionné.
rm-mux --video demo.mp4 --audio narration.wav --srt narration.srt -o final.mp4
rm-share final.mp4 --project "Ridgeline Railing"
rm-share renvoie un lien qu'un client ouvre sans compte et laisse des commentaires horodatés. rm-share --check indique s'il est configuré.
Avant un projet client
export HYPERFRAMES_NO_TELEMETRY=1
La télémétrie est activée par défaut. Les noms de projet et le contenu vidéo ne sont jamais collectés, mais hyperframes auth login lie votre adresse e-mail HeyGen à votre utilisation et associe l'activité anonyme antérieure à celle-ci. Mettez l'opt-out dans l'échafaudage.
Figez la version. HyperFrames est sous licence Apache-2.0 — pas de comptage de sièges, pas de seuil de taille d'entreprise, c'est pourquoi c'est notre valeur par défaut — mais il est en pré-1.0 et publie quasi quotidiennement sans garantie de compatibilité. Un projet client qui rend aujourd'hui devrait rendre de la même manière dans six mois.
Crédits
Le cadrage à trois niveaux et le pipeline coupe → storyboard → motion graphics proviennent de hyperframes-helper par Jay chez RoboNuggets, utilisé sous CC BY 4.0. Conservez l'attribution si vous partagez ce document — c'est la condition de la licence.