Installation de plugins : Avant les commandes de configuration ou de mise à jour, suivez les règles d'exécution des plugins lorsque cette compétence se trouve dans un plugin HyperFrames. Les installations autonomes conservent les instructions de mise à jour ci-dessous.
HyperFrames Core
Pièges pour les agents (à lire en premier) :
- Centrer avec flex/
inset, pas avec CSStransform: translate(-50%,-50%)sur un nœud que vous animez ensuite avec GSAPx/y. Lint :gsap_css_transform_conflict. UtilisezfromToouxPercent/yPercent. - N'ajoutez pas de
tl.set(..., {visibility:"hidden"})pour la sortie de scène. Le runtime masque déjà les clips chronométrés. Les fondus d'opacité sur les nœuds internes (ouopacitysur.clip) sont suffisants. Les arrêts bruts de légendes sont une règle différente. window.__timelines["id"]doit correspondre audata-composition-idracine.- Après
render, lisez la deuxième ligne du résumé :beginframevsscreenshot, mode GPU, timings des étapes.screenshot+software gpusur Linux est le chemin lent.
HyperFrames rend des vidéos à partir de HTML. Une composition est un fichier HTML dont le DOM déclare le timing avec des attributs data-*, dont le runtime d'animation est accessible, et dont la lecture multimédia est gérée par le framework.
Cette compétence est le contrat technique : comment construire un projet hyperframes. Le corps ci-dessous est le guide de construction ; les détails par sujet vivent dans references/ (index suivant), lisez à la demande. Les documents de processus (brief, storyboard, review, production, dispatch, frame-worker) se trouvent dans /hyperframes → references/. Les autres préoccupations se trouvent dans les compétences de domaine sœurs — hyperframes-animation, hyperframes-creative, media-use, hyperframes-cli, hyperframes-registry. La carte des capacités dans /hyperframes indique ce que couvre chaque compétence.
Références
| Fichier | Lisez-le pour… |
|---|---|
references/minimal-composition.md | commencer par le plus petit squelette de composition rendu |
references/composition-patterns.md | choisir entre monolithique et modulaire ; structurer un index.html modulaire ; choisir un archétype de sous-comp |
references/data-attributes.md | rechercher n'importe quel attribut data-* (racine / clip / hôte sous-comp / alias hérités) ; utiliser class="clip" |
references/tracks-and-clips.md | comprendre ce que data-track-index contrôle (et ne contrôle pas), le z-index, le timing d'un clip par rapport à un autre ; lister chaque piste et clip avec npx hyperframes timeline |
references/creator-editing-recipes.md | copier des recettes d'édition fiables (couper/rogner/réorganiser/rechronométrer/geler/caméra/masque/fondu enchaîné/audio) et leurs limites |
references/sub-compositions.md | câbler une sous-composition (attributs hôte, <template>, variables par instance) et animer à l'intérieur |
references/variables-and-media.md | déclarer des variables ; placer <video>/<audio>, régler le volume, rogner |
references/determinism-rules.md | construire une timeline accessible ; interdictions de déterminisme ; mise en page / ajustement du texte |
references/full-screen-motion.md | créer un mouvement plein écran avec des arrière-plans partagés |
references/tailwind.md | travailler dans un projet Tailwind v4 (init --tailwind ; le contrat d'exécution diffère de Studio en v3) |
Pour les spécificités du runtime d'animation (API GSAP, Lottie, Three.js, etc.), allez sur hyperframes-animation → adapters/<runtime>.md.
Construire une composition
Deux formes racines (non interchangeables)
- Autonome (
index.htmlde premier niveau) : le<div data-composition-id="…">racine se trouve directement dans<body>, pas de wrapper<template>. Envelopper une racine autonome masque tout le contenu etlintle rejette (standalone_composition_wrapped_in_template, erreur). - Sous-composition (chargée via
data-composition-src) : enveloppez la racine dans<template>. C'est la forme à écrire : le chargeur accepte également un document complet et utilise son<body>par défaut, mais la forme avec template est celle que les exemples et les outils supposent.
⚠ Règle de transport : pour une sous-composition avec template, l'assembleur ignore le
<head><style>/<script>du fichier lui-même (packages/core/src/compiler/compositionAssembly.ts, portehasTemplate), alors placez<style>/<script>à l'intérieur du template.<link>est remonté dans tous les cas. ⚠ Convention d'ID hôte : donnez à l'emplacement hôte, au template interne et à la cléwindow.__timelines["<id>"]le même id. Un id local différent est pris en charge (l'assembleur utilise par défaut la première racine du fichier) mais le décalage est silencieux, donc faites-les correspondre sauf si vous avez une raison de ne pas le faire.
Forme du fichier, câblage de l'hôte et liste de contrôle avant rendu → references/sub-compositions.md.
La racine doit être dimensionnée (bug de mise en page silencieux)
La racine autonome définit width/height : 100%. La taille du canevas est data-width/data-height. Le runtime applique ces pixels à la racine de la composition. Ne codez pas en dur 1920px/1080px sur #root. Squelette → references/minimal-composition.md.
Une seule timeline en pause
Chaque composition enregistre exactement une gsap.timeline({ paused : true }) à window.__timelines["<id>"] (clé = data-composition-id racine). La construire à l'intérieur d'un callback asynchrone (document.fonts.ready) est pris en charge ; ce qui compte est que vous enregistrez seulement après la fin de la construction. La durée de rendu est le data-duration de la racine, pas la longueur de la timeline : une timeline qui dépasse est coupée, et une timeline qui se termine tôt conserve sa dernière image. Omettez le data-duration racine et la durée est déduite à la place (timeline, fenêtre multimédia ou adaptateur). Vous n'avez pas besoin de window.__timelines = window.__timelines || {} : le runtime crée le registre avant que vos scripts en ligne ne s'exécutent, et lint ne le demande plus. N'imbriquez pas manuellement de sous-timelines dans l'hôte ; le runtime imbrique automatiquement les timelines enfants enregistrées. Contrat complet (y compris les runtimes non-GSAP) → references/determinism-rules.md + hyperframes-animation/adapters/.md.
Pièges de lint de premier passage (un échec de construction garanti)
Règles que lint attrape, mais seulement après coup. Écrivez-les correctement du premier coup :
- N'associez jamais un
transformCSS initial avec un tween GSAP sur la même propriété — la valeur CSS et le début du tween se battent etlintle rejette avecgsap_css_transform_conflict. Définissez l'état initial dans le tween avecgsap.fromTo(el, { x : -40 }, { x : 0 })au lieu d'un CSStransform : translateX(-40px). - Ne mettez jamais
crossoriginsur<video>/<audio>.lintle rejette inconditionnellement avecmedia_crossorigin_breaks_preview(erreur), y compris pour la lecture canvas/WebGL/WebAudio. Il n'y a pas de contournement. - Ne donnez jamais à un
<video data-start>un ancêtre qui porte égalementdata-start.lintle rejette avecvideo_nested_in_timed_element(erreur). Chronométrez le wrapper ou la vidéo, pas les deux. - Chaque
<audio>a besoin d'unid.lintle rejette avecmedia_missing_id, et un<audio>sans id n'est jamais pris en charge par le mélangeur, donc le rendu est silencieux. - N'animez jamais un
.clipavecautoAlphaouvisibility—lintle rejette avecgsap_animates_clip_element. Animez un enfant à la place. - Un
font-familyCSS nommé a besoin d'un@font-facedans le fichier vers un fichier local livré, oulintdéclenchefont_family_without_font_face. - La sous-composition
#rootutilisewidth/height : 100%(ouinset : 0), pas du1920px/1080pxcodé en dur. La taille du canevas estdata-width/data-height.
Une erreur de lint désactive également les audits de mise en page et de contraste : check signale alors 0 échantillon(s) et 0/0 vérifications de texte, ce qui ressemble à un fichier propre mais signifie que rien n'a été exécuté. Corrigez les erreurs de lint avant de faire confiance à ces chiffres.
Règles non négociables (bugs silencieux que les portes automatisées peuvent manquer)
Révélées ici ; raisonnement complet dans la référence liée. Ne violez pas :
- Pas d'horloges au moment du rendu /
Math.randomnon seedé / réseau / état d'entrée ; pas derepeat : -1(utilisez un nombre fini). →determinism-rules.md - N'animez jamais
display,visibilityouautoAlphasur un élément.clip. Le framework gère la visibilité du clip, etlintle rejette (gsap_animates_clip_element). Animez un enfant à la place. →determinism-rules.md - Pas de
<br>dans le texte du corps ; les éléments transformés doivent être de niveau bloc + dimensionnés ; les décoratifs absolus pulsés ont besoin d'une marge de sécurité. →determinism-rules.md - Les
<video>/<audio>sont trouvés par une requête plate du document, donc le framework les cherche et les décode à n'importe quelle profondeur d'imbrication (y compris à l'intérieur d'un<template>ou wrapper de sous-comp). Une limite dure :linterre si un<video data-start>se trouve à l'intérieur d'un autre élément simple qui porte égalementdata-start, et l'échec est réel (mauvaises trames source, puis le clip disparaît au milieu du slot), donc placez le timing sur le wrapper ou sur la vidéo, jamais les deux. Les hôtes de sous-composition sont exemptés : les médias à l'intérieur d'une sous-composition rendent correctement. L'autre mise en garde concerne les timelines, pas le placement : une timeline de sous-comp ne peut pas animer les éléments racine de l'hôte. →variables-and-media.md - Gardez chaque
idunique sur la page assemblée (préfixez les ids de sous-comp avec l'id de la composition,#<id>-hero) afin que votre propre CSS#idet les appelsgetElementByIdse résolvent. L'injection de trames n'en dépend plus : le compilateur appose undata-hf-render-idunique au document sur chaquevideo[src]/audio[src]/img[src]. Les médias qui utilisent des enfants<source>au lieu d'un attributsrcne sont pas marqués, donc les ids uniques comptent toujours là. →composition-patterns.md - Un remplissage plein écran sur la racine de la composition est correct sur un rendu normal. Il est supprimé uniquement sur le chemin composite en couches (contenu HDR, ou une composition utilisant des transitions shader), où le moteur force chaque racine de composition transparente pour que la couche en dessous apparaisse. Si votre composition utilise des transitions shader ou des médias HDR, placez le remplissage sur un enfant à pleine largeur (
position:absolute; inset:0). →composition-patterns.md
Modifier des compositions existantes
- Lisez d'abord les fichiers. Préservez le timing, les pistes, les IDs, les variables, les chemins multimédias non liés.
- Pour connaître ce qui se trouve sur la timeline d'un projet (pistes, clips, débuts, fins, ce qui est joué), exécutez
npx hyperframes timeline [--json]au lieu de lireindex.htmlet chaque fichier de sous-composition. - Faites correspondre les IDs de composition et les clés de timeline existants.
- Ajouter un clip : définissez intentionnellement son
data-start/data-durationpar rapport aux clips qui l'entourent.data-track-indexest un couloir d'affichage Studio, pas une contrainte de timing, donc il n'a pas besoin d'être libre. - Un clip qui se termine après le
data-durationracine est coupé : étendez ledata-durationracine jusqu'à la fin du clip dans la même modification (lintavertitclip_ends_past_root_duration). data-hiddensur n'importe quel élément de composition le masque à la fois dans l'aperçu et le rendu, remplaçant sa fenêtre temporelle ; il est non destructif/réversible et activé par l'icône en forme d'œil de la timeline Studio.- Ajouter une sous-composition : vérifiez son
data-composition-idinterne avant de câbler l'hôte.
Validation
Utilisez hyperframes-cli pour les détails des commandes
-
npx hyperframes checkréussit (0 résultats à travers lint, exécution, mise en page, mouvement et contraste) - Projets avec sous-compositions :
npx hyperframes snapshot --at <midpoints>et inspectez chaque image -
npx hyperframes preview --backgroundpour la révision (l'utilisateur peut éditer n'importe quoi dans la timeline Studio, et le serveur survit à la commande invoquante) -
npx hyperframes renderseulement après l'approbation de l'utilisateur