Cómo hacer un video
No grabes la pantalla. Una grabación se entrecorta cada vez que la caja está ocupada, y nadie puede volver a ejecutarla tras una corrección. Escribe la película como un script en su lugar. El kit ejecuta la página sobre un reloj virtual y toma un fotograma cada 1/30 s de tiempo de página, así que cada animación, temporizador, desplazamiento y tecla presionada cae en fotogramas exactos. Los movimientos de cámara, el cursor y los anillos de clic se dibujan sobre los fotogramas después. El mismo script siempre produce la misma película.
El ciclo
video new DIRescribe unDIR/film.mjsinicial. Apúntalo a un servidor desechable con datos ficticios, nunca a una cuenta real. Escribe de tres a cinco planos, cada uno con una idea.heavy timeout 1800 video render DIR/film.mjs OUT/filma, codifica cada plano y une los planos en el MP4. La primera renderización ejecutavideo checkprimero. Una renderización falla si aparece alguna palabra de la lista de denegados en la pantalla.video sheet OUT/film.mp4 OUT/sheet.png 16, luego mira la hoja. La mayoría de los errores solo se ven aquí: una lista que nunca se desplazó, un panel vacío, la cámara apuntando a lo incorrecto.video stutters OUT/film.mp4debe reportar 0 tirones. Los tirones son movimientos rápidos o bruscos. Un tirón está bien donde el contenido debe cortarse (un cambio de página, la llegada de un mensaje);--allow A-Bomite esos tramos.video mp4 IN OUT.mp4crea el MP4 web (H.264, faststart).video gif IN OUT.gif --max 3reduce el ancho desde 960 px hasta que el GIF quepa por debajo de 3 MB.- Itera sobre los tiempos en el script, nunca recortando el video.
El ritmo y la API completa del director están en kit/KIT.md; léelo antes de tu primera película. En resumen: unos 20 s en total; que la cosa funcione en 2 s; un movimiento de cámara por plano (1.5-2x, 0.4-0.7 s); mantén un resultado al menos 0.8 s (d.show); escribe a unas 30 teclas por segundo.
Qué lo hace suave (aprendido por las malas)
- Pon los retoques exclusivos del video en un script de inicio, no en la aplicación. Haz que los nuevos elementos aparezcan con una transición suave (
animation: in .4s cubic-bezier(.16,1,.3,1)desde opacidad 0 y translateY 12px) en lugar de aparecer de golpe. Para una lista que salta al final, envuelve el asignador deElement.prototype.scrollToppara que se deslice hasta allí en unos 500 ms. La película demo hive-stars es un ejemplo práctico de ambos. - Controla tu propio movimiento con
setTimeout. El reloj de la película ejecuta los temporizadores exactamente. Las devoluciones de llamada de requestAnimationFrame pueden no dispararse mientras el reloj está pausado. - Sincroniza con la línea de tiempo de la página. Si la aplicación depende de temporizadores (respuestas predefinidas a los 0.7 s, 1.8 s, etc.), ajusta la
holdde cada plano a esos tiempos, de modo que un plano termine justo después de lo que muestra. zoomy unidades de viewport. Elzoom: 1.5del director filma un diseño de 1280x720 a 1920x1080. Chrome no dividevh/dvh/vwpor el zoom raíz, así que el kit reescribe esas unidades en las hojas de estilo del mismo origen. Sin eso, un diseñocalc(100dvh - x)es 1.5x más alto y su desplazador nunca se desplaza. El CSS de origen cruzado no se reescribe, así que sirve la página tú mismo.- Aplicaciones que modifican
Date. El kit lee el reloj a través de su propioDateguardado, por lo que una página que envuelveDate(un desfase horario, un "ahora" falso) no puede hacer quepauseAtretroceda. - La lista de denegados: nombre del host, usuario, nombre de git y correo electrónico, nombres reales de proyectos. Solo datos ficticios.
Tomas 3D (Blender)
video blender SHOT.py OUT/ [--quality preview|final] renderiza un script de toma en la CPU. Ejecútalo bajo tu limitador de trabajos (heavy en H2), y ejecuta --quality preview primero, porque una renderización final tarda minutos por segundo de película. Los ayudantes (interpolación, cámara con profundidad de campo, montaje de luces, un PCB desde KiCad, extrusión GDS, un plano de interfaz de usuario, grafos de nodos) están en kit/blender/README.md. Codifica los fotogramas con el encodeFrames del kit o con ffmpeg, luego córtalos con stitch.
Terminales
kit/term.mjs graba una sesión real de tmux/bash en un entorno aislado con un home y host ficticios, luego la reproduce con xterm.js sobre el reloj de la película. Consulta kit/KIT.md.