Framefields : créer une vidéo avec du code TypeScript

Framefields permet de créer une vidéo avec du code TypeScript et de conserver une composition modifiable. Cette bibliothèque open source s’adresse aux développeurs et aux créateurs qui utilisent des agents de programmation. Elle réunit motion design, composition d’images, 3D et rendu dans un même projet.

En termes simples : à quoi sert ce site ?

Le site présente le moteur et sa documentation. Pour réaliser une courte démonstration, vous décrivez un titre, des éléments visuels et leurs mouvements dans le temps. Framefields calcule ensuite les images et le fichier vidéo. Un agent peut aider à écrire et corriger cette description. Il faut cependant installer un environnement de travail : la page d’accueil ne constitue pas à elle seule un service de génération vidéo hébergé.

Concevoir une séquence de motion design

Les textes vectoriels, animations par caractère et mises en page flexibles servent à composer des titres et des explications animées. Les couches d’images ou de vidéo peuvent recevoir étalonnage, flou, grain, LUT, masques et transitions. Des caméras, lumières, matériaux et modèles 3D importés complètent les éléments 2D.

Les graphiques de données et fichiers Lottie peuvent participer à la même composition. Côté son, le moteur propose pistes audio, effets procéduraux et signaux qui pilotent des propriétés visuelles. Cela convient à des démonstrations de produits et à des formats réutilisables, avec un véritable travail de choix des médias, de mise en scène et de vérification.

Passer du brief au fichier à livrer

1. Préparez Node.js 22 ou plus récent et un projet en modules ES avec le guide de démarrage. Respectez l’autorisation documentée du script de dépendance native.
2. Ajoutez éventuellement les compétences pour votre agent. Donnez-lui le texte, la durée, le cadrage, les médias et le résultat attendu.
3. Séparez thème, composition et script de rendu. Enregistrez de vrais fichiers de polices et récupérez les médias Git LFS avant tout calcul.
4. Vérifiez les types, ouvrez quelques images PNG, puis une planche de plusieurs images. Regardez l’aperçu local avec le son et annotez les corrections dans l’image.
5. Lancez l’export MP4 avec la QA activée, lisez ses résultats et visionnez le fichier final.

L’aperçu permet de parcourir la chronologie et d’avancer image par image. Le même constructeur de composition sert ainsi aux contrôles et à l’export.

Comprendre le rendu natif et la vision locale

WebGPU réalise le rendu natif sans chaîne de captures Chromium. Un backend graphique compatible reste nécessaire ; le rendu logiciel disponible dans certaines configurations est plus lent. Le produit étant en bêta, il est prudent de fixer la version et de tester une scène représentative. Un worker déployé par vos soins peut aussi traiter un projet Git et envoyer les sorties vers le stockage configuré.

La vision ONNX locale peut détecter, segmenter et suivre des sujets ou estimer une pose. Attention à withVision : cette méthode utilise l’image rendue précédente et n’a pas de résultat à l’image zéro. Pour vérifier ce cas, utilisez des images consécutives ou la vidéo exportée, plutôt qu’une planche de moments espacés. Consultez le guide de vision.

Coût du logiciel et circulation des données

Vérification du 21 octobre 2026 : le projet est sous licence Apache-2.0. Les services d’IA, le calcul, le stockage et les droits sur les médias sont distincts. Aucun tarif unique de rendu hébergé ni quota gratuit mensuel n’a été vérifié.

Les modèles de vision sont téléchargés au premier usage et mis en cache localement. Les compétences d’agent sont des instructions et n’envoient pas elles-mêmes de données. Cette propriété ne décrit pas les traitements du fournisseur de votre agent ni ceux d’un déploiement distant.

Questions fréquentes

Un agent peut-il écrire la vidéo ?

Oui, les compétences officielles guident l’écriture et la révision du TypeScript. Il faut tout de même préparer l’environnement, fournir les médias et contrôler le film.

Comment examiner le résultat avant livraison ?

Utilisez les images PNG, les planches de contrôle et l’aperçu avec le son. Vérifiez ensuite le MP4 exporté ; un code valide ne garantit pas une bonne lisibilité.

Open source signifie-t-il aucun coût ?

La bibliothèque ne couvre pas votre abonnement d’IA, votre machine, votre serveur ou les licences des médias. Consultez les conditions propres à chaque élément.

Documentation et communauté officielles

• Compétences pour agents : installation et étapes de création.
• Projet GitHub : sources, exemples et problèmes signalés.
• Discord officiel : échanges communautaires.
• Chaîne YouTube de Gatewai : films de référence.