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
video new DIRécrit un scriptDIR/film.mjsde 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.heavy timeout 1800 video render DIR/film.mjs OUT/filme, encode chaque séquence et les assemble en MP4. Le premier rendu exécutevideo checkd'abord. Un rendu échoue si un mot de la liste d'exclusion apparaît à l'écran.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.video stutters OUT/film.mp4doit 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-Bignore ces plages.video mp4 IN OUT.mp4produit le MP4 web (H.264, faststart).video gif IN OUT.gif --max 3réduit la largeur à partir de 960 px jusqu'à ce que le GIF tienne sous 3 Mo.- 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 deElement.prototype.scrollToppour 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 derequestAnimationFramepeuvent 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é. zoomet unités de la fenêtre. Lezoom: 1.5du réalisateur filme une mise en page 1280x720 en 1920x1080. Chrome ne divise pas les unitésvh/dvh/vwpar 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 pagecalc(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érenceDatesauvegardée, donc une page qui enrobeDate(décalage temporel, faux "maintenant") ne peut pas faire reculerpauseAt. - 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.