Un storyboard indique ce qui doit arriver. Un fichier HTML peut aussi indiquer quand, dans quel ordre et sous quelles règles cela doit arriver.
C’est le déplacement intéressant proposé par HyperFrames : la composition n’est plus seulement une maquette animée, mais une source de production que l’on peut ouvrir, relire à une frame précise et transmettre.
Ce qu’il faut retenir
- Avec HyperFrames, le storyboard peut devenir une composition HTML qui porte à la fois la scène, la durée, les éléments et les règles de timing.
- La valeur n’est pas « l’HTML fait de la vidéo » : c’est la possibilité de relire une intention à un instant précis, puis de modifier la source qui la décrit.
- Une composition utile doit expliciter son cadre, sa durée, ses clips, ses états et ses critères de relecture ; le renderer ne choisit pas la direction artistique.
- Le fichier vivant facilite la transmission entre direction artistique, développement créatif et outils d’automatisation, à condition de conserver un vocabulaire partagé.
Cas pratique : CADRA, une démo vidéo pilotée au clavier
Pour éprouver l’idée du storyboard vivant, j’ai produit une vidéo de démonstration de Cadra, une police open source d’Eugène Studio qui traduit 60 mouvements et cadrages de caméra en glyphes lisibles par une équipe comme par un agent. Le concept retenu, « Au clavier seulement », impose une contrainte forte : aucune souris à l’écran. Tab, les flèches, la recherche, le zoom, Esc, puis les touches C et J pilotent le vrai site, et chaque frappe déclenche une coupe et un son. La vidéo dure 68 secondes, en 1920 × 1080 à 30 images par seconde. Elle a été réalisée les 23 et 24 octobre 2026 avec la CLI HyperFrames 0.8.188 et un agent de code, Claude Code, sous direction humaine.
Du brief aux fichiers
Rien n’a été animé avant que l’intention soit écrite. Cinq concepts ont d’abord été proposés ; le choix final, « Au clavier seulement », est resté une décision humaine. Ce concept est ensuite devenu trois fichiers texte dans le projet : un BRIEF.md qui fixe le message, le format et la durée ; un SPEC.md qui transforme chaque adjectif en nombre (palette, tailles de texte, courbes d’animation, plans minutés à la seconde) ; un STORYBOARD.md qui liste les plans et ce que le spectateur doit lire dans chacun. Le storyboard visuel, 19 images clés, n’a pas été dessiné à part : il a été capturé dans la composition elle-même, aux instants prévus.
Le storyboard et la vidéo partagent donc la même source. Une image validée sur la planche est littéralement la frame que le rendu produira à cet instant.
Le cadre et le temps écrits dans la source
Le film est découpé en sous-compositions nommées : une par séquence (hero, flèches, recherche, échelle, rafale, touche J, fin), une par aplat de texte, et une composition à part pour le « rail ». Ce rail est la rangée de touches qui s’accumule en bas de l’écran et sert de timeline visible du film. Le tempo est fixé à 120 BPM, soit 15 images par temps : chaque frappe a un instant écrit, qui tombe sur une noire, une croche, une double ou une triple-croche.
Ce contrat s’est vérifié lors d’une révision. Insérer quatre aplats explicatifs de deux secondes au début a fait passer le film de 60 à 68 secondes. Au lieu de recaler la timeline à la main, une seule fonction de décalage a été ajoutée à la source. Toutes les frappes, les scènes et les sons se sont déplacés ensemble, sans perdre leur synchronisation.
Ce que les quatre relectures ont attrapé
- Intention. Après le premier rendu, la vidéo était juste, mais difficile à comprendre pour qui ne connaît pas Cadra. Quatre aplats de texte ont été intercalés au début (« 60 glyphs. 60 camera intentions. », « Humans read it. Agents run it. »…). La consigne suivante était tout aussi éditoriale : la musique ne doit pas changer quand les aplats apparaissent.
- Structure. Les sorties montrées à l’écran ne sont pas inventées. Le snippet HTML copié par la touche C et le JSON copié par J ont été relevés sur le site en direct, puis reproduits tels quels. Une scène qui prétend montrer le produit doit montrer le produit.
- Timing. Le contrôle automatique a signalé un JSON de 32 mots qui ne reste que 3,5 secondes à l’écran, alors qu’il en faudrait environ 7 pour le lire. L’alerte a été gardée volontairement, et documentée : le JSON est montré comme un objet, puis réduit à
{ glyph: "dolly-zoom" }, qui reste lisible. - Rendu. Les cadres de sélection autour des icônes étaient décalés de 18 à 24 pixels. Le contrôle automatique passait pourtant sans erreur. C’est un œil humain qui l’a vu. La cause était dans la police : chaque glyphe Cadra occupe une largeur de 1 em, mais son dessin ne fait que 0,704 em et il est collé à gauche. Le centrage « par la boîte » le décalait donc de 0,148 em. La correction a consisté à placer chaque glyphe selon son dessin mesuré. Plus tard, des icônes coupées sur les bords ont été signalées : elles ont été retrouvées en balayant le MP4 image par image, et non dans la preview.
Le dernier point illustre la limite déjà évoquée : une frame fait foi, mais seulement si quelqu’un la regarde. Une vérification réussie certifie qu’une composition est bien construite, pas qu’elle est juste.
Ce que le fichier n’a pas décidé
La musique illustre bien la frontière. Elle a été composée en code, calée sur la grille des frappes, puis mesurée : −14,9 LUFS intégrés, un pic à −3,3 dBTP, un silence entre 46,9 et 48 secondes, et l’impact de la touche J à 48,16 s. Ces chiffres prouvent que le son est présent, placé au bon endroit et au bon niveau. Ils ne disent pas s’il est réussi : l’agent qui l’a composé ne l’a jamais entendu. Ce jugement est resté humain, comme le choix du concept, la validation du storyboard et chaque demande de correction.
Le projet garde aussi sa propre trace. Un REVIEW.md consigne les choix créatifs, ce qui a été mesuré et ce qui a été seulement regardé, le plan jugé le plus faible et les alertes conservées volontairement. C’est la condition d’arrêt écrite noir sur blanc : ce qui a été corrigé, ce qui reste perfectible, et la raison.
Ce que montre ce cas
- Le storyboard et le film partagent une source : valider une image de la planche, c’est valider une frame du rendu.
- Le timing écrit rend les révisions structurelles peu coûteuses : ajouter 8 secondes au milieu du film n’a pas exigé de recaler chaque élément.
- Les contrôles automatiques attrapent les erreurs de construction ; les défauts visibles (décalage, recadrage) ont été trouvés par des yeux humains, puis vérifiés frame par frame.
- Ce qui ne peut pas être mesuré — la justesse musicale, la clarté pour un spectateur qui découvre le produit — reste une décision éditoriale.
Le storyboard ne reste plus sur le mur
Le storyboard classique est une promesse visuelle. Il fixe des plans, des intentions, des raccords et parfois une durée approximative. Sa force vient de sa vitesse : une équipe peut le parcourir en quelques minutes et discuter de ce qui manque avant de fabriquer.
Mais une image de storyboard ne dit pas toujours ce qui fait foi lorsque la scène devient animée. Quel élément entre en premier ? Combien de temps la composition tient-elle avant de révéler le titre ? La pause est-elle une respiration ou un oubli ? Le mouvement d’un objet est-il lié à l’apparition d’un texte, ou simplement superposé ? Ces questions sont souvent résolues oralement, puis perdues au moment du handoff.
L’idée HyperFrames consiste à déplacer une partie de cette intention dans une surface éditable. La page HTML devient un storyboard que l’on peut jouer, mais aussi inspecter comme un document : éléments, styles, attributs de timing, scripts d’animation et durée globale sont visibles dans le même projet. L’animation n’est donc plus une vidéo de référence placée à côté du code. Elle devient un état du fichier.
Cette différence change la conversation. Au lieu de dire « le bloc doit arriver un peu avant le titre », on peut décrire un début, une durée, une pause et une relation entre deux éléments. Le vocabulaire reste perfectible, mais il peut être écrit, relu et repris par quelqu’un d’autre.
Pour situer cette idée par rapport au choix de chaîne, consultez le guide de comparaison HyperFrames/Remotion : il couvre déjà les modèles HTML et React, le rendu par frames et leurs coûts de handoff.
Le fichier HTML est une partition, pas une capture d’écran
La documentation officielle décrit une composition comme un fichier HTML qui décrit une vidéo. Les éléments temporels portent des attributs data-*, et les éléments animés sont identifiés comme des clips. Le renderer peut alors demander une frame précise au lieu de dépendre d’une lecture en temps réel.
Cette mécanique ne rend pas automatiquement le fichier intéressant. Elle lui donne une partition minimale. Comme dans une partition musicale, il faut encore décider ce qui doit être joué, dans quelle mesure et avec quelle intention.
1. Le cadre : où la scène existe
Une composition commence par un viewport explicite : largeur, hauteur, identité et durée. Ce cadre est une décision éditoriale autant que technique. Une scène pensée pour un format 16:9 ne doit pas être simplement recadrée en portrait après coup si son intention repose sur une relation horizontale entre deux éléments.
Écrire le cadre au début évite une première ambiguïté : parle-t-on d’une idée de film, d’une page de preview ou d’un fichier qui doit pouvoir être rendu ? Le storyboard vivant répond : les trois peuvent être liés, mais ils doivent être distingués.
2. Le temps : quand un élément existe
Un clip possède une fenêtre temporelle. Dans la forme la plus simple, un élément commence à un instant et reste actif pendant une durée. Cette explicitation est utile même lorsqu’une animation est produite avec une librairie : elle donne au renderer et à la personne qui relit un contrat commun.
Le mot important est seekable. La scène doit pouvoir être amenée à une frame donnée et retrouver l’état attendu. Les horloges murales, les appels aléatoires non contrôlés et les états qui s’accumulent en dehors de la timeline fragilisent ce contrat. Une animation peut être agréable en preview et difficile à reproduire lors d’une capture frame par frame.
3. L’état : ce que la frame doit montrer
Un storyboard vivant doit pouvoir répondre à une question simple : « qu’est-ce qui est visible à cet instant ? » Pour cela, chaque état important doit avoir une cause lisible : une classe, un attribut, une interpolation ou une règle de composition.
Cette discipline protège contre le faux mouvement. Un objet qui semble s’animer parce que le navigateur rafraîchit l’écran n’est pas nécessairement un objet dont l’état peut être retrouvé. À l’inverse, une animation qui expose ses points d’entrée, sa durée et sa valeur finale devient plus facile à contrôler et à corriger.
Le mouvement devient un vocabulaire de production
Le storyboard vivant ne remplace pas la direction artistique. Il permet de lui donner un endroit où écrire avec davantage de précision. Une équipe peut distinguer une apparition, une translation, une tension, une pause, une révélation et une sortie. Ces mots ne sont pas des effets : ils décrivent le rôle narratif d’un changement.
Une bonne règle consiste à formuler chaque geste avec trois éléments : ce qui change, ce que le spectateur doit comprendre et le moment où la compréhension doit être stabilisée. « Le titre arrive » est trop pauvre. « Le titre arrive après la mise en place du cadre, reste lisible pendant une respiration et prépare la transition » donne une direction que le code peut ensuite traduire.
Pour préciser le vocabulaire de mouvement avant d’écrire la composition, vous pouvez distinguer le mouvement de caméra de l’intention de mise en scène. Le lien est utile ici pour une raison simple : un mot de mouvement ne vaut que par l’action qu’il sert.
Une même source, quatre relectures
Le fichier HTML peut être relu à quatre niveaux. Cette grille aide à ne pas confondre une composition fonctionnelle avec une scène éditorialement juste.
La relecture de l’intention
Avant toute vérification technique, la scène doit répondre au brief. Quelle information arrive ? Quelle tension est créée ? Où le regard doit-il se poser ? Si l’on retire les couleurs et les effets, la hiérarchie reste-t-elle compréhensible ?
La relecture de la structure
Le document doit rendre visibles les blocs qui font la scène : cadre, fond, sujet, texte, accent, sortie. Une personne qui n’a pas écrit le fichier doit pouvoir repérer les éléments sans parcourir un script opaque. Les sous-compositions et les noms cohérents deviennent alors des outils de narration autant que d’organisation.
La relecture du timing
Il faut ensuite regarder des instants précis : avant l’entrée, au moment de la révélation, dans la pause, juste avant la sortie. Les snapshots et les contrôles frame par frame sont plus informatifs qu’une lecture continue lorsqu’il s’agit de vérifier une intention ponctuelle.
La relecture du rendu
Enfin, la frame rendue doit rester fidèle à la surface éditable : polices, assets, contraste, dimensions, transparence éventuelle et raccords. Un preview convaincant ne suffit pas à certifier un fichier de production. La vidéo finale est une sortie ; la composition reste la source qu’il faudra pouvoir reprendre.
Ce que l’équipe gagne, et ce qu’elle doit écrire
Le principal gain n’est pas la vitesse brute. C’est la réduction de la distance entre l’idée et l’objet transmissible. Un directeur artistique peut parler d’une scène ; un creative developer peut l’inscrire dans un document ; un agent peut travailler dans un dossier borné ; une autre personne peut relire le fichier sans dépendre d’une mémoire orale complète.
Pour que cette promesse tienne, le projet doit écrire ses propres limites :
- Le cadre de production. Résolution, fps, durée, formats visés et emplacement des sources.
- Le vocabulaire. Noms des scènes, rôles des clips, conventions de classes et règles de nommage.
- Le contrat de timing. Instants d’entrée, durée, pauses nécessaires, sorties et dépendances entre éléments.
- La preuve attendue. Frames à contrôler, snapshots, lint, check, validation headless ou rendu final.
- La condition d’arrêt. Ce qui doit être corrigé, et ce qui est seulement une amélioration possible.
Pour formaliser le passage entre une intention et une production assistée, décrire un workflow créatif avec ses sources, ses étapes et sa condition d’arrêt fournit un cadre complémentaire. Le principe est transposable : l’automatisation devient utile lorsqu’elle laisse une trace exploitable.
La question rejoint aussi le passage du prototype au projet local : le guide Claude Motion ou Claude Code montre comment une grammaire de mouvement peut changer de chaîne sans perdre son intention.
Ce que HyperFrames ne décide pas à votre place
Une composition HTML n’est pas une direction artistique automatique. Elle ne sait pas si une pause est trop longue pour le récit, si une hiérarchie typographique est faible ou si un mouvement attire l’œil au mauvais endroit. Elle ne résout pas non plus les droits des images, les polices absentes, la qualité d’un son, la lisibilité sur mobile ou la compatibilité de chaque runtime web.
Elle ne rend pas non plus une équipe transmissible par magie. Si les fichiers sont nommés au hasard, si les dépendances sont implicites et si les critères de validation restent dans la tête d’une personne, la surface HTML ne fait que déplacer l’opacité. Le storyboard devient vivant, mais il peut rester incompréhensible.
Le risque inverse est de confondre contrôlabilité et qualité. Une frame parfaitement reproductible peut être une mauvaise frame. Avant d’ajouter une transition, il faut donc conserver la question éditoriale : qu’est-ce que le spectateur doit comprendre maintenant, et pourquoi ce changement est-il nécessaire ?
La maintenance mérite la même attention. Repérer la dette créative avant qu’elle ne devienne un coût de correction aide à poser la question qui manque souvent aux prototypes : qui pourra encore modifier cette scène dans six mois, avec quelles sources et quelle preuve ?
Méthodologie et limites
Ce guide s’appuie sur la documentation officielle HyperFrames consultée le 24 octobre 2026 : dépôt, modèle de composition, schéma HTML, vue développeur, guide de rendu et documentation CLI. Les formulations sur le storyboard vivant sont une interprétation éditoriale de ce contrat, pas une capacité commerciale revendiquée par HyperFrames.
Les capacités peuvent évoluer avec les versions de la CLI, du navigateur embarqué et des adapters. Avant une mise en production, relisez le schéma HTML et le guide de rendu correspondant à la version installée. Vérifiez aussi les licences, les polices, les médias et les conditions de diffusion de votre projet.
La vraie transmission commence après le rendu
Le vrai progrès n’est pas de produire plus vite. C’est de rendre la suite possible. La formation IA créative intensive aide à transformer un brief en méthode partageable : poser les choix, transmettre les gestes et laisser l’équipe reprendre la main.
Sources et références
- Dépôt officiel HyperFrames, consulté le 24 octobre 2026.
- Compositions HyperFrames, consulté le 24 octobre 2026.
- Schéma HTML de référence, consulté le 24 octobre 2026.
- Vue développeur, consultée le 24 octobre 2026.
- Guide officiel du rendu, consulté le 24 octobre 2026.
- Documentation officielle de la CLI, consultée le 24 octobre 2026.
- Cadra — The signal layer for creative workflows, Eugène Studio, consulté le 23 octobre 2026.
AUTEUR
Fondateur de CreativeAI.fr · Expert IA & workflows créatifs · 20+ ans d’expérience en direction créative (Marcel, Leo Burnett). 600+ professionnels formés depuis 2023 aux usages, méthodes et workflows IA. 4,7/5 de satisfaction moyenne.
Guides Pratiques & outils
Kling 4 Omni Reference : attribuer un rôle à chaque référence vidéo
Kling 4 Omni Reference devient utile quand une équipe cesse d’empiler des images et commence à déclarer ce que chacune doit contrôler. Le produit, le personnage, le décor, le mouvement, la caméra et la voix ne sont pas une seule matière de référence. Ils jouent des rôles différents.
Le comité IA qui ne vous épargnera rien
Vous avez une idée. Elle vous semble claire, pertinente, peut-être même brillante. C’est précisément le moment de la soumettre au CoDir. Le CoDir est un comité créatif composé de quatre agents IA spécialisés.
Claude Motion ou Claude Code : choisir sa chaîne de motion design
Claude Motion sert à tester et produire rapidement un artefact animé ; Claude Code sert à construire ou piloter un projet local ..
formationS IA
Google Flow, Veo & Gemini Omni : L’Orchestration Cinématographique IA
Durée : 2 jours (14h). Public : DA, réalisateurs, motion designers, équipes marketing, communication et social media
Réinventer son processus créatif avec l’IA générative
Durée : 5 jours (35h). Public : DA, graphistes, designers
Créer des visuels de marque avec ChatGPT Images et Codex NEW
Durée : 1 jour (7h). Public : directeurs artistiques, équipes marketing et communication, agences, studios et équipes de contenu
Claude Cowork & Skills : construire des assistants IA métier NEW
Durée : 2 jours (14h). Public : Responsables de production et dirigeants de structures créatives, équipes marketing, communication et contenu, agences et studios créatifs
Social Content Factory : produire et décliner ses contenus avec l’IA NEW
Durée : 2 jours (14h). Public : Responsables marketing et communication, Social media managers et content managers, Agences, studios et équipes éditoriales
IA agentique pour les créatifs : du brief à l’automatisation NEW
Durée : 1 jour (7h). Public : Responsables de production et dirigeants de structures créatives, équipes marketing, communication et contenu, agences et studios créatifs