Avec HyperFrames, HeyGen propose de créer des scènes vidéo en HTML, CSS et JavaScript, de les prévisualiser dans un navigateur, puis de les exporter en MP4. Le bloc Canopy Part Title donne un exemple concret de cette approche. Des feuilles traversent l'image, s'écartent pour révéler un titre, puis accompagnent l'apparition d'un second texte. La scène est livrée avec son code et des réglages pour en produire une variante.
Pour une équipe qui crée des vidéos produit, l'intérêt tient à la réutilisation. Une séquence de titre peut entrer dans un processus de production, avec des textes et des paramètres visuels que l'on ajuste d'une version à l'autre. Voici ce que permet ce bloc et la place que nous lui donnerions dans une démonstration.
Ce que HyperFrames apporte à la création vidéo
Le dépôt officiel HyperFrames décrit un framework de composition vidéo fondé sur les technologies du Web. Les temps et les pistes sont exprimés dans le HTML, les animations peuvent être évaluées à un instant précis, et le résultat peut être rendu en vidéo. Le projet fournit aussi des instructions pour que des agents de code travaillent sur les compositions.
Un monteur ou un développeur dispose ainsi d'une scène qu'il peut inspecter et modifier. Changer un titre devient une retouche ciblée dans une composition existante. Cela suggère une bonne habitude de production : conserver ensemble la scène validée, ses textes et ses réglages, afin de préparer la version suivante à partir d'un résultat que l'équipe connaît.
Le bloc Canopy Part Title en détail
Le guide officiel du bloc décrit une composition de 12 secondes, en 1920 × 1080, à 30 images par seconde. Des feuilles texturées traversent une scène à faible profondeur de champ, révèlent le premier titre, puis accompagnent une seconde révélation. Quelques feuilles restent en léger mouvement autour du texte.
Le catalogue expose onze variables : les deux titres, la police, sa graisse, sa taille, l'espacement des lettres, la couleur du fond et quatre réglages pour les feuilles. Parmi ces paramètres :
| Réglage | Ce qu'il modifie |
|---|---|
headline1 et headline2 |
Les deux textes de titre |
leafCount |
Le nombre de feuilles par balayage, entre 40 et 320 dans l'interface déclarée |
stayCount |
Les feuilles conservées après un balayage |
sweepSpeed |
La vitesse du mouvement de balayage |
retainedBreeze |
Le mouvement des feuilles restantes |
Ces réglages figurent dans le code publié de la composition. Le premier travail utile concerne souvent le texte : choisir deux lignes courtes dont la relation est claire avant d'ajuster l'animation.
Essayer le bloc dans un petit projet
Le parcours documenté commence par un projet HyperFrames, auquel on ajoute la composition du catalogue :
npx hyperframes init my-video
cd my-video
npx hyperframes add canopy-part-title
Il faut ensuite monter le bloc installé dans le fichier index.html du projet hôte, en suivant son guide, puis lancer npx hyperframes preview. L'installation des fichiers et le placement de la scène dans le projet constituent deux étapes distinctes.
Le README du projet indique Node.js 22 ou une version ultérieure et FFmpeg comme prérequis. Il documente aussi npx hyperframes render pour exporter un projet. Modifiez les deux titres et regardez la séquence entière avant de l'ajouter à une vidéo plus longue.
Deux exemples rendus avec l’API HyperFrames
Nous avons rendu les deux exemples silencieux ci-dessous avec l'API officielle de production HyperFrames. Ils utilisent le même bloc Canopy Part Title, avec des textes et des réglages visuels différents. Ces séquences illustrent des titres ; le parcours produit viendrait ensuite dans une capture d'écran distincte. Les textes des vidéos sont en anglais et leurs intentions sont expliquées dans les légendes.
Ces aperçus Web utilisent une adaptation de la composition en 640 × 360, à 15 images par seconde, qui conserve le cadre complet en 16:9 et la durée de 12 secondes.
La génération utilise les fonctions createRenderJob et executeRenderJob du producer, en transmettant les variables de texte et d'animation à la même composition. On conserve ainsi un lien explicite entre le code source et ses variantes rendues.
Quelle place dans une démonstration produit
Pour un parcours logiciel dense, nous essayerions plutôt cette séquence comme séparation entre deux chapitres. L'interface reste visible pendant l'explication, puis le titre marque un changement de tâche significatif. Il faut regarder le montage complet pour décider si douze secondes méritent cette place. Une démonstration courte peut demander une introduction beaucoup plus simple.
Notre guide de préparation d'une démonstration SaaS, en anglais, commence par un public, une tâche et un résultat utile. Appliquez le même critère à l'animation : le titre doit aider à comprendre la scène suivante. Vérifiez les textes longs, le contraste et la lisibilité à la taille réelle de lecture.
HyperFrames mérite d'être exploré pour rendre les compositions animées modifiables et réutilisables. Canopy Part Title offre un exemple tangible pour commencer. Pour une vidéo DemoBro, choisissez d'abord ce que le produit doit démontrer, puis décidez si cette introduction rend le parcours plus facile à suivre. Explorez les exemples DemoBro, en anglais, pour préparer l'explication qui suivra le titre.