HyperFrames
L'HTML est la source de vérité pour la vidéo. Une composition est un fichier HTML avec des attributs data-* pour le timing, une timeline GSAP pour l'animation, et du CSS pour l'apparence. Le framework gère la visibilité des clips, la lecture des médias et la synchronisation des timelines.
Approche
Avant d'écrire du HTML, réfléchissez à un haut niveau :
- Quoi — que doit vivre le spectateur ? Identifiez l'arc narratif, les moments clés et les battements émotionnels.
- Structure — combien de compositions, lesquelles sont des sous-compositions vs inline, quelles pistes portent quoi (vidéo, audio, superpositions, légendes).
- Timing — quels clips déterminent la durée, où se situent les transitions, quel est le rythme.
- Disposition — construisez d'abord l'état final. Voir « Disposition avant l'animation » ci-dessous.
- Animer — puis ajoutez le mouvement en utilisant les règles ci-dessous.
Pour les petites modifications (corriger une couleur, ajuster le timing, ajouter un élément), passez directement aux règles.
Porte d'identité visuelle
Vérifiez dans cet ordre :
- DESIGN.md existe dans le projet ? → Lisez-le. Utilisez ses couleurs exactes, polices, règles de mouvement et contraintes « Ce qu'il ne faut PAS faire ».
- visual-style.md existe ? → Lisez-le. Appliquez son
style_prompt_fullet ses champs structurés. (Note :visual-style.mdest un fichier spécifique au projet.visual-styles.mdest la bibliothèque de styles avec 8 préréglages nommés — des fichiers différents.) - L'utilisateur a nommé un style (par exemple « Swiss Pulse », « sombre et techy », « marque de luxe ») → Lisez visual-styles.md pour les 8 préréglages nommés. Générez un DESIGN.md minimal avec :
## Style Prompt(un paragraphe),## Couleurs(3-5 valeurs hexadécimales avec rôles),## Typographie(1-2 familles de polices),## Ce qu'il ne faut PAS faire(3-5 anti-modèles). - Aucun des cas ci-dessus ? → Posez 3 questions avant d'écrire du HTML :
- Quelle est l'ambiance ? (explosive / cinématographique / fluide / technique / chaotique / chaleureuse)
- Toile claire ou foncée ?
- Y a-t-il des couleurs de marque, polices ou références visuelles spécifiques ? Générez ensuite un DESIGN.md minimal à partir des réponses.
Toute composition doit faire remonter sa palette et sa typographie à un DESIGN.md, visual-style.md ou à une direction utilisateur explicite. Si vous utilisez #333, #3b82f6 ou Roboto — vous avez sauté cette étape.
Pour les réglages par défaut de mouvement, de dimensionnement, de motifs d'entrée et d'assouplissement — suivez house-style.md. Le style maison gère COMMENT les choses bougent. Le DESIGN.md gère À QUOI ressemblent les choses.
Disposition avant l'animation
Positionnez chaque élément là où il doit être à son moment le plus visible — l'image où il est complètement entré, correctement placé et pas encore en train de sortir. Écrivez cela d'abord en HTML+CSS statique. Pas encore de GSAP.
Pourquoi c'est important : Si vous positionnez les éléments à leur état de départ animé (hors écran, mis à l'échelle à 0, opacité 0) et que vous les animez vers où vous pensez qu'ils devraient atterrir, vous devinez la disposition finale. Les chevauchements sont invisibles jusqu'à ce que la vidéo soit rendue. En construisant d'abord l'état final, vous pouvez voir et corriger les problèmes de disposition avant d'ajouter du mouvement.
Le processus
- Identifiez l'image héroïque pour chaque scène — le moment où le plus grand nombre d'éléments sont simultanément visibles. C'est la disposition que vous construisez.
- Écrivez du CSS statique pour cette image. Le conteneur
.scene-contentDOIT remplir toute la scène en utilisantwidth: 100%; height: 100%; padding: Npx;avecdisplay: flex; flex-direction: column; gap: Npx; box-sizing: border-box. Utilisez le padding pour pousser le contenu vers l'intérieur — JAMAISposition: absolute; top: Npxsur un conteneur de contenu. Les conteneurs de contenu positionnés en absolu débordent lorsque le contenu est plus haut que l'espace restant. Réservezposition: absoluteuniquement pour les éléments décoratifs. - Ajoutez les entrées avec
gsap.from()— animez DEPUIS un état hors écran/invisible VERS la position CSS. La position CSS est la vérité de base ; la tween décrit le parcours pour y arriver. - Ajoutez les sorties avec
gsap.to()— animez VERS un état hors écran/invisible DEPUIS la position CSS.
Exemple
/* scene-content remplit la scène, le padding positionne le contenu */
.scene-content {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100%;
padding: 120px 160px;
gap: 24px;
box-sizing: border-box;
}
.title {
font-size: 120px;
}
.subtitle {
font-size: 42px;
}
/* Le conteneur s'adapte à toute taille de scène (1920x1080, 1080x1920, etc.).
Le padding positionne le contenu. Flex + gap gèrent l'espacement. */
MAUVAIS — dimensions codées en dur et positionnement absolu :
.scene-content {
position: absolute;
top: 200px;
left: 160px;
width: 1920px;
height: 1080px;
display: flex; /* ... */
}
// Étape 3 : Animez VERS ces positions
tl.from(".title", { y: 60, opacity: 0, duration: 0.6, ease: "power3.out" }, 0);
tl.from(".subtitle", { y: 40, opacity: 0, duration: 0.5, ease: "power3.out" }, 0.2);
tl.from(".logo", { scale: 0.8, opacity: 0, duration: 0.4, ease: "power2.out" }, 0.3);
// Étape 4 : Animez DEPUIS ces positions
tl.to(".title", { y: -40, opacity: 0, duration: 0.4, ease: "power2.in" }, 3);
tl.to(".subtitle", { y: -30, opacity: 0, duration: 0.3, ease: "power2.in" }, 3.1);
tl.to(".logo", { scale: 0.9, opacity: 0, duration: 0.3, ease: "power2.in" }, 3.2);
Quand les éléments partagent de l'espace dans le temps
Si l'élément A sort avant que l'élément B n'entre dans la même zone, les deux doivent avoir des positions CSS correctes pour leurs images héroïques respectives. L'ordre de la timeline garantit qu'ils ne coexistent jamais visuellement — mais si vous sautez l'étape de disposition, vous ne détecterez pas le cas où ils se chevauchent accidentellement en raison d'une erreur de timing.
Ce qui compte comme chevauchement intentionnel
Les effets en couches (lueur derrière le texte, éléments d'ombre, motifs d'arrière-plan) et les conceptions en pile z (piles de cartes, couches de profondeur) sont intentionnels. L'étape de disposition sert à détecter les chevauchements non intentionnels — deux titres atterrissant l'un sur l'autre, une statistique couvrant une étiquette, un contenu débordant du cadre.
Attributs de données
Tous les clips
| Attribut | Requis | Valeurs |
|---|---|---|
id | Oui | Identifiant unique |
data-start | Oui | Secondes ou référence d'ID de clip ("el-1", "intro + 2") |
data-duration | Requis pour img/div/compositions | Secondes. La vidéo/audio prend par défaut la durée du média. |
data-track-index | Oui | Entier. Les clips de même piste ne peuvent pas se chevaucher. |
data-media-start | Non | Décalage de coupe dans la source (secondes) |
data-volume | Non | 0-1 (par défaut 1) |
data-track-index n'affecte pas la superposition visuelle — utilisez CSS z-index.
Clips de composition
| Attribut | Requis | Valeurs |
|---|---|---|
data-composition-id | Oui | ID de composition unique |
data-start | Oui | Heure de début (composition racine : utilisez "0") |
data-duration | Oui | Remplace la durée de la timeline GSAP |
data-width / data-height | Oui | Dimensions en pixels (1920x1080 ou 1080x1920) |
data-composition-src | Non | Chemin vers un fichier HTML externe |
Structure de composition
Les sous-compositions chargées via data-composition-src utilisent un wrapper <template>. Les compositions autonomes (le main index.html) n'utilisent PAS <template> — elles placent directement le div data-composition-id dans <body>. Utiliser <template> sur un fichier autonome cache tout le contenu au navigateur et casse le rendu.
Structure de sous-composition :
<template id="my-comp-template">
<div data-composition-id="my-comp" data-width="1920" data-height="1080">
<!-- contenu -->
<style>
[data-composition-id="my-comp"] {
/* styles limités à cette composition */
}
</style>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<script>
window.__timelines = window.__timelines || {};
const tl = gsap.timeline({ paused: true });
// tweens...
window.__timelines["my-comp"] = tl;
</script>
</div>
</template>
Chargez dans la racine : <div id="el-1" data-composition-id="my-comp" data-composition-src="compositions/my-comp.html" data-start="0" data-duration="10" data-track-index="1"></div>
Vidéo et audio
La vidéo doit être muted playsinline. L'audio est toujours un élément <audio> séparé :
<video
id="el-v"
data-start="0"
data-duration="30"
data-track-index="0"
src="video.mp4"
muted
playsinline
></video>
<audio
id="el-a"
data-start="0"
data-duration="30"
data-track-index="2"
src="video.mp4"
data-volume="1"
></audio>
Contrat de timeline
- Toutes les timelines commencent
{ paused: true }— le lecteur contrôle la lecture - Enregistrez chaque timeline :
window.__timelines["<composition-id>"] = tl - Le framework imbrique automatiquement les sous-timelines — ne les ajoutez PAS manuellement
- La durée provient de
data-duration, pas de la longueur de la timeline GSAP - Ne créez jamais de tweens vides pour définir la durée
Règles (Non négociables)
Déterministe : Pas de Math.random(), Date.now() ou de logique basée sur le temps. Utilisez un PRNG avec graine si vous avez besoin de valeurs pseudo-aléatoires (par exemple mulberry32).
GSAP : Animez uniquement les propriétés visuelles (opacity, x, y, scale, rotation, color, backgroundColor, borderRadius, transformations). N'animez PAS visibility, display, et n'appelez pas video.play()/audio.play().
Conflits d'animation : N'animez jamais la même propriété sur le même élément à partir de plusieurs timelines simultanément.
Pas de repeat: -1 : Les timelines à répétition infinie cassent le moteur de capture. Calculez le nombre exact de répétitions à partir de la durée de la composition : repeat: Math.ceil(duration / cycleDuration) - 1.
Construction synchrone de timeline : Ne construisez jamais de timelines à l'intérieur de async/await, setTimeout ou Promesses. Le moteur de capture lit window.__timelines de manière synchrone après le chargement de la page. Les polices sont intégrées par le compilateur, donc elles sont disponibles immédiatement — pas besoin d'attendre le chargement des polices.
Ne JAMAIS faire :
- Oublier l'enregistrement de
window.__timelines - Utiliser la vidéo pour l'audio — toujours vidéo muette +
<audio>séparé - Nicher une vidéo à l'intérieur d'un div temporisé — utilisez un wrapper non temporisé
- Utiliser
data-layer(utilisezdata-track-index) oudata-end(utilisezdata-duration) - Animer les dimensions d'un élément vidéo — animez un div wrapper
- Appeler play/pause/seek sur les médias — le framework possède la lecture
- Créer un conteneur de premier niveau sans
data-composition-id - Utiliser
repeat: -1sur toute timeline ou tween — toujours des répétitions finies - Construire des timelines de manière asynchrone (à l'intérieur de
async,setTimeout,Promise) - Utiliser
gsap.set()sur des éléments de clip de scènes ultérieures — ils n'existent pas dans le DOM au chargement de la page. Utilisez plutôttl.set(selector, vars, timePosition)à l'intérieur de la timeline à ou après l'heuredata-startdu clip. - Utiliser
<br>dans le texte de contenu — les sauts de ligne forcés ne sont pas pris en charge. Utilisez plusieurs éléments (par exemple,spanavecdisplay: block) pour créer des sauts de ligne dans le texte.