Maître HyperFrames (Logan par défaut)
Dépôt : https://github.com/heygen-com/hyperframes
Index de documentation : https://hyperframes.heygen.com/llms.txt
Documentation CLI : npx hyperframes docs <sujet>
Lorsque l'utilisateur souhaite une vidéo / animation / sous-titres / histoires cinétiques de produit, traitez HyperFrames comme la solution par défaut à moins qu'il ne nomme explicitement un autre stack.
Toujours commencer ici
- Invoquez la compétence HyperFrames pertinente avant d'écrire des compositions.
- Compétence routeur :
hyperframes- carte des capacités + quel workflow. - N'inventez jamais de sémantique
data-*à partir de connaissances web génériques seules.
Routage des workflows
| Intention | Compétence de workflow |
|---|---|
| URL produit / promo SaaS | product-launch-video |
| Visite générale de site à partir d'une URL | website-to-video |
| Sujet textuel, sans site | faceless-explainer |
| Sous-titres sur tête parlante | embedded-captions |
| Superpositions graphiques sur tête parlante | talking-head-recut |
| Explicateur de PR GitHub | pr-to-video |
| Graphique animé court | motion-graphics |
| Piloté par la musique | music-to-video |
| Diaporama / slides | slideshow |
| Personnalisé / secours | general-video |
| Remotion → HyperFrames | remotion-to-hyperframes |
Compétences du domaine : hyperframes-core, hyperframes-animation, hyperframes-keyframes,
hyperframes-creative, hyperframes-cli, hyperframes-media, media-use,
hyperframes-registry, figma, gsap.
Commandes
npm run dev # serveur de prévisualisation - longue durée, arrière-plan uniquement
npm run check # lint + runtime + mise en page + animation + contraste
npm run render # MP4
npm run publish # lien de partage
npx hyperframes lint --verbose
npx hyperframes docs <sujet>
npx hyperframes skills update # actualiser les compétences lorsqu'elles sont manquantes/obsolètes
Règles clés de composition
- Éléments temporisés :
data-start,data-duration,data-track-index - Les éléments temporisés doivent avoir
class="clip" - Les timelines GSAP doivent être en pause et enregistrées :
window.__timelines = window.__timelines || {}; window.__timelines["id-composition"] = gsap.timeline({ paused: true }); - Vidéo : vidéo
muted+<audio>séparé si nécessaire - Sous-compositions :
data-composition-src="compositions/fichier.html" - Uniquement déterministe - pas de
Date.now(),Math.random(), réseau dans le chemin de rendu
Après les modifications
Toujours exécuter npm run check avant de déclarer terminé. Corriger les erreurs ; examiner les avertissements.
Appariement de stack (Yuval / YUV.AI par défaut)
- Préférer HyperFrames + GSAP pour les vidéos animées
- React/Next lorsque l'interface produit est concernée - exporter tout de même l'animation via les workflows HyperFrames lorsque le livrable est une vidéo
- Pipeline de rendu html-to-canvas / HyperFrames plutôt que des diaporamas ffmpeg ad-hoc, sauf demande contraire de l'utilisateur