Communitygithub.com

Hive-RSI-Lab/video

Crea un video demo, un reel destacado o un GIF de una app web, una terminal o una escena 3D, en código, suave y con fotogramas exactos. Úsalo cuando te pidan un video demo, un reel, un GIF de producto, o cuando una grabación de pantalla se vea entrecortada.

¿Qué es video?

Este skill permite crear videos demo, reels o GIFs de aplicaciones web, terminales o escenas 3D de forma programática, evitando las grabaciones de pantalla que son propensas a tirones y no reproducibles. En lugar de grabar, escribe un script (film.mjs) que la herramienta ejecuta sobre un reloj virtual, capturando un fotograma cada 1/30 de segundo de tiempo de página. Esto garantiza que cada animación, timer, desplazamiento o tecleo caiga en fotogramas exactos, produciendo un video suave y determinista que se puede regenerar tras cualquier cambio. El sistema soporta la creación de videos para web (MP4, H.264 con faststart) y GIFs limitados a un tamaño máximo, e incluye una etapa de validación visual mediante una hoja de contactos (sheet) y una verificación de tirones (stutters). También permite la renderización de tomas 3D con Blender y la grabación de sesiones de terminal con tmux/bash. El skill está diseñado para ser usado con el ecosistema Hive-RSI-Lab, integrando herramientas como `heavy` para limitar recursos y un kit de director que define el ritmo, movimientos de cámara y duración de los planos.

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

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

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

  1. video new DIR escribe un DIR/film.mjs inicial. 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.
  2. heavy timeout 1800 video render DIR/film.mjs OUT/ filma, codifica cada plano y une los planos en el MP4. La primera renderización ejecuta video check primero. Una renderización falla si aparece alguna palabra de la lista de denegados en la pantalla.
  3. 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.
  4. video stutters OUT/film.mp4 debe 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-B omite esos tramos.
  5. video mp4 IN OUT.mp4 crea el MP4 web (H.264, faststart). video gif IN OUT.gif --max 3 reduce el ancho desde 960 px hasta que el GIF quepa por debajo de 3 MB.
  6. 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 de Element.prototype.scrollTop para 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 hold de cada plano a esos tiempos, de modo que un plano termine justo después de lo que muestra.
  • zoom y unidades de viewport. El zoom: 1.5 del director filma un diseño de 1280x720 a 1920x1080. Chrome no divide vh/dvh/vw por el zoom raíz, así que el kit reescribe esas unidades en las hojas de estilo del mismo origen. Sin eso, un diseño calc(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 propio Date guardado, por lo que una página que envuelve Date (un desfase horario, un "ahora" falso) no puede hacer que pauseAt retroceda.
  • 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.

Skills relacionados