Compétences Marketing HyperFrames

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 de la timeline.

Approche

Avant d'écrire du HTML, réfléchissez à un niveau élevé :

1. Quoi — que doit voir le spectateur ? Identifiez l'arc narratif, les moments clés et les battements émotionnels.
2. Structure — combien de compositions, lesquelles sont des sous-compositions vs en ligne, quelles pistes transportent quoi (vidéo, audio, superpositions, légendes).
3. Timing — quels clips déterminent la durée, où se situent les transitions, quel est le rythme.
4. Disposition — construisez d'abord l'état final. Voir "Disposition avant animation" ci-dessous.
5. Animer — ajoutez ensuite du mouvement en utilisant les règles ci-dessous.

Pour les petites modifications (corriger une couleur, ajuster un timing, ajouter un élément), passez directement aux règles.

Porte d'Identité Visuelle

Vérifiez dans cet ordre :

1. DESIGN.md existe dans le projet ? → Lisez-le. Utilisez ses couleurs, polices, règles de mouvement et "Ce qu'il ne faut PAS faire" exacts.
2. visual-style.md existe ? → Lisez-le. Appliquez son style_prompt_full et ses champs structurés. (Remarque : visual-style.md est un fichier propre au projet. visual-styles.md est la bibliothèque de styles avec 8 presets nommés — fichiers différents.)
3. L'utilisateur a nommé un style (ex. "Swiss Pulse", "dark and techy", "marque de luxe") ? → Lisez visual-styles.md pour les 8 presets nommés. Générez un DESIGN.md minimal avec : ## Style Prompt (un paragraphe), ## Colors (3-5 valeurs hex avec leurs rôles), ## Typography (1-2 familles de polices), ## What NOT to Do (3-5 anti-patrons).
4. Rien de ce qui précède ? → Posez 3 questions avant d'écrire du HTML :
   • Quelle est l'ambiance ? (explosive / cinématographique / fluide / technique / chaotique / chaleureuse)
   • Fond clair ou foncé ?
   • Des couleurs, polices ou références visuelles spécifiques à la marque ? Générez ensuite un DESIGN.md minimal à partir des réponses.

Chaque composition doit faire remonter sa palette et sa typographie à un DESIGN.md, un visual-style.md ou une directive explicite de l'utilisateur. Si vous cherchez #333, #3b82f6 ou Roboto — vous avez sauté cette étape.

Pour les valeurs par défaut de mouvement, le dimensionnement, les motifs d'entrée et l'assouplissement — suivez house-style.md. Le house style gère COMMENT les choses bougent. Le DESIGN.md gère À QUOI les choses ressemblent.

Disposition avant Animation

Positionnez chaque élément là où il devrait ê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 jusqu'à l'endroit 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 l'état final en premier, vous pouvez voir et corriger les problèmes de disposition avant d'ajouter du mouvement.

Le processus

1. Identifiez l'image héroïque de chaque scène — le moment où le plus d'éléments sont visibles simultanément. C'est la disposition que vous construisez.
2. Écrivez du CSS statique pour cette image. Le conteneur .scene-content DOIT remplir toute la scène en utilisant width: 100%; height: 100%; padding: Npx; avec display: flex; flex-direction: column; gap: Npx; box-sizing: border-box. Utilisez le padding pour pousser le contenu vers l'intérieur — JAMAIS position: absolute; top: Npx sur 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éservez position: absolute uniquement pour les éléments décoratifs.
3. Ajoutez les entrées avec gsap.from() — animez DEPUIS hors écran/invisible VERS la position CSS. La position CSS est la vérité de base ; le tween décrit le voyage pour y arriver.
4. Ajoutez les sorties avec gsap.to() — animez VERS 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 à toutes les tailles de scène (1920x1080, 1080x1920, etc.).
   Le padding positionne le contenu. Flex + gap gère l'espacement. */

FAUX — 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);

Lorsque des é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 un chevauchement intentionnel

Les effets superposés (lueur derrière le texte, éléments d'ombre, motifs d'arrière-plan) et les conceptions en z-stack (piles de cartes, couches de profondeur) sont intentionnels. L'étape de disposition consiste à 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 par défaut est 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	Prime sur la durée de la timeline GSAP
data-width / data-height	Oui	Dimensions en pixels (1920x1080 ou 1080x1920)
data-composition-src	Non	Chemin vers le fichier HTML externe

Structure de Composition

Les sous-compositions chargées via data-composition-src utilisent un wrapper <template>. Les compositions autonomes (le fichier index.html principal) n'utilisent PAS <template> — elles placent le div data-composition-id directement dans <body>. L'utilisation de <template> sur un fichier autonome cache tout le contenu du 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 délimités */
      }
    </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>

Chargement 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 logique basée sur le temps. Utilisez un PRNG ensemencé si vous avez besoin de valeurs pseudo-aléatoires (par exemple mulberry32).

GSAP : Animer uniquement les propriétés visuelles (opacity, x, y, scale, rotation, color, backgroundColor, borderRadius, transforms). N'animez PAS visibility, display, ou 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 faites jamais :

1. Oubliez l'enregistrement window.__timelines
2. Utilisez la vidéo pour l'audio — toujours vidéo muette + <audio> séparé
3. Imbriquez la vidéo dans un div temporisé — utilisez un wrapper non temporisé
4. Utilisez data-layer (utilisez data-track-index) ou data-end (utilisez data-duration)
5. Animez les dimensions des éléments vidéo — animez un div wrapper
6. Appelez play/pause/seek sur un média — le framework possède la lecture
7. Créez un conteneur de premier niveau sans data-composition-id
8. Utilisez repeat: -1 sur une timeline ou un tween — toujours des répétitions finies
9. Construisez des timelines de manière asynchrone (dans async, setTimeout, Promise)
10. Utilisez 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 tl.set(selector, vars, timePosition) à l'intérieur de la timeline à ou après l'heure data-start du clip à la place.
11. Utilisez <br> dans le texte de contenu — les sauts de ligne forcés ne tiennent pas compte de la largeur réelle de la police rendue. Le texte qui se renvoie naturellement + un <br> produit un saut supplémentaire indésirable, provoquant un chevauchement. Laissez le texte se renvoyer via max-width à la place. Exception : les titres d'affichage courts où chaque mot est délibérément sur sa propre ligne (par exemple, "THE\nIMMORTAL\nGAME" à 130px).

Transitions de Scène (Non-Négociables)

Toute composition multi-scène DOIT suivre TOUTES ces règles. En violer une seule est une composition cassée.

1. Utilisez TOUJOURS des transitions entre les scènes. Pas de coupes franches. Aucune exception.
2. Utilisez TOUJOURS des animations d'entrée sur chaque scène. Chaque élément entre VIA gsap.from(). Aucun élément ne peut apparaître complètement formé. Si une scène a 5 éléments, elle a besoin de 5 tweens d'entrée.
3. N'utilisez JAMAIS d'animations de sortie sauf sur la dernière scène. Cela signifie : PAS de gsap.to() qui anime l'opacité à 0, y hors écran, l'échelle à 0, ou toute autre animation "sortie" avant qu'une transition ne se déclenche. La transition EST la sortie. Le contenu de la scène sortante DOIT être complètement visible au moment où la transition commence.
4. Dernière scène uniquement : La dernière scène peut estomper les éléments (par exemple, fondu au noir). C'est la SEULE scène où gsap.to(..., { opacity: 0 }) est autorisé.

FAUX — animation de sortie avant la transition :

// INTERDIT — cela vide la scène avant que la transition puisse l'utiliser
tl.to("#s1-title", { opacity: 0, y: -40, duration: 0.4 }, 6.5);
tl.to("#s1-subtitle", { opacity: 0, duration: 0.3 }, 6.7);
// la transition se déclenche sur une image vide

CORRECT — entrée uniquement, la transition gère la sortie :

// Animations d'entrée de la scène 1
tl.from("#s1-title", { y: 50, opacity: 0, duration: 0.7, ease: "power3.out" }, 0.3);
tl.from("#s1-subtitle", { y: 30, opacity: 0, duration: 0.5, ease: "power2.out" }, 0.6);
// PAS de tweens de sortie — la transition à 7.2 s gère le changement de scène
// Animations d'entrée de la scène 2
tl.from("#s2-heading", { x: -40, opacity: 0, duration: 0.6, ease: "expo.out" }, 8.0);

Garde-fous d'Animation

• Décalez la première animation de 0.1 à 0.3 s (pas à t=0)
• Variez les assouplissements entre les tweens d'entrée — utilisez au moins 3 assouplissements différents par scène
• Ne répétez pas un motif d'entrée dans une scène
• Évitez les dégradés linéaires plein écran sur les fonds sombres (bandes H.264 — utilisez radial ou uni + lueur localisée)
• Titres de 60px+, corps de 20px+, étiquettes de données de 16px+ pour la vidéo rendue
• font-variant-numeric: tabular-nums sur les colonnes de nombres

Lorsqu'aucun visual-style.md ou direction d'animation n'est fourni, suivez house-style.md pour les valeurs esthétiques par défaut.

Typographie et Ressources

• Polices : Écrivez simplement le font-family que vous voulez en CSS — le compilateur intègre automatiquement les polices prises en charge. Si une police n'est pas prise en charge, le compilateur vous avertit.
• Ajoutez crossorigin="anonymous" aux médias externes
• Pour

…

[tronqué pour la traduction]