bobobo2026/longtake

¿Qué hace longtake?

Basado en onetake por Patrick, modificado para plataformas de vídeo corto vertical (9:16). Qué cambió y por qué: CHANGES.md. Método vertical: references/vertical.md.

Películas cortas de movimiento sobre un producto, construidas a partir del producto. No un editor de vídeo, no un generador de presentaciones: una composición (un archivo HTML, window.__seek(t)), una biblioteca de movimientos (lib/motion.js), material grabado de la cosa real, una paleta sonora que comparte un mismo espacio, y un oráculo que dice si el corte tiene ritmo y si fluye, antes de que un humano tenga que verlo.

Seis películas lo enseñaron. motion-web necesitó tres cortes: el primero y el segundo fueron rechazados por ser「PPT 式一个一个展示」debido a una cadencia uniforme — la mitad del ritmo. Pocket Weather Club tenía el ritmo y aun así era PPT: su v1 pasó todas las comprobaciones de ritmo y fue rechazada, porque cada latido reemplazaba al anterior. La v3 fue aceptada cuando cada latido crecía del anterior — el personaje aterriza en el titular, la página crece desde su tarjeta, un escenario se abre desde el personaje. Esa es la mitad de la continuidad. One dot añadió el operador: con una cámara fija era「就缺灵动的跟踪运镜」; con una cámara que persigue lo que cada latido encuadra — rezagándose, inclinándose, estabilizándose — fue「运镜、镜头和物理都没问题」. knockon fluyó por causa: una máquina de sobremesa ligera donde cada latido es la colisión que inicia el siguiente. clearing fluyó por escala: una sola toma desde un año hasta media hora libre y de vuelta, una cámara que persigue el ancla en pantalla para que aterrice igual a 1× y 300×. overlap fue la lección de significado: su primer corte fue「美术挺棒但没看出来啥意思」, y añadir cursores etiquetados lo empeoró; solo se entendió una vez que la idea se construyó en la obra — un & oculto en dos placas de ruido que aparece en el instante en que los pases entran en registro. Todo aquí existe para que la próxima película comience donde esas terminaron.

Lo que el protocolo no puede darte (léelo primero)

Las reglas siguientes son en su mayoría rechazos escritos: mantienen una película lejos de ser una presentación. Son un suelo. Una película puede pasar todas las reglas y cada pata del oráculo y aun así estar muerta — W1 (un promocional vertical, 2026-11) lo hizo: continuidad 1.00, VEREDICTO PASA, y el veredicto fue「很死板，没到参考片的 70%」. Lo que le faltaba es lo que las películas aceptadas tenían:

• Material que merezca la pena ver en cada latido. El film de lanzamiento de onetake (la referencia habitual) es v8: tres prompts, cada uno convirtiéndose en un mini-film diseñado completo en su propia paleta y lenguaje de movimiento. El espectador ve trabajo, no etiquetas sobre trabajo. Pregunta primero: ¿cuál es la cosa más bella que poseemos (material, películas terminadas, UI real)? Construye la película a partir de eso, a pantalla completa. Un concepto que explica un proceso con tarjetas y chips es un diagrama, y un diagrama bien movido sigue siendo un diagrama.
• Un reloj. Cada caso sólido corta sobre una cuadrícula musical — envía en tiempos fuertes, el tramo más rápido en el drop, una parada en un tiempo silencioso. Sin narración, la música es la línea de tiempo, no decoración. Sincronizar los latidos por "tiempo suficiente para leer" da un ritmo uniforme que se lee como rígido. Si el proyecto del usuario prohíbe la música, di qué cuesta y pregunta.
• Un arco. La densidad y la velocidad se construyen hacia un pico, luego se liberan. Cinco estaciones iguales es una lista.
• El cambio como contenido. En la referencia, la cosa misma se transforma (una ventana se reconfigura en un teléfono, una barra se abre en una película). El movimiento que solo viaja entre latidos estáticos son transiciones alrededor de diapositivas.
• Rondas de revisión. La referencia necesitó ocho cortes revisados. Muestra imágenes fijas del gancho y el pico antes del primer render y un borrador antes de pulir; nunca presentes un pase no revisado como final.

Cuándo usar este skill y cuándo no

• Un clip de lanzamiento / avance / introducción para una app, una página, un skill, una función — sí.
• Una demo de función narrada (30–60 s) que muestra el producto siendo usado, posiblemente en varios idiomas — sí: reconstruye la UI en lugar de grabarla (§4, references/product-demo.md).
• El usuario tiene un clip de referencia cuyo estilo quiere — sí, empieza en §1.
• Formato largo, cabezas parlantes, edición de metraje existente con transiciones — no.
• El usuario menciona HyperFrames o Remotion explícitamente — usa lo que mencionen. De lo contrario, este pipeline.

El protocolo — en este orden, sin saltos

1 · Deconstruye la referencia antes de tocar nada (硬规则)

python3 scripts/analyze_ref.py ref.mp4 --out ana/     # mapa de energía, cortes, quietud, hojas de contacto, línea de movimiento

Lee el mapa de energía y las hojas y anota los números que la película debe igualar. El mapa de energía dice cuándo se mueve la película; la línea motion: dice cómo — mediana t80 (snaps o curvas S) y smear (renderizado con desenfoque de movimiento o no). Lo que decidió la película motion-web: la referencia estaba 34 % completamente quieta, tenía 7 cortes duros en dos ráfagas, y mantenía cada elemento pequeño con mucho espacio en blanco. Nada de eso es obvio al verlo una vez, y una película construida sin medirlo salió con una cadencia uniforme — dos veces. references/reference-deconstruction.md.

Los números de la referencia están por encima de las reglas del género abajo. "Elementos pequeños, fondo grande" y "quieto un tercio del tiempo" se midieron a partir de motion-web. El film de lanzamiento de onetake es ~10 % quieto y mayormente a pantalla completa; W1 siguió las reglas del género contra él (quieto 0.50, fondo vacío) y salió vacío y lento. Anota el porcentaje de quietud, cuánto del encuadre está lleno, el número de cortes y dónde está el tramo más denso, e iguala esos. También anota de qué están hechos los latidos de la referencia (¿piezas diseñadas terminadas? ¿UI real? ¿tipografía?) y si corta con música — eso es la entrada de §2.

2 · Concepto — tres ideas centrales antes de cualquier guion de latidos (硬规则)

Un concepto es una frase sobre la imagen, no sobre el producto: la única idea de la que está hecha la película. Escribe tres que difieran en esa idea — no tres historias contadas con las mismas tarjetas:

• un elemento se transforma a través de todo — un punto es el cursor, se divide en la lista de skills, se ahueca en un anillo de carga, se despliega en una curva de muelle, aterriza como el punto sobre la i de la marca;
• un movimiento de cámara a través de la escala — comienza dentro del cursor, se aleja hasta el input, se sumerge a través del botón de enviar hacia el trabajo, sale a través de la película terminada (cases/clearing-15s: un año → un día → media hora → de vuelta);
• una división antes/después — los mismos latidos como una presentación a la izquierda y fluyendo a la derecha, hasta que el lado derecho irrumpe en el izquierdo;
• una reacción en cadena — cada latido es la colisión que inicia el siguiente (cases/knockon-15s);
• o una metáfora física, una superficie continua, un sistema tipográfico…

Para cada uno: el encuadre gancho, lo que transporta cada límite, lo que descarta (¿sin tarjetas? ¿sin cortes?), y su aspecto — un preset de looks/ (python3 scripts/look.py sheet → gallery/sheets/looks.png: paper, dusk, tabletop, ultramarine, riso, ember, cada uno medido de una película aceptada), los colores propios del producto (look.py from-shot shots/*.png --out look.json), o uno hecho para esta película. Muestra los tres y deja que el usuario elija. La historia de la plantilla — palabras cinéticas → prompt escrito → lista de verificación tictac → resultado → golpes staccato → marca negra — es un concepto, nunca el predeterminado: una demo de operación construida sobre ella pasó cada pata del oráculo (continuidad 1.00) y fue devuelta como「和 motion web 很像…没有创造力」. Lo mismo aplica para los ejemplos en la lista anterior y para cada caso: elegir "one dot" porque es el primer ejemplo es copiar, no un concepto (W1 lo hizo, y se leyó como un diagrama). Prueba cada concepto con dos preguntas: ¿qué está viendo el espectador en el segundo más ocupado? (debe ser algo hermoso, no una etiqueta) y ¿en qué se convierte la cosa misma?

Las películas verticales (9:16) no son películas horizontales rotadas: el encuadre es una columna alta, así que llénalo de arriba a abajo, deja que el material se salga por los bordes, y mantén las zonas seguras de la plataforma (los subtítulos y botones cubren el ~20 % inferior y el borde derecho). stills.py --width 1080 --height 1920 mantiene la relación de aspecto en su hoja. El método, con la inmersión en portal anidado y sus números: references/vertical.md, caso cases/huazhong-dongtian-22s/.

3 · Guion gráfico como ritmo y continuidad

Escribe el concepto elegido como un guion de latidos: t · latido · qué se mueve · qué está quieto · qué fluye al siguiente latido.

Ritmo. Varía la duración del plano en ≥ 4× (palabras de 0.25 s junto a pausas de 2.5 s). Al menos un tramo de casi silencio en imagen y sonido. Una historia — la del concepto — no un catálogo. El tamaño del elemento y el fondo siguen la referencia (§1).

Arco y reloj. Elige la música antes del guion de latidos, encuentra sus tiempos fuertes, sus silencios y su drop (scripts/beat_grid.py), y escribe cada t en el guion como un latido de esa pista. El pico de la imagen se sitúa en el drop.

Continuidad. En cada límite de sección, nombra la cosa que sobrevive y se mueve: la mano, el sujeto, un contenedor que se convierte en la siguiente escena (morphRect), un escenario que se abre desde el sujeto (iris), una cámara que empuja hacia una tarjeta hasta que es la escena (zoomThrough), un reparto que se pliega en el bloqueo (gather → seal). Si nada sobrevive, es un cambio de diapositiva, sea cual sea el ritmo. Los cortes desnudos pertenecen a ráfagas de golpes y la tarjeta final, cuando el concepto los tiene. references/rhythm.md.

4 · Material de la cosa real — o la UI reconstruida a partir de capturas de pantalla

python3 scripts/record_footage.py footage.json --out footage/

Páginas reales, manejadas en tiempo real por Playwright (barridos a ritmo de reloj de pared, pasos de rueda, clics), grabadas al tamaño en que las mostrarás, con un marcador magenta inyectado en el instante en que comienza la entrada para que el encuadre de acción sea localizable después. Los fotogramas salen a 30 fps como JPEG; la ruta del puntero se guarda para que la composición pueda dibujar la mano de vuelta — el espectador debe ver la causa, no solo el efecto. Formato de configuración en el docstring del script.

O reconstruirla. Cuando la película recorre las funciones de una app (y sobre todo cuando tiene voz u otros idiomas), el usuario solo hace capturas de pantalla o graba tomas de referencia, y la UI se reconstruye en HTML en el propio encuadre de píxeles de la referencia. Cada cadena vive en una tabla, cada estado es escrito por un set(state) puro, y la réplica se sitúa en el plano donde la cámara puede acercarse a cualquier zoom. Los resaltados se miden desde su DOM (lib/ui_kit.js). La narración proviene de scripts/vo_tools.py: audición, líneas, tiempos de palabras, subtítulos. Un segundo idioma es ?lang= en la misma composición, su VO mapeado sobre la línea de tiempo creada por nudos UIK.timeWarp en palabras que significan lo mismo, verificado píxel-idéntico para el idioma fuente con scripts/frame_diff.py. El contenido sigue siendo la salida real del producto. Método, números y qué más: references/product-demo.md. Es una técnica, no un aspecto: paleta, escenario, gramática de cámara y transiciones se eligen nuevos en §2 cada vez.

5 · Componer — un archivo, funciones puras del tiempo, movimientos de la biblioteca

mkdir -p cases/my-film && cp templates/comp.html lib/motion.js cases/my-film/   # la plantilla carga motion.js → window.OM
python3 scripts/probe.py my-film/comp.html        # en cuanto se reproduce de principio a fin: qué transporta cada límite, la curva de cada movimiento

Elige movimientos mirando gallery/sheets/<move>.png — seis fotogramas sobre la curva de velocidad de lo que se mueve. La biblioteca tiene 39: entradas, continuidades, simulaciones de contacto y en vivo, cámara y sus ayudantes de proyección, y un conjunto fluido (un campo de luz, ondas, seda, una correa, muelles SwiftUI); cada uno es una función del tiempo que devuelve números para una transformación del DOM o una llamada a canvas. Nunca vuelvas a derivar un muelle o una suavización con constantes fijas. La plantilla es la película motion-web (palabras cinéticas, prompt escrito, lista de verificación tictac, vuelos rápidos, simulaciones en vivo, una pausa, golpes staccato, una ruta de mano continua de la que cada simulación lee) — copia sus latidos solo cuando ese sea el concepto elegido en §2; de lo contrario, mantén su contrato y ayudantes y escribe los latidos propios del concepto. Todo es f(t); las simulaciones se pre-simulan una vez a 240 Hz y se muestrean. Vista previa ?play, pin ?t=6.4&hud. references/motion-library.md, references/composition.md.

El aspecto viaja con la composición. python3 scripts/look.py apply ember cases/my-film/comp.html (o un look.json) escribe look.js junto a ella: los ocho colores como variables CSS y LOOK.color, tres caras OFL subconjunto a los glifos que la composición establece e incrustados, para que el render file:// obtenga tipografía real. Cárgalo antes del script de la composición, escribe contra var(--ink) / var(--display) o LOOK.font('display', 96), y encadena window.__ready en LOOK.ready. Vuelve a ejecutarlo después de cambios de copia; nombra cualquier carácter que le falte a una cara (--cjk <font> para chino / japonés / coreano).

Cámara: con fotogramas clave, pero operada. OM.camera(t, keys) coloca la cámara donde cada latido la necesita; la sensación de un operador viene de cómo se colocan los fotogramas clave: clavea el sujeto ~0.1 s antes con sineInOut para seguirlo, clavea el punto de aterrizaje antes de un snap con expoInOut para azotar hacia él, añade una mano (una deriva lenta de dos senos, cero en las pausas) y OM.shake en cada aterrizaje. Dibuja un OM.lattice tenue más atrás, o en un fondo vacío el movimiento no se lee. Con una cámara, __track devuelve cajas de pantalla (OM.projectBox), __motion entrega a render.py el viaje, y __meta.inFrame nombra lo que nunca debe salir del encuadre. El método, con código: references/composition.md → Una cámara.

6 · Renderizar — borradores 1080p30, 4K60 solo tras la aceptación

python3 scripts/stills.py comp.html --times 0.7,2.4,3.8,6.2,9.9,12.7 --out stills.png   # mira antes de renderizar
python3 scripts/render.py comp.html --out draft.mp4 --sfx sfx.wav            # 1920×1080 · 30 fps · obturador 180°
python3 scripts/render.py comp.html --out film.mp4 --final --sfx sfx.wav     # 3840×2160 · 60 fps, una vez que el corte está aceptado

El obturador es desenfoque de movimiento real: cada fotograma en movimiento son varias búsquedas a través del obturador abierto, promediadas en luz lineal; las pausas se detectan y se saltan. Una captura es una captura de pantalla de Chrome (~150 ms; la página misma dibuja en menos de 1 ms), así que render.py ejecuta --workers navegadores en procesos paralelos (núcleos predeterminados − 2, máx. 8). Los cortes se renderizan como secuencias separadas y se cosen con ffmpeg. El borrador se renderiza en 1080p30 para velocidad; el final solo después de que el usuario apruebe el borrador. Los fotogramas clave se escriben como PNG (--frames); el metraje de referencia compartido se importa (--import). Cada línea de render.py --help explica su bandera.

El oráculo - después del render, antes del envío: scripts/oracle.py draft.mp4 ref.mp4 devuelve continuidad, ritmo, frecuencia de cambios de encuadre y dispersión de cortes, un valor de uniformidad de cadencia y una advertencia si algún segmento dura más de 3 s sin transición. Si el veredicto es REPROBAR — «no fluye», «ritmo de reloj», «uniforme» — rehaz desde §3. Si es PASA pero «sin energía», el concepto probablemente no tiene arco: rehaz desde §2. Dos borradores seguidos con el mismo veredicto de reprobación: cambia de música y rehaz desde §3. Solo el primer borrador que pase las dos patas del oráculo (PASA en continuidad Y ritmo) se envía al usuario. El método y la tabla de pesos: references/oracle.md.

Notas de implementación para el agente

• lib/ contiene la biblioteca de movimientos; no la modifiques sin registrar un cambio en el agente.
• scripts/ contiene todos los scripts; sus docstrings son la documentación.
• templates/comp.html es la plantilla de composición; los nuevos proyectos empiezan copiándola.
• cases/ contiene proyectos de ejemplo de cada película enseñada; cases/huazhong-dongtian-22s/ es la única vertical completa.
• references/ contiene documentos de método para escalar; references/vertical.md es la guía vertical.
• gallery/ contiene hojas de referencia para movimientos (sheets/<move>.png) y looks (sheets/looks.png).
• scripts/beat_grid.py analiza el archivo de música y genera una cuadrícula de ritmos en formato JSON.
• scripts/frame_diff.py compara dos renderizados de composición fotograma a fotograma; usado para verificar la corrección de la traducción.
• scripts/vo_tools.py ayuda a auditar líneas de voz, generar subtítulos y mapear tiempos de palabras para doblaje.

Todo es f(t). No hay almacenamiento en caché de fotogramas; no hay renderizado previo. Cada fotograma se puede reproducir en cualquier momento arbitrario abriendo comp.html?t=6.4&hud. El oráculo evalúa el renderizado final, no la composición en el navegador.