Aperçu
Cette compétence assemble une vidéo de lancement produit — plan héro, mises en avant des fonctionnalités, minutage — sous forme de composition HyperFrames. Utilisez-la lorsqu'une nouvelle version nécessite une vidéo d'annonce courte et personnalisable. Elle rend le MP4 final à partir des ressources produit que vous fournissez.
HyperFrames — Vidéo de lancement produit
Créez des vidéos de lancement produit en écrivant des compositions HTML qu'HyperFrames transforme en MP4 déterministe. Le pipeline vidéo natif pour les agents : les LLMs écrivent du HTML (leur langue maternelle), HyperFrames rend des vidéos image par image via un Chrome sans tête + FFmpeg.
Quand utiliser
- L'utilisateur souhaite une vidéo de lancement produit à partir d'une URL, d'un brief ou d'un script
- L'utilisateur souhaite une visite guidée de site / démonstration présentant les visuels du produit
- L'utilisateur souhaite un clip social (TikTok/Reels/Shorts) avec des légendes animées et une identité de marque
- L'utilisateur souhaite une vidéo marketing/promo avec des superpositions animées et de la musique
- L'utilisateur dit « fais-moi une vidéo » et fournit une URL ou une description du produit
Quand NE PAS utiliser
- L'utilisateur souhaite du contenu avec de vraies personnes / UGC / en studio (nécessite une caméra, pas du HTML)
- L'utilisateur souhaite du direct / live shopping (nécessite l'ingestion RTMP)
- L'utilisateur souhaite une interview face caméra (utilisez
hyperframes-embedded-captionsouhyperframes-talking-head-recut) - L'utilisateur souhaite une vidéo explicative sans produit/URL (utilisez
hyperframes-faceless-explainer) - L'utilisateur souhaite une présentation/diaporama (utilisez
hyperframes-slideshow)
Flux de travail
0 · Initialiser le projet
npx hyperframes init ma-video-lancement
cd ma-video-lancement
Ceci crée la structure du projet avec index.html, package.json et la CLI HyperFrames configurée.
1 · Planifier la vidéo
- Entrée : URL du produit, brief ou script
- Sortie : Storyboard de 3 à 6 scènes avec minutage (total idéal 30-90s)
- Budget : titre ≤2s, outro ≤3s, scènes centrales ≈8-12s chacune
- Choisir un langage visuel : parcourir
hyperframes.heygen.com/designpour les modèles frame.md
2 · Écrire le HTML de composition
Le contrat de composition :
<!doctype html>
<html lang="fr">
<body>
<div
id="main"
data-composition-id="intro"
data-start="0"
data-duration="15"
data-width="1080"
data-height="1920"
data-fps="30"
>
<div
class="clip"
data-start="0"
data-duration="5"
data-track-index="0"
>
<!-- Contenu de la scène -->
</div>
</div>
</body>
</html>
Attributs clés :
data-composition-id: identifiant unique de la compositiondata-start/data-duration: minutage en secondesdata-width/data-height: dimensions de la zone d'affichage (1080×1920 pour 9:16)data-fps: fréquence d'images (30 par défaut)class="clip": marque les éléments temporisésdata-track-index: ordre des couches (plus élevé = au-dessus)
3 · Câbler les animations déterministes
Utilisez GSAP (recommandé), les keyframes CSS, ou WAAPI. Toutes les animations doivent être déterministes (même image au même moment, à chaque rendu).
Modèle GSAP (recommandé) :
const tl = gsap.timeline({ paused: true });
tl.to("#title", { opacity: 1, y: 0, duration: 0.8, ease: "power4.out" }, 0.5);
tl.to("#image", { scale: 1, opacity: 1, duration: 1.2, ease: "power3.out" }, 1.0);
window.__timelines = { main: tl };
Modèle keyframes CSS :
@keyframes fadeInUp {
from { transform: translateY(40px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.animate-in {
animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
4 · Ajouter des médias
- Images : téléchargez dans le dossier
public/, référencez viastaticFile()ou chemin relatif - Fonds vidéo : placez dans
assets/, bouclez viadata-loop - Audio/BGM : ajoutez via
<audio data-start="0" data-duration="15" src="./bgm.mp3"> - Voix off : générez via TTS, alignez les sous-titres sur les timings des mots
5 · Linter et vérifier
npx hyperframes check # valider le contrat de composition
npx hyperframes lint # vérifier les erreurs courantes
Corrigez toutes les erreurs avant de continuer. Les avertissements sont acceptables mais doivent être examinés.
6 · Prévisualiser
npx hyperframes preview # ouvre Hyperframes Studio avec HMR
Vérifiez 3 à 4 temps forts via __player.seek(time) sur la page brute de la composition. Vérifiez :
- Les animations se déclenchent au bon moment
- Pas de flashs blancs aux coupures (fond de scène opaque)
- Sous-titres visibles et lisibles
- Niveaux audio équilibrés
7 · Rendre
npx hyperframes render --output video-lancement.mp4
Vérifiez le résultat :
ffmpeg -ss 3 -i video-lancement.mp4 -frames:v 1 frame-3s.png # vérifier les sous-titres
ffmpeg -ss 15 -i video-lancement.mp4 -frames:v 1 frame-15s.png # vérifier la scène
Tableau anti-contournement
| Rationalisation | Réalité |
|---|---|
| « Je vais juste utiliser un éditeur vidéo » | Les éditeurs GUI ne sont pas natifs pour les agents ; le HTML est ce que les LLMs écrivent le mieux |
| « Je vais sauter l'étape de lint » | Le lint détecte les erreurs de contrat de composition qui cassent les rendus |
| « Je vais utiliser Remotion à la place » | Remotion nécessite une logique React ; le HTML est plus simple pour les agents |
| « Je vais ajouter des animations de remplissage » | Les oscillations inutiles sont interdites — chaque phase doit être active (voir hyperframes-cut-the-curve) |
| « Je vais centrer le contenu à 42% pour laisser de la place aux sous-titres » | Les sous-titres sont une superposition — centrez sur le vrai centre (y = H/2) |
| « Je vais utiliser un fondu enchaîné entre les scènes » | Les fondus enchaînés n'ont pas de porteuse — utilisez cut-the-curve pour les limites par défaut |
| « Je vais écrire un seul gros fichier HTML sans scènes » | Les scènes sont l'unité de composition — chaque scène a son propre wrapper clip |
| « Je vais sauter la prévisualisation et rendre directement » | La prévisualisation détecte les erreurs de timing qui gaspillent du temps de rendu |
Exemple de code
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0a0a0a; }
#main {
position: relative;
width: 1080px;
height: 1920px;
overflow: hidden;
}
.scene {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.5s ease;
}
.scene.active { opacity: 1; }
.hook-bg {
background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 80px;
text-align: center;
color: white;
font-family: system-ui, sans-serif;
}
.hook-text {
font-size: 72px;
font-weight: 800;
line-height: 1.1;
transform: translateY(40px);
opacity: 0;
}
.animate-in {
animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes fadeInUp {
from { transform: translateY(40px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
</style>
</head>
<body>
<div
id="main"
data-composition-id="pub-produit"
data-start="0"
data-duration="15"
data-width="1080"
data-height="1920"
data-fps="30"
>
<div class="scene hook-bg" data-start="0" data-duration="5" data-track-index="0">
<h1 class="hook-text animate-in" data-start="0.5" data-duration="4">
Nom du produit
</h1>
</div>
</div>
<script>
// Activation des scènes via IntersectionObserver ou minutage manuel
const scenes = document.querySelectorAll('.scene');
scenes.forEach(scene => {
const start = parseFloat(scene.dataset.start);
const duration = parseFloat(scene.dataset.duration);
setTimeout(() => scene.classList.add('active'), start * 1000);
setTimeout(() => scene.classList.remove('active'), (start + duration) * 1000);
});
</script>
</body>
</html>
Vérification
- La composition passe
npx hyperframes checkavec 0 erreur - Toutes les scènes ont
data-start,data-duration,data-track-index - Les animations sont déterministes (non dépendantes de l'horloge murale)
- La prévisualisation montre un minutage correct sur 3 temps forts ou plus
- Le MP4 rendu n'a ni flashs blancs, ni images figées, ni sous-titres manquants
- Les niveaux audio sont équilibrés (application de la réduction du volume de la voix off si nécessaire)
- La résolution de sortie correspond à la cible (1080×1920 pour 9:16, 1920×1080 pour 16:9)