Des titres animésqui vivent dans la timeline.

Une composition, c'est quoi

HyperFrames est un moteur libre qui transforme une page HTML animée en vidéo, image par image. Une composition, c'est un dossier avec un fichier index.html : la racine porte la taille, la cadence et la durée ; chaque élément dans le temps (un titre, une image, un plan, un son, une sous-composition) porte un début, une durée et une piste. Les animations sont des timelines GSAP, ou du CSS. C'est déjà un modèle de timeline, écrit en HTML, et c'est ce qui rend le miroir possible.

Dans KoraCut, une composition existe sous trois formes tenues d'accord : le HTML dans le dossier du projet (motion/<nom>/index.html, la source de vérité, ce que les agents lisent et écrivent), les clips dans ta timeline, et l'image rendue en fond transparent, mise en cache, que le moniteur compose au-dessus de tes plans comme n'importe quel média.

Le panneau Motion

Il est dans le bloc Médias du Montage (⌘⌥M, ou menu Séquence). « Nouvelle composition » part d'un gabarit vide aux dimensions et à la cadence du projet, ou importe un dossier HyperFrames, ou un seul fichier .html : tout ce qu'il cite en local (scripts, feuilles de style, médias, polices) vient avec lui. Le panneau liste les compositions du projet, leurs éléments (nom, sorte, début, durée, état du rendu), et propose « Rendre tout » et « Ouvrir dans Studio ».

Ses éléments dans la timeline

Chaque élément visuel de la composition devient un clip violet sur une piste « Motion · nom », posée au-dessus de tes pistes vidéo (une piste par index de piste de la composition). Les sons vont sur une piste audio « Motion · nom · son ». Ce sont des clips ordinaires : les outils habituels, l'annulation, l'export marchent sans rien de neuf.

Tu pousses ou rognes un clip

KoraCut réécrit le début et la durée de l'élément dans le HTML. L'image ne change pas, donc pas de nouveau rendu : l'animation d'un élément est relative à son propre début.

Tu changes le texte d'un titre

Double-clic sur le clip : l'inspecteur s'ouvre sur le champ texte. Entrée applique. Seul cet élément est rendu de nouveau, en arrière-plan ; l'ancien reste affiché en attendant.

Tu déplaces un son

C'est un clip audio normal, le fichier est le même : le HTML suit.

Le HTML change ailleurs

Dans l'onglet Code, dans Studio, ou par un agent : KoraCut relit le fichier, ajoute, retire ou retime les clips, et ne rend de nouveau que ce qui a changé.

Ce que la timeline montre d'un élément : sa place, sa durée, son nom, sa vignette, et la forme d'onde pour un son. Ce qu'elle ne montre pas : les images clés GSAP. Elles restent dans le HTML et dans Studio. Chaque geste est une étape d'annulation.

Le Code et Studio

L'onglet Code du panneau Motion est un éditeur du HTML : coloration, numéros de ligne, enregistrement 800 ms après la dernière frappe ou ⌘S. À chaque enregistrement, HyperFrames vérifie le fichier et ses messages s'affichent sous l'éditeur, un clic met le curseur à la ligne. Un enregistrement passe par le même chemin qu'une modification extérieure : la timeline suit.

« Ouvrir dans Studio » lance l'éditeur visuel de HyperFrames dans ton navigateur, sur les mêmes fichiers : canvas, calques, timeline à pistes, images clés (touche K), inspecteur, sous-titres, audio. Tu fermes l'onglet, tu reviens dans KoraCut, le miroir s'est mis à jour. L'inspecteur d'un clip Motion a aussi un bouton « Modifier l'animation dans Studio ».

Ce que ça demande

KoraCut n'embarque ni Node ni Chrome : le téléchargement resterait léger et un seul Chrome sert à tous les projets. Il te faut Node (version 22 ou plus) sur la machine. Le reste, KoraCut le fait : HyperFrames s'installe à la demande dans le dossier de données de l'application, dans une version figée (une action « Mettre à jour HyperFrames » la change), et HyperFrames télécharge son Chrome sans fenêtre au premier rendu (150 Mo, une fois).

Sans Node, le panneau Motion l'explique et donne le lien ; rien d'autre dans KoraCut n'en dépend. Le rendu tourne en arrière-plan, dans la même file que les proxys, et passe en mode mémoire réduite sur une machine modeste. Le cache est en ProRes 4444 (transparence comprise) dans le dossier cache du projet : lourd sur le disque, léger à lire, et c'est la lecture qui compte pour la fluidité.

Piloter KoraCut depuis un terminal ou un agentLes agents nommés