Cortometraje animado estilo historieta 3D (three.js + Remotion)
Ejemplo probado: The Bridge That Fell for a Song. Es un cortometraje original de 67 s sobre el puente Broughton de 1831 y 74 soldados marchando al paso.
- Código:
src/videos/bridge/de tu proyecto Remotion (composiciónBridgeShort, 1080x1920, 30 fps). - Guion, voz y sonido:
~/bridge-short/. - Investigación de estilo:
references/.
La referencia de estilo es un canal estudiado de forma privada (references/: STYLE_BIBLE.md, reports/*.md, frames/).
- Esos videos son material de estudio privado. Nunca los subas, publiques ni envíes.
- Nunca copies sus guiones, personajes o tomas. La historia, los personajes y la voz son siempre NUESTROS.
- Nunca digas el nombre del canal en una voz en off o descripción.
Reglas del usuario que aplican:
- Sin subtítulos ni etiquetas en el video.
- Solo inglés.
- Voz: un tono constante.
- Los chistes son hechos reales investigados.
- Mezcla estándar: música +3 dB, SFX -6 dB, voz sin cambios.
- Exportación final 2K vertical: 1440x2560,
--scale 1.3333. - Opus max verifica cada paso.
- Guardar después de cada paso.
- "Solo hazlo" una vez que el guion esté aprobado.
Pipeline
- Tema y hechos. Elige una historia real sorprendente con una causa y efecto físico (que sea visual), más una analogía cotidiana simple que la explique.
- Escribe los hechos con su fuente al inicio de
SCRIPT.md.
- Escribe los hechos con su fuente al inicio de
- Guion (~3.7 palabras/s, 55-70 s). Fórmula de ritmos del corto del puente:
- Gancho: el hecho absurdo en una línea ("Setenta y cuatro soldados derribaron un puente de hierro solo con cruzarlo.").
- Escenario: año, lugar, orgullo.
- Acción: escalada en tres o cuatro ritmos, cada uno un poco más grande.
- Golpe: el momento en que se rompe.
- Línea doble inexpresiva: "Por suerte... / Por desgracia...".
- Explicación: una idea física a través de una analogía cotidiana (el niño en un columpio).
- Consecuencia: la regla que creó.
- Giro de cierre: el final.
- Nunca describas en pantalla lo que el espectador ya ve.
- Voz. Graba o genera
voice.wav, luego haz sus tiempos de palabrawords.json(cualquier reconocimiento de voz con tiempos de palabra).- Ponlos en la carpeta del proyecto, por ejemplo
~/bridge-short/voice/. - Corrige manualmente los tiempos de palabra. Todo se sincroniza con words.json.
- Ponlos en la carpeta del proyecto, por ejemplo
- Plan de tomas en
story.ts: copiatemplates/bridge/(el código fuente final del puente, igual quesrc/videos/bridge/de tu proyecto Remotion) asrc/videos/<name>/, registra una nueva composición junto aBridgeShortensrc/Root.tsx, y renómbrala.SHOTS: id, fotogramas a/b, luz día/dorada, modo multitud,tautiempo de historia.XFADE: fundidos en cambios de lugar/tiempo.FLASH_AT: un destello blanco después del gancho.CAMS: claves por toma{f, dur?, cut?, s: f => {pos, look, fov, roll}}.KICKS: sacudidas de impacto al voltear.DOF/dofAt: desenfoque de lente por ritmo.FOREGROUND: accesorios de encuadre cercano.- Cada reacción visual ocurre 0-3 fotogramas antes de su palabra.
- Mundo.
lights.ts: LUCES más el LOOK paleta de cielo/río/nube por luz.shade.ts: sombreado de dos tonos yuntone().build.ts: pueblo, casas y accesorios del kit Kenney CC0, recoloreados, con eliminación de línea de visión de cualquier cosa que bloquee una cámara.paint.ts: texturas pintadas en HD Canvas2D con costuras pintadas como tintes oscuros.world.ts: sombreador de cielo, niebla = color del horizonte, río, pose por fotograma, sol congelado por toma y relativo a la cámara.
- Personajes.
toon.ts: la API de dibujo Canvas2DPen, lienzo de diseño 600x1000, plantas de los pies en y = 975, cabezas de frijol, extremidades de palo, contorno ciruela de ancho variable, biblioteca de caras.cast.ts: carteles orientados a la cámara, multitudes, tarjetas de efecto, parpadeos, ciclos de caminata. Todos los carteles van en la capaNOINK.cardshade.ts: tarjetas iluminadas por la luz de la escena, sin emisivo.
- Post (
Bridge.tsx+ink.ts+lensblur.ts+grade.ts).- Orden del compositor: tinta → pre lente → lente principal → bloom → mapa de tonos NEUTRO → gradación (MSAA 4).
- Cada parámetro de píxel escala con la altura de salida / 1920.
- Sonido (
~/bridge-short/audio/: timeline.py, sfx_gen.py, sfx.py, music.py, instruments.py, dsp.py, mix.py).- Tabla de eventos → SFX sintetizados más una partitura original atenuada debajo de la voz.
- Salida: mix.wav (48 kHz, duración exacta), pistas y cues.md.
- Bloquear las constantes de tiempo de la imagen antes de hacer el sonido. Cualquier cambio de tiempo posterior implica volver a ejecutar el sonido.
- Verificaciones de aspecto. Ejecuta
node scripts/bridge-stills.mjs out/<name>/x_ 100,400 0.5.- Establece
BRIDGE_ENTRY=src/sandboxes/<n>/index.tsxpara renderizar una copia en el arenero. - Haz comparaciones lado a lado contra fotogramas de referencia con
python scripts/sbs_sheet.py out.jpg --ours ... --ref .... - Envíalos a un verificador Opus max: 1-3 imágenes, un veredicto de ≤200 palabras.
- Establece
- Renderizado final.
npx remotion render src/index.ts <Comp> out/<name>/video.mp4 --codec h264 --crf 16 --scale 1.3333- Multiplexa con
-map 0:v:0 -map 1:a:0(Remotion escribe una pista de audio silenciosa). - QA:
python scripts/short_qa.py final.mp4 out/<name>/qa shots.jsonrevisa cada fotograma en busca de negro, blanco, fotogramas congelados y de reventón, además de sonoridad y hojas. - Arregla cualquier cosa que encuentre, luego ejecuta una auditoría profunda de Opus.
- Entrega. Envía al usuario el mp4 final, actualiza la memoria, escribe notas.
Valores de aspecto final (puente después de 4 rondas de verificador; todo en templates/bridge/)
Empieza cada nuevo corto desde templates/bridge/ (copia a src/videos/<name>/): el aspecto vive en estos valores, la historia vive en story.ts / diseño de build.ts / roles de cast.ts. Puntuaciones de Opus max al final: color día 7, dorado 5-6, iluminación 5-6, tinta 6, texturas 5-6, personajes 7, profundidad 6-7, composición 6-7 (desde 5/3/4/5/4/7/4/6 al inicio).
- Preajustes de luz (
lights.ts, sol relativo a la cámara y congelado por toma):- día: az 75 / el 48, iluminado [1.58,1.5,1.33], sombra [.30,.29,.36], elevación [.05,.06,.11] (tono frío SOLO en sombra), cielo superior #3e7fd2 → horizonte #b8d0ec, niebla = horizonte, 25→300 m, uSat 1.08, ~15 % neblina azul más allá de 60 m.
- dorado: az 6 / el 7 (sol bajo en contraluz), clave hacia #FFB36B ×1.5, sombra violeta-azul (fachada ≈ #444380), cielo #ffc47c → #8a6f8a, niebla melocotón solo más allá de 50 m, disco solar #ffcf9e + bloom, gotas de contacto + sombras de tarjeta reales.
- Albedos (
paint.ts/build.ts): casas de ladrillo apagado / crema / ocre / terracota con plinto, cornisa, antepechos, capotas, escalón de puerta, chimenea + caperuza, alturas 7 / 8.4 / 9.8 m; piedra cálida gris/beige (saturación −35 % de "cuento"); cubierta de madera ocre C* ~51-58 con costuras casi negras; hierro oscuro y desaturado. Nunca limón, nunca caras iluminadas de lavanda. - Tinta (
ink.ts): #030303, 5.1 px cerca (6 m) → 3.3 px lejos (90 m) a 1080x1920, arrugas ×0.8 desde 35°, saltos de profundidad desde 1 %, tinte de niebla 0.3 solo lejos; tarjetas de personaje en capaNOINK(llevan su propia tinta ciruela). - Lente (
lensblur.ts+dofAten story.ts): cInf px a 1080: gancho/río CU 15-16, primeros planos 12-14, MS 10-12, parque 7, balanceo dorado 5, planos generales/aéreos 0. Enfoque en los ojos de la primera fila. - Post (
Bridge.tsx): tinta → pre lente → lente principal → bloom (umbral 1.0, int .5, 6 niveles, radio .6) → mapa de tonos NEUTRO → gradación; MSAA 4. El grano de película existe pero está APAGADO (la referencia no mide grano; cuadruplica el tamaño del archivo). - Personajes (
toon.ts/cast.ts/cardshade.ts): cabezas de frijol a/w .94, tinta ciruela #241726, ojos a .26 W de distancia, sin rubor, 14 expresiones; adultos 3.5 cabezas de altura; balanceo de caminata 5 %, inclinación 1-7°, zancada plantada 0.8 m; parpadeos 0.5-2.3 s; sombra de contacto ajustada ~.5 bajo los pies + cola de dirección del sol durante el día; borde dorado solo interior (nunca una copia exterior desplazada). - Cámara (
story.ts): cortes en saltos grandes, deslizamientos smootherstep 18-40 f, cada plano fijo se arrastra (sin plano fijo ≥4 f), sacudidas de patada que decaen en 7 f en impactos, giros de 4-4.6°, accesorios de primer plano (FOREGROUND) en ~1/3 de las tomas.
Objetivos de aspecto (medidos de la referencia; ver references/reports/)
- Tinta:
- Líneas del mundo: aproximadamente 3 px a 1080 de ancho, casi negro #0b0a0c, casi constante con la distancia. Solo siluetas, saltos de profundidad y arrugas normales. Sin línea en uniones de pared/suelo o el horizonte. Las tarjetas de personaje nunca son delineadas por la tinta del mundo.
- Tinta de personaje: ciruela oscura #201628-#2f1d28, más gruesa en la parte inferior/lado de sombra.
- Color:
- Luma mediana de día ~.57. No tinta p5 ~.23 (sin negros aplastados). Croma iluminada C* p90 ~55. Cielo de día superior ~#5e93d9, horizonte 1.28x más brillante.
- Dorado: horizonte melocotón #ffd08a, sombras violeta-azul (nunca marrón), sol en contraluz.
- Profundidad:
- DOF en aproximadamente 1/3 del tiempo de pantalla (CU, MS, inserts), cInf 10-16 px a 1080, enfoque en los ojos. Tomas de establecimiento y planos generales se mantienen nítidos.
- Niebla = color del horizonte, 25→420 m de día, 20→360 m dorado.
- Bloom solo en emisivos HDR: umbral 1.0.
- Cámara:
- Cortes duros en saltos grandes. Todo lo demás es un deslizamiento smootherstep de 18-40 f, pico ≤ 25 px/f a 720p.
- Cada plano fijo se acerca 0.15-0.35 %/f, con 0.6 %/f en palabras de impacto.
- Giros de 4-5°.
- Sin flotación de cámara en mano. Las sacudidas de impacto cambian de signo cada fotograma y decaen en 7 f.
- Personajes:
- Aproximadamente 3.5 cabezas de altura, piernas 1.4 HH.
- Extremidades de palo aproximadamente 0.055 del ancho de la cabeza, manos de punto de tinta.
- Cabeza de frijol (a/w ~0.93, barbilla más estrecha, coronilla más puntiaguda).
- Sin rubor ni reflejos en los ojos. Caras con brillo ~.93.
- Balanceo de caminata 3-7 %, inclinación 1-7°, pies plantados.
- Parpadeos cada 0.5-2.3 s, con duración de 4 f.
Bucle de coincidencia de aspecto (cómo se logró el aspecto del puente; reutilizar para cualquier paso de "hacer que se vea como X")
- Mide la referencia primero. Un agente de análisis por tema (movimiento, profundidad, texturas, personajes, iluminación, contornos, gradación), cada uno escribiendo números, no adjetivos, a
references/reports/<topic>.md. Resumen compartido:compare/CONTEXT.md. Los informes son la fuente de verdad para cada agente después. - Areneros, un propietario por archivo. Copia la carpeta del proyecto a
src/videos/<name>_{cam,world,mat,char,post}con entradassrc/sandboxes/<n>/index.tsx(mismoindex.tsxque el principal, solo la ruta de importación cambiada). Propiedad usada para el puente:- cam: story.ts (claves de cámara, cortes, sacudidas, tabla DOF, accesorios de primer plano)
- world: world.ts, lights.ts, shade.ts, grade.ts (sol, cielo, niebla, río, color, gradación)
- mat: paint.ts, build.ts (texturas pintadas, edificios, accesorios)
- char: toon.ts, cast.ts, cardshade.ts (dibujo de personajes, pose, iluminación de tarjetas, tarjetas de efectos)
- post: ink.ts, Bridge.tsx, lensblur.ts (pasada de contorno, compositor, desenfoque de lente, bloom)
Los agentes solo editan sus propios archivos en su propio arenero y renderizan imágenes fijas con
BRIDGE_ENTRY=src/sandboxes/<n>/index.tsx node scripts/bridge-stills.mjs out/<name>/<n>/x_ <frames> 0.5.
- Fusiona con
python scripts/bridge_merge.py [cam,world,mat,char,post](hace una copia de seguridad de principal abackup/bridge_<time>/, copia solo los archivos propiedad). Luegonpx tsc --noEmit(filtra a la carpeta del proyecto), luego resincroniza cada arenero desde principal (cp -f src/videos/<name>/* src/videos/<name>_<n>/) antes de la siguiente ronda. - Verifica con un nuevo agente Opus max: hojas lado a lado (
python scripts/sbs_sheet.py out.jpg --ours a b --ref r1 r2), puntúa cada área de 10 (color día / dorado, iluminación, tinta, texturas, personajes, profundidad, composición) más una lista numerada de correcciones con números de fotograma. Asigna cada corrección al propietario del archivo y reanuda ese agente propietario con SendMessage (mantiene su contexto). Puntuaciones del puente: ronda 1 5/3/4/5/4/7/4/6 → ronda 2 5/4/5/6/4/7/6/6 → ronda 3 ver notas. - Los contratos entre propietarios viven en constantes exportadas (por ejemplo, capa
NOINKde ink.ts,dofAt/FOREGROUNDde story.ts,LIGHTS/LOOKde lights.ts). Cambiar un contrato significa informar a cada propietario que lo lee.
Errores comunes
- Los materiales del kit de naturaleza de Kenney son verde azulado: recoloréalos por nombre de material en build.ts.
- Las cámaras terminan dentro de las casas: el eliminador de línea de visión en build.ts/world.ts elimina cualquier cosa que bloquee cualquier rayo de cámara.
- La tinta en la misma pasada de efecto fusionada que DOF se sobrescribe. La tinta debe ser su propia pasada antes del desenfoque.
- Los parámetros de post del tamaño de píxel deben escalar con la resolución: las imágenes fijas son a 0.5, la final a 1.333. R3F limita dpr a ≥ 1, así que las imágenes fijas
--scale 0.5aún renderizan un búfer de 1080x1920. - Disco: cada paquete de Remotion copia
public/(~1.3 GB) enla carpeta temporal\remotion-webpack-bundle-*y nunca lo elimina. 60+ GB llenaron la unidad del sistema durante las pasadas del puente y un renderizado murió con ENOSPC. Siempre renderiza conexport TEMP='<unidad grande>/remotion-tmp' TMP='<unidad grande>/remotion-tmp'(bridge-stills.mjs lo establece solo) y pide al usuario antes de eliminar carpetas de paquete antiguas en la carpeta temporal compartida (el modo automático bloquea la limpieza). /remotion-tmp también se llena (~500 carpetas / 110 GB después de las 4 rondas del puente): cuando un proyecto está terminado y no se está renderizando nada, elimina sus carpetasremotion-webpack-bundle-*ypuppeteer_dev_chrome_profile-*allí. - En cadenas JS escribe
"<unidad grande>/remotion-tmp", nunca"<unidad grande>\remotion-tmp"(\rse convierte en un retorno de carro). - Remotion escribe una pista de audio silenciosa: multiplexa con
-map 0:v:0 -map 1:a:0. - Los subagentes no pueden escribir archivos de informe en este entorno: pídeles un mensaje final de ≤150 palabras y guárdalo tú mismo en
out/<name>/<n>/REPORT.md. - Los archivos
.tsde prueba dentro deout/rompentsc: nómbralos.txt. - Los renderizados 2K se ejecutan a ~4 fps (≈10 min para 67 s). Las imágenes fijas a 0.5 toman 3-8 s cada una después de un paquete de ~40 s.
- El grano de película al 2.5 % hizo que el archivo 2K fuera 910 MB en lugar de ~250 MB y se convertirá en un desastre en YouTube; la referencia no tiene ninguno. Mantenlo apagado.
Trampas de legibilidad que el verificador detectó (revisa cada nuevo accesorio/toma para esto)
- Un columpio dibujado como una sola cuerda que desaparece detrás del niño se lee como un AHORCAMIENTO. Siempre dos cuerdas a una tabla ancha con el niño entre ellas (
swingKiden toon.ts), y un marco cuyas patas despejan el arco (marco en A en cada extremo). - Los accesorios o desechos a menos de ~2 m de una lente se convierten en grandes manchas recortadas en el borde del fotograma. Cuando una cámara se mueve, vuelve a revisar cada accesorio cerca de su nueva posición (las cámaras del río se movieron hacia los sombreros flotantes).
- Un arbusto de primer plano cortado por el borde del fotograma se lee como una "bola verde"; un accesorio de primer plano debe ser reconocible o desaparecer.
- Banderas: estrella/rombo rojo + amarillo se lee como la de Vietnam. Usa una bandera correcta para el período (cruz de San Jorge para Inglaterra 1831).
- Dolor