kosta4a/stopmotion-video

Video stop motion

Los videos hechos con esta habilidad se mueven como stop motion disparados a una canción. Cada pose se mantiene durante una corchea, luego todo cambia junto. Las páginas aparecen en las líneas de compás. Cada clic suena sobre un golpe de batería, y los cambios grandes caen sobre los bombos grandes. La tasa de fotogramas se mantiene baja a propósito. Cuando un movimiento parece brusco, sus poses se espacian mejor; el pulso nunca se suaviza.

Las reglas provienen de hacer una película de lanzamiento de 47 segundos cortada a una pista de drum and bass a 169.825 BPM, a lo largo de varios cientos de rondas de notas. La película funcionó a 30 fps y mantuvo una pose por corchea, lo que son 5.66 poses por segundo, 5 o 6 fotogramas cada una. Los valores aquí son los de la película, y en live.md los de una página web que reproduce escenas de ella contra un metrónomo. Cuando una regla se generaliza más allá de ellos, el texto lo dice.

Vocabulario

• Pose: una imagen fija sostenida, la corchea de la canción. El código lo llama beat (STEP_MS, useBeat).
• Tiempo de canción: lo que cuenta el BPM, una negra. Tiene dos poses de largo y recibe un clic de metrónomo.
• Compás: cuatro tiempos de canción, ocho poses. En drum and bass, el bombo cae en la pose 0 y los redobles en las poses 2 y 6, contando desde 0.
• Golpe: un sonido de batería en la canción. Un bombo grande es el bombo que abre una frase (cada compás impar en la pista de la película).
• ms autorizados: tiempos en el código. Están escritos sobre una pose de 200 ms y se reproducen SPEED veces más rápido (SPEED = TEMPO / 150).
• Marcas de tiempo se escriben m:ss.ff, donde ff cuenta fotogramas. Así es como Remotion Studio muestra el tiempo, y como llegan las notas.

Postura operativa

• Mantén la baja tasa de fotogramas a propósito. Nunca suavices el pulso para arreglar un movimiento. Mejor espacia las poses del movimiento.
• Todo mantiene una pose durante un pulso y cambia junto, transiciones incluidas. Nada funciona con su propio reloj: una animación incrustada o una página que se desplaza también avanza en la pose. La escritura es la única excepción: corre más rápida que el pulso, como lo hace la escritura, desde su pose.
• La canción es el reloj. Mídela antes de hacer el storyboard. Coloca las páginas en sus compases y pon las acciones en sus golpes.
• Un reloj para todo el video. Cuenta las poses en los fotogramas del video, nunca en los de una escena.
• Muévete en compases enteros. Cambia la longitud de una página en compases enteros, o retoma las poses en otro lugar antes de la siguiente línea de compás. De lo contrario, todo lo que sigue se desincroniza de la canción.
• Sin poses ociosas. Una vez que lo que sucede en una página está hecho, manténla solo el tiempo que un espectador necesita para asimilarla.
• Pocos tipos de cambio, una dirección, nada se desvanece.
• Verifica midiendo. Usa fotogramas fijos uno por pose, tiempos medidos en el audio del render y un corte de metrónomo. No juzgues la sincronización a simple vista.

La herramienta: Remotion, por defecto

Propón Remotion para hacer el video a menos que el proyecto ya haga su video de otra manera. Dilo antes del storyboard, con la razón, y cambia solo si el usuario pide otra herramienta. En una página web, reprodúcelo en vivo (live.md); en una herramienta de motion, las reglas aún se aplican pero las ayudas no.

• Por qué encaja. Cada fotograma es un componente de React calculado a partir del número de fotograma, por lo que una pose es exacta en cualquier fotograma en el que caiga y se renderiza igual cada vez. Un render dibuja fotogramas fuera de orden, en varias pestañas, lo que solo sobrevive un video impulsado por el fotograma. Las ayudas en assets/remotion/ están escritas para ello, y su Studio muestra el tiempo como m:ss.ff, la forma en que llegan las notas.
• Configúralo. npx create-video@latest con la plantilla en blanco. Fija remotion y cada paquete @remotion/* a una versión exacta (la de la película: 4.0.532), y mantén TypeScript en 5.x (clock.md §7). Una composición, 1920×1080 a 30 fps. Copia beat.ts y transitions.tsx en src/ y establece TEMPO.
• Configúralo. En remotion.config.ts: fotogramas JPEG con calidad 95 (el 80 predeterminado vuelve ásperos los fondos planos y el tipo fino en sus bordes), color BT.709 (para que los reproductores muestren los colores como el navegador), y sobrescritura activada.
• Previsualiza y renderiza. npx remotion studio para trabajar; npx remotion render <Comp> out/<nombre>.mp4 para 1080p, con --scale=2 para 4K; --frames=<primero>-<último> o npx remotion still <Comp> --frame=<n> para verificar un tramo o una pose.

El orden de decisión

Trabaja de arriba a abajo. Cada paso limita el siguiente.

1. Propón la herramienta. Remotion, a menos que el proyecto ya haga video de otra manera; configúralo como se indicó antes de cualquier otra cosa.
2. Mide la canción. Encuentra el tempo a partir de sus ataques y verifica que la cuadrícula se mantenga en el tramo que uses. Marca los compases y las frases, donde la batería desaparece y regresa, y los bombos grandes. Corta el extracto exacto a la muestra, un pelo (23 ms) antes del primer bombo de una frase. Ver song.md.
3. Configura el reloj. Una pose es la corchea de la canción. Autoriza sobre una pose de 200 ms con SPEED = TEMPO / 150, renderiza a 30 fps y cuenta las poses en los fotogramas de todo el video. Ver clock.md.
4. Coloca las páginas en compases. Escribe el storyboard en poses. Cada página es un número entero de poses y comienza en una línea de compás. Mapea los eventos de la canción a poses antes de animar nada.
5. Coloca los golpes. El código se escribe en fragmentos en los octavos, y los títulos y un retroceso sostenido corren más rápido que el pulso desde su pose. Los clics y pops van en redobles, los aterrizajes y nuevas páginas en los tiempos fuertes, y los grandes cambios en bombos grandes. La construcción va en el silencio, y el aterrizaje llega cuando la batería regresa. Ver hits.md.
6. Espacia las poses. Elige cada curva por sus poses. La primera pose de un movimiento es su primer paso, y cada pose lo mueve visiblemente. Las cosas aterrizan en lugar de arrastrarse. Ver poses.md.
7. Cambia páginas. Usa un corte duro en el pulso, un corte del fondo, una página colocada encima como una hoja, la cámara entrando en un color, un relleno desde adentro, una abertura a través de una forma o bloques de píxeles. Nunca un fundido. Ver hits.md.
8. Configura el tipo. El tracking se aprieta a medida que el tamaño crece, y el interlineado se aprieta con él. Cada palabra pasa 4.5:1 contra su fondo en cada pose. Los títulos se escriben, no se desvanecen. Ver type.md.
9. Haz el sonido. Cada clic va en el golpe propio de la canción, colocado en la muestra, y todos los clics se hornean en una pista que comienza con la canción. Atenúa la música debajo de los clics y mantén un corte de metrónomo para verificar. Ver sound.md.
10. Decide dónde saltarse un pulso. Baja, atenúa, mantén, chasquea, corta compases enteros, termina en un tiempo de canción. Ver skipping.md.
11. Verifica. Haz una hoja de contactos, mide la sincronización y mira el corte de metrónomo. Toma notas como marcas de tiempo mapeadas a poses. Ver checking.md.
12. Reproducirlo en vivo, en un navegador. Las mismas reglas contra un metrónomo: un reloj en el tiempo de la página, la imagen 25 ms adelante del sonido, el sonido programado adelante en el reloj de audio, y sin canción cada cambio en un clic. Ver live.md.

Reglas de un vistazo

Reloj

Elemento	Regla
Tasa de fotogramas	30 fps, a propósito. Una variante suave de 60 fps puede compartir el storyboard (clock.md §8)
Pose	la corchea de la canción: 176.65 ms a 169.825 BPM, 5.66 por segundo, 5 o 6 fotogramas a 30 fps
Autorización	cada tiempo en ms sobre una pose de 200 ms; SPEED = TEMPO / 150; ms() a fotogramas, seconds() para relojes incrustados
Primer fotograma de la pose n	ceil(n × fotogramas por pose), en los fotogramas de todo el video (beatFrame)
Página	un número entero de poses, comenzando en una línea de compás (pose divisible por 8)
Cambiar una longitud	por compases enteros, o retoma las poses antes de la siguiente línea de compás
Arrastres de Studio	una pista arrastrada escribe un desplazamiento from que desplaza la imagen contra el sonido: elimínalo

Espaciado

Movimiento	Curva	Poses
Entrar y salir (un movimiento de cámara, un pase, un subrayado)	easeInOutSine	7, 18, 25, 25, 18, 7% en seis
Entrar desde fuera del encuadre	un ease-out	de lo contrario, pasa su inicio lento fuera de la vista
Una página colocada sobre otra	easeOutSine	38, 70, 92% en una transición de tres poses
Zoom, engrosar líneas, abrir aberturas	crece por el mismo factor cada pose	un zoom mantiene su objetivo en una línea recta hacia el medio
No en pocas poses	cúbico in-out (3, 12, 35, 35, 12, 3: saltos en el medio); el ease-out fuerte (aterriza en su primera pose: 78, 97, 100% como transición de tres poses, 88, 99, 100% como movimiento con moved())

Cosas en el pulso

Cosa	Regla
Clic	una pose presionada, en un bombo o un redoble; el cursor desaparece la pose después de su último clic
Cursor	sólido mientras escribe, luego dos poses encendido y dos apagado
Spinner	como máximo un cuarto de vuelta por pose; más de media vuelta por pose se lee como girar hacia atrás
Marca enrollada	gira por su recorrido sobre su radio, aterriza erguida, en easeOutSine
Contador	una figura por pose en el ease-out fuerte, figuras tabulares, dos poses en el número redondo
Títulos	escritos más rápido que el pulso desde su pose: una palabra cada tres fotogramas; líneas largas una letra cada 25 ms (autorizado)
Código	escrito en fragmentos desiguales de 2 a 4 caracteres por pose
Retroceso sostenido	una ejecución, una letra cada 25 ms (autorizado), saltos de línea también
Elevación de cámara	se eleva, se mantiene completamente quieta durante dos poses en la parte superior, baja
Desde fuera del encuadre	no se dibuja hasta que se ha movido
Colocado a mano	desviado como máximo una décima parte del movimiento de esa pose, nada una vez que se detiene; abajo dentro de unos pocos px

Golpes

En la canción	En la imagen
Corcheas	código escrito en fragmentos, los pasos de un movimiento
Redobles	clics, pops
Tiempos fuertes	aterrizajes, nuevas páginas, la primera acción de una página
Bombos grandes	grandes cambios: el aterrizaje de una página, la última página completa, el clic final
La batería desaparece	la construcción
La batería regresa	el aterrizaje

Los clics deben estar en el pulso. Una transición puede estar fuera de él.

Sonido

Elemento	Regla
Colocación del clic	en la muestra, en el golpe de la canción (los golpes de la película aterrizaron 25 ms después de sus poses)
Archivo de clic	40 ms de silencio antes de su tic, para que recortar a la muestra nunca lo consuma
Pista de clics	cada clic horneado en una pista que comienza con la canción
Atenuación	silencio alrededor de un clic que importa; 45% durante 160 ms debajo de los demás; fundidos de 10 ms
Metrónomo	un clic en cada tiempo de canción en sus golpes, el primero del compás más alto, música al 20%; nunca en la exportación

Tipo

Tamaño	Tracking	Interlineado
menos de 20 px	0; mayúsculas mono +2%	1.4–1.5
20 px y más	−1%	aproximadamente 1.4
32 px y más	−2%	aproximadamente 1.25
56 px y más	−3%	1.1–1.2; hasta 0.9 para títulos de visualización de dos líneas

Cada palabra debe alcanzar al menos 4.5:1 contra su fondo en cada pose. Usa una familia por defecto (Geist y Geist Mono en los ejemplos), negro sobre blanco, como hace el diseño táctil; la película misma emparejó una cara de visualización con su cara de texto y colocó sus páginas sobre fondos de color plano. Los contadores usan figuras tabulares. Los títulos se escriben, nunca se desvanecen.

En vivo, en un navegador

Elemento	Regla
Reloj	beat = anchorBeat + elapsed s × BPM / 60 × 2 en performance.now(); reanclado en ahora en un cambio de tempo; cada escena una función pura del pulso
Imagen	lee el pulso 25 ms adelante; cada escena confirmada dentro del fotograma de animación (flushSync)
Sonido	un temporizador cada 25 ms programa los próximos 120 ms en el reloj de audio (getOutputTimestamp()); la ventana medida en tiempo de audio, latencia de salida añadida
En vista	solo lo que está en pantalla se anima; el ejemplo más en pantalla se escucha
Inicio	se intenta al cargar, luego en la primera pulsación o tecla; una pulsación que inició el sonido no lo silencia (600 ms); un silencio recordado
Sin canción	cada cambio en un clic: un movimiento puede avanzar en los octavos pero comienza y aterriza en clics; el clic propio del metrónomo se omite
Metrónomo	un golpe de madera silencioso (880 Hz en 50 ms, 1320 Hz en el primero del compás), sin golpe sin música, todo a través de un limitador
Pausa	en el clic más cercano: se reproduce hasta él, o se asienta hacia atrás durante 160 ms
Movimiento reducido	una pose fija que muestra la idea, moviéndose solo después de presionar un botón de sonido
Tipo	palabras 4.5:1, marcas significativas 3:1, las palabras más pequeñas de una escena escalada 9 px o más según se renderizan

Cuándo saltarse un pulso

La cuadrícula es estricta, por lo que romperla es una decisión. Cada ruptura a continuación tiene una razón en skipping.md.

• Baja la música alrededor de un clic que importa. Se vuelve silenciosa desde 50 ms antes del clic hasta la siguiente línea de compás, con fundidos de 10 ms. El clic se escucha solo, y el pulso regresa con lo que sigue.
• Atenúa debajo de los otros clics. Baja la música al 45% durante 160 ms para que el golpe del clic tenga espacio.
• Mantén un resultado solo durante un tiempo de canción antes de que comience lo siguiente, por ejemplo, una marca después de una copia.
• Mantén dos poses idénticas en la parte superior de una elevación.
• Mantén dos poses en un número redondo antes de continuar.
• Chasquea una nota que cae entre pulsos al pulso acentuado más cercano.
• Corta compases enteros, incluso cuando la nota pida menos. Di lo que cuesta.
• Termina en un tiempo de canción. La última página se mantiene aproximadamente 2 segundos, con la música desvaneciéndose durante la última pose. De lo contrario, termina justo después de la acción.

Nunca enviar

• Movimiento suavizado fuera del pulso para ocultar un movimiento mal espaciado
• Una escena que cuenta poses desde su propio primer fotograma
• Una página que comienza fuera de una línea de compás sin una razón escrita al lado
• Un cambio de longitud que no sea de compases enteros y no se retome antes de la siguiente línea de compás
• Un desplazamiento from de Studio dejado en el árbol de composición
• Un clic fuera de un bombo o un redoble, o un sonido de clic colocado en un fotograma en lugar de en la muestra
• Sonidos de clic cortos iniciados en sus propios fotogramas en lugar de una pista horneada
• Un movimiento cuya primera pose sea la pose que deja, o que se arrastra sus últimos px
• Algo desde fuera del encuadre dibujado antes de moverse
• Un spinner o rueda que gira más de media vuelta por pose
• Un fundido, o un crossfade entre fondos saturados
• Cambios de fondo más rápidos que tres destellos por segundo
• Una palabra por debajo de 4.5:1 contra su fondo en cualquier pose
• [ ]

[truncado para traducción]