Communitygithub.com

Hive-RSI-Lab/vidéo

Réalisez une vidéo de démonstration, un highlight reel ou un GIF d'une application web, d'un terminal ou d'une scène 3D, de manière fluide et image par image, directement depuis le code.

Qu'est-ce que vidéo ?

Ce skill permet de produire des vidéos de démonstration, des highlight reels ou des GIFs professionnels sans jamais enregistrer l'écran. Il fonctionne en écrivant un script de film qui pilote un navigateur sur une horloge virtuelle, capturant une image toutes les 1/30 de seconde. Cela garantit que chaque animation, timer, défilement et frappe clavier tombe sur une image exacte, évitant les saccades des enregistrements traditionnels. Le rendu final assemble les séquences en une vidéo MP4 ou un GIF optimisé, et un outil de vérification détecte les anomalies visuelles (stutters, mots interdits). Le kit supporte également les scènes 3D via Blender et l'enregistrement de sessions terminal via tmux, le tout rejoué de manière synchrone. Il est particulièrement adapté aux développeurs qui doivent créer des démos reproductibles et nettes pour leurs outils, produits ou présentations techniques. Compatible avec les environnements Hive et les jobs lourds via `heavy`.

Compatible avec~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/Hive-RSI-Lab/hive-video/tree/HEAD

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Faire une vidéo

N'enregistrez pas l'écran. Un enregistrement saccade dès que la machine est occupée, et personne ne peut le rejouer après une correction. Écrivez plutôt le film comme un script. Le kit exécute la page sur une horloge virtuelle et capture une image par 1/30 s de temps de page, de sorte que chaque animation, timer, défilement et frappe tombe sur une image exacte. Les mouvements de caméra, le curseur et les anneaux de clic sont dessinés par-dessus les images après coup. Le même script produit toujours le même film.

La boucle

  1. video new DIR écrit un script DIR/film.mjs de départ. Pointez-le vers un serveur jetable avec des données fictives, jamais vers un compte réel. Écrivez trois à cinq séquences avec une idée chacune.
  2. heavy timeout 1800 video render DIR/film.mjs OUT/ filme, encode chaque séquence et les assemble en MP4. Le premier rendu exécute video check d'abord. Un rendu échoue si un mot de la liste d'exclusion apparaît à l'écran.
  3. video sheet OUT/film.mp4 OUT/sheet.png 16, puis regardez la planche. La plupart des bugs n'apparaissent qu'ici : une liste qui ne défile jamais, un panneau vide, la caméra sur le mauvais élément.
  4. video stutters OUT/film.mp4 doit signaler 0 saccades. Les saccades sont des mouvements rapides ou soudains. Une saccade est acceptable là où le contenu change brusquement (changement de page, arrivée d'un message) ; --allow A-B ignore ces plages.
  5. video mp4 IN OUT.mp4 produit le MP4 web (H.264, faststart). video gif IN OUT.gif --max 3 réduit la largeur à partir de 960 px jusqu'à ce que le GIF tienne sous 3 Mo.
  6. Itérez sur les timings dans le script, jamais en rognant la vidéo.

Le rythme et l'API complète du réalisateur sont dans kit/KIT.md ; lisez-le avant votre premier film. En résumé : environ 20 s au total ; la fonctionnalité visible en 2 s ; un mouvement de caméra par séquence (1,5-2x, 0,4-0,7 s) ; maintenir un résultat au moins 0,8 s (d.show) ; taper à environ 30 touches par seconde.

Ce qui rend le film fluide (appris à la dure)

  • Mettez le polissage propre au film dans un script d'initialisation, pas dans l'application. Faites apparaître les nouveaux éléments en douceur (animation: in .4s cubic-bezier(.16,1,.3,1) depuis opacity 0 et translateY 12px) plutôt que brutalement. Pour une liste qui saute à la fin, enrobez le setter de Element.prototype.scrollTop pour qu'il glisse jusqu'à la fin en environ 500 ms. Le film de démo hive-stars en est un exemple travaillé.
  • Pilotez votre propre mouvement avec setTimeout. L'horloge du film exécute les minuteries exactement. Les callbacks de requestAnimationFrame peuvent ne pas se déclencher lorsque l'horloge est en pause.
  • Consultez la frise temporelle de la page. Si l'application repose sur des minuteries (réponses pré-enregistrées à 0,7 s, 1,8 s, etc.), ajustez la durée d'affichage (hold) de chaque séquence pour qu'elle se termine juste après l'élément montré.
  • zoom et unités de la fenêtre. Le zoom: 1.5 du réalisateur filme une mise en page 1280x720 en 1920x1080. Chrome ne divise pas les unités vh/dvh/vw par le zoom racine, donc le kit réécrit ces unités dans les feuilles de style de même origine. Sans cela, une mise en page calc(100dvh - x) est 1,5x trop haute et son défileur ne défile jamais. Les CSS d'origine croisée ne sont pas réécrites, servez donc la page vous-même.
  • Applications qui modifient Date. Le kit lit l'horloge via sa propre référence Date sauvegardée, donc une page qui enrobe Date (décalage temporel, faux "maintenant") ne peut pas faire reculer pauseAt.
  • La liste d'exclusion : nom d'hôte, nom d'utilisateur, nom git et email, vrais noms de projet. Données fictives uniquement.

Plans 3D (Blender)

video blender SHOT.py OUT/ [--quality preview|final] rend un script de plan sur le CPU. Exécutez-le sous votre limiteur de tâches (heavy sur H2) et utilisez d'abord --quality preview, car un rendu final prend des minutes par seconde de film. Les aides (easing, caméra avec profondeur de champ, éclairage, un PCB depuis KiCad, extrusion GDS, un plan UI, graphes de nœuds) sont dans kit/blender/README.md. Encodez les images avec encodeFrames du kit ou ffmpeg, puis insérez-les avec stitch.

Terminaux

kit/term.mjs enregistre une session tmux/bash réelle dans un bac à sable avec un home et un hôte fictifs, puis la rejoue avec xterm.js sur l'horloge du film. Voir kit/KIT.md.

Skills associés