Communitygithub.com

kbohara315/cartoon-3d-short

Crea un cortometraje animado estilo historieta vertical de ~55-70 s en el estilo "personajes 2D en un mundo 3D colorido" (tarjetas planas con cabeza de frijol y contornos de tinta, pueblo/mundo 3D pintado con líneas de tinta negra, cielo saturado, fondos con profundidad de campo, cámaras deslizantes, narración con voz, SFX sintetizados + música estilo marcha), renderizado con three.js dentro de Remotion. Probado en "The Bridge That Fell for a Song" (2026-10-31). Úsalo cuando el usuario pida otro video "como el video del puente", "como el corto de los soldados/puente", "en ese estilo 3D de caricatura", un corto de historia/ciencia con personajes de caricatura en 3D, o diga "usa la habilidad de corto de caricatura".

¿Qué es cartoon-3d-short?

Esta habilidad le permite a un agente de IA generar un cortometraje animado vertical de 55 a 70 segundos en el estilo único de "personajes 2D en un mundo 3D colorido". El agente comienza seleccionando una historia real sorprendente con una causa y efecto físico, la escribe siguiendo una fórmula de ritmos probada y luego construye el mundo 3D, los personajes 2D y los efectos visuales usando three.js y Remotion. La habilidad detalla un riguroso proceso de renderizado: desde la creación de texturas pintadas, sombreado de dos tonos, líneas de tinta y desenfoque de lente, hasta la síntesis de efectos de sonido y música. Incluye un ciclo de verificación de calidad con agentes de Opus Max para asegurar que la apariencia final coincida con la referencia estilística, con métricas objetivas para color, iluminación, profundidad y personajes. La habilidad está diseñada para plataformas como Claude Code y se basa en la pila técnica de three.js, Remotion y herramientas de línea de comandos para renderizado y mezcla de audio.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add kbohara315/animated-shorts-forge

Preguntar en tu IA favorita

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

Documentación

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ón BridgeShort, 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

  1. 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.
  2. 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.
  3. Voz. Graba o genera voice.wav, luego haz sus tiempos de palabra words.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.
  4. Plan de tomas en story.ts: copia templates/bridge/ (el código fuente final del puente, igual que src/videos/bridge/ de tu proyecto Remotion) a src/videos/<name>/, registra una nueva composición junto a BridgeShort en src/Root.tsx, y renómbrala.
    • SHOTS: id, fotogramas a/b, luz día/dorada, modo multitud, tau tiempo 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.
  5. Mundo.
    • lights.ts: LUCES más el LOOK paleta de cielo/río/nube por luz.
    • shade.ts: sombreado de dos tonos y untone().
    • 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.
  6. Personajes.
    • toon.ts: la API de dibujo Canvas2D Pen, 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 capa NOINK.
    • cardshade.ts: tarjetas iluminadas por la luz de la escena, sin emisivo.
  7. 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.
  8. 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.
  9. Verificaciones de aspecto. Ejecuta node scripts/bridge-stills.mjs out/<name>/x_ 100,400 0.5.
    • Establece BRIDGE_ENTRY=src/sandboxes/<n>/index.tsx para 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.
  10. 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.json revisa 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.
  11. 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 capa NOINK (llevan su propia tinta ciruela).
  • Lente (lensblur.ts + dofAt en 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")

  1. 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.
  2. Areneros, un propietario por archivo. Copia la carpeta del proyecto a src/videos/<name>_{cam,world,mat,char,post} con entradas src/sandboxes/<n>/index.tsx (mismo index.tsx que 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.
  3. Fusiona con python scripts/bridge_merge.py [cam,world,mat,char,post] (hace una copia de seguridad de principal a backup/bridge_<time>/, copia solo los archivos propiedad). Luego npx 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.
  4. 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.
  5. Los contratos entre propietarios viven en constantes exportadas (por ejemplo, capa NOINK de ink.ts, dofAt/FOREGROUND de story.ts, LIGHTS/LOOK de 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.5 aún renderizan un búfer de 1080x1920.
  • Disco: cada paquete de Remotion copia public/ (~1.3 GB) en la 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 con export 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 carpetas remotion-webpack-bundle-* y puppeteer_dev_chrome_profile-* allí.
  • En cadenas JS escribe "<unidad grande>/remotion-tmp", nunca "<unidad grande>\remotion-tmp" (\r se 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 .ts de prueba dentro de out/ rompen tsc: 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 (swingKid en 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

Skills relacionados