alifmahmudashik/shorts-studio-skill

Corto de historia animada 3D (three.js + Remotion)

Ejemplo comprobado: El puente que cayó por una canción. Es un corto original de 67 s sobre el puente de 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, personajes y voz son SIEMPRE NUESTROS.
• Nunca digas el nombre del canal en una voz en off o descripción.

Reglas del usuario que aplican:

• Subtítulos: ACTIVADOS por defecto para Shorts. Una palabra a la vez, centrados, negrita, contorno oscuro, dentro del área segura, sincronizados con words.json (ver 'Subtítulos'). Solo desactivarlos si el usuario lo indica. Sin otras etiquetas en pantalla.
• Solo inglés.
• Voz: un tono constante (inexpresivo: el narrador nunca reacciona, los personajes sí).
• Bromas basadas en 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 datos. Elige una historia sorprendentemente real con una causa y efecto físico (que sea visual), más una analogía cotidiana simple que la explique.
   • Escribe los datos con su fuente al principio de SCRIPT.md.
2. Guion (~3.7 palabras/s, 35-70 s). Para cortos de datos usa 'Formato de historia viral' y 'Hazlo divertido' a continuación; la fórmula de los golpes del puente es la alternativa para historias de desastres:
   • Gancho: el dato absurdo en una línea ("Setenta y cuatro soldados derribaron un puente de hierro solo por caminar sobre él.").
   • Contexto: año, lugar, orgullo.
   • Acción: escalada en tres o cuatro golpes, cada uno un poco más grande.
   • Ruptura: el momento en que se rompe.
   • Línea doble inexpresiva: "Por suerte... / Por desgracia...".
   • Explicación: una idea de física a través de una analogía cotidiana (el niño en un columpio).
   • Consecuencia: la regla que creó.
   • Giro final: el final.
   • Nunca describas en pantalla lo que el espectador ya ve.
3. Voz. Graba o genera voice.wav, luego crea sus tiempos de palabra words.json (cualquier conversión de voz a texto con tiempos de palabra).
   • Ponlos en la carpeta del proyecto, p. ej., ~/bridge-short/voice/.
   • Corrige manualmente los tiempos de palabra. Todo está sincronizado con words.json, y los subtítulos también se extraen de él.
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/<nombre>/, 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: transiciones cruzadas 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.
   • DOF/dofAt: desenfoque de lente por golpe.
   • FOREGROUND: accesorios de encuadre cercanos.
   • Cada reacción visual llega 0-3 fotogramas antes de su palabra.
   • Encadena los sujetos de cada oración en un flujo continuo (flow.ts, ver 'Flujo continuo'), da a cada movimiento un nombre y a cada parada un tamaño de encuadre (ver 'Variedad de cámara' y 'Encuadre').
   • Dale a cada lugar su propio ajuste de luz (ver 'Iluminación para cada lugar').
5. Mundo.
   • lights.ts: LUCES más el aspecto cielo/río/nube por luz.
   • shade.ts: sombreado de dos tonos y untone().
   • build.ts: pueblo, casas y accesorios del kit CC0 de Kenney, recoloreados, con eliminación de línea de visión de todo lo que bloquee una cámara.
   • paint.ts: texturas pintadas con 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, suelas en y = 975, cabezas de frijol, extremidades de palo, contorno de ancho variable ciruela, biblioteca de caras.
   • cast.ts: carteles orientados a la cámara, multitudes, tarjetas de efectos, 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. Postproducción (Bridge.tsx + ink.ts + lensblur.ts + grade.ts).
   • Orden del compositor: tinta → pre-lente → lente principal → floración → mapa de tonos NEUTRAL → 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 con volumen reducido debajo de la voz.
   • Salida: mix.wav (48 kHz, duración exacta), stems y cues.md.
   • Bloquea las constantes de tiempo de la imagen antes de crear el sonido. Cualquier cambio posterior en la sincronización implica volver a ejecutar el sonido.
9. Verificaciones de aspecto. Ejecuta node scripts/bridge-stills.mjs out/<nombre>/x_ 100,400 0.5.
   • Establece BRIDGE_ENTRY=src/sandboxes/<n>/index.tsx para renderizar una copia en zona de pruebas.
   • Haz comparaciones lado a lado con fotogramas de referencia usando 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.
   • Ejecuta la verificación de encuadre (templates/bridge/framing.ts) para cada toma y crea una hoja de contactos con una imagen fija por toma (primer, medio y último fotograma). Ver 'Puerta de calidad'.
10. Renderizado final.
    • npx remotion render src/index.ts <Comp> out/<nombre>/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/<nombre>/qa shots.json verifica cada fotograma en busca de fotogramas negros, blancos, congelados y de reventón, además de sonoridad y hojas.
    • Corrige cualquier cosa que encuentre, luego ejecuta una auditoría Opus profunda.
11. Entrega. Envía el mp4 final al usuario, actualiza la memoria, escribe notas.

Verificación previa (haz esto primero)

• Verifica que existan templates/bridge/, references/ y scripts/ (clona github.com/mromidev/claude-animated-shorts, o tu fork, junto al proyecto Remotion si faltan). Si faltan, DETENTE y tráelos. Nunca improvises un aspecto genérico de three.js sin las plantillas.
• Haz primero un clip de prueba de 15 s (gancho + 2-3 tomas, con subtítulos y sonido). Renderiza imágenes fijas, ejecuta la Puerta de calidad, corrige, luego extiende a la historia completa. Nunca vayas directamente a un renderizado completo.

Formato de historia viral: "reírse de un genio" (usar para cortos de datos)

Seis golpes, siempre:

1. Acción extraña sin contexto, mostrada en una imagen (gancho, primeros 3 s).
2. La risa: los otros personajes se burlan del héroe.
3. Todos miran a la derecha: pasa el tiempo y el héroe parece equivocado o inofensivo.
4. La pista: un detalle que presagia la recompensa.
5. La recompensa: el evento que demuestra que el héroe tenía razón (el clímax visual).
6. La ciencia: muestra el mecanismo (vista interna / en corte / macro) y explícalo en una oración simple.

• Cuéntalo como una historia con un héroe, no una lista de datos. Elige una práctica extraña que sea visible en una imagen y por la que la gente se reiría.
• La última línea inicia un argumento o un comentario (algo debatible), no un resumen ordenado.
• Patrón de título: "Por qué X...", "Cómo X...", "Lo que X realmente significó". Sin spoilers de la recompensa en el título.
• Ritmo: un nuevo sujeto cada 2-3 s, alcanzado mediante viaje de cámara (ver 'Flujo continuo') en lugar de un corte, con un efecto de sonido en casi cada movimiento o disolución (whoosh, clink, risa de la multitud) y música debajo de la voz.
• Lugares ricos, personajes simples (cabezas redondas, brazos de palo): planifica 12-16 lugares distintos y 20+ accesorios para un corto de 60 s, y dale a cada lugar su propio ambiente de iluminación.
• Escribe los datos con fuentes primero. Los años y números se dicen de forma natural ("mil ochocientos cuarenta y siete") y se subtitulan como dígitos.
• Ejemplo: templates/SCRIPT_viral_example.md.

Hazlo divertido (motor de comedia)

La multitud se ríe del héroe; el espectador también debería reírse.

• Voz inexpresiva, imágenes absurdas. El narrador nunca reacciona; los personajes sí. La brecha entre ambos es el chiste.
• Un gag cada 4-6 s, usando al menos tres tipos por corto: un gag de línea (subestimación, "Por suerte... / Por desgracia..."), un gag visual (cara de reacción, un pequeño detalle al fondo, un accesorio de escala incorrecta) y un gag sonoro (un SFX tonto que llega en la reacción).
• Regla de tres: dos golpes normales, luego el tercero rompe el patrón.
• Gag recurrente: un personaje u objeto de fondo (una paloma, un hombre con un sándwich) aparece 3-4 veces y tiene una recompensa cerca del final.
• Planos de reacción: la cámara se posa en la cara (una parada de flujo o un enfoque variable, no un corte) 3-6 fotogramas después de la palabra de golpe y se mantiene 8-12 fotogramas. Usa la biblioteca de caras; incluye al menos una "no impresionado" y una "shock". Ver 'Reacciones y golpes de diálogo'.
• Héroe confiado, multitud engreída, funcionarios demasiado serios: los personajes toman cosas triviales con una seriedad mortal.
• Exagera la física solo para un golpe (la recompensa): estirar y encoger, una nube de polvo, una patada de impacto.
• Final de retorno: la última línea tuerce la primera línea (el gancho) usando lo que pasó.
• Los chistes se mantienen dentro de los hechos reales: la parte divertida es el detalle verdadero. Nunca golpees a víctimas reales o a grupos; el objetivo es el exceso de confianza y la presunción.

Subtítulos (subtítulos palabra por palabra)

• Fuente: words.json (tiempos de palabra de voz, corregidos manualmente). Cualquier conversión de voz a texto funciona; normalizeWords() in templates/bridge/Captions.tsx acepta {word|text, start|start_time, end|end_time} en segundos o milisegundos y omite las entradas "espaciado" de ElevenLabs.
• Si el texto de voz a texto difiere del guion (números, nombres, ortografía), reemplaza el texto con las palabras del GUIÓN y mantén los tiempos de STT. Los subtítulos muestran la ortografía del guion ("1847"), aunque la voz diga "mil ochocientos cuarenta y siete".
• Componente: copia templates/bridge/Captions.tsx a src/videos/<nombre>/ y renderiza <Captions words={WORDS} /> como el ÚLTIMO hijo de la composición, como una superposición DOM sobre el lienzo de three.js, fuera del compositor de post-procesado (sin tinta, desenfoque, floración o gradación en el texto).
• Estilo: una palabra a la vez, centrada horizontalmente a aproximadamente el 68 % de la altura del fotograma (debajo de las caras, dentro del área segura), sans-serif gruesa, relleno blanco, contorno oscuro de 9 px a 1080 de ancho, escala de aparición 0.8 → 1.08 → 1 en 6 fotogramas, sin cuadro de fondo, ancho máximo 86 %. Los números, nombres y palabras de golpe usan el color de acento (highlight). Los tamaños de píxel escalan con la altura de salida / 1920.
• Nunca cubras una cara: cuando un primer plano tenga la cara en la posición del subtítulo, pasa yPercent={(frame) => ...} para moverlo en esa toma.
• El subtítulo aparece 1 fotograma antes de que se escuche su palabra (lead).
• QA: renderiza una imagen fija en una palabra de golpe en cada toma y confirma que el subtítulo está dentro del área segura y no cubre una cara.

Encuadre, área segura y límites de zoom (aplicados)

• Fotograma 9:16. Área segura: margen 6 % izquierda/derecha, 8 % superior, 15 % inferior (UI de la plataforma y subtítulos). Todo lo que importa (personajes, accesorios, burbujas, letreros) está completamente dentro de ella, excepto los accesorios de encuadre de primer plano deliberados.
• La cabeza de un personaje ocupa como máximo el 30 % de la altura del fotograma (un gag de reacción en plano individual puede usar 40 %). Prefiere planos medios (de cintura para arriba) y planos generales de cuerpo completo.
• Nunca cortes a un personaje por los pies, y nunca recortes una burbuja de diálogo o un letrero. Un accesorio de primer plano es reconocible o desaparece; un accesorio recortado no debe cubrir más del 35 % del fotograma.
• No más de dos tomas del mismo tamaño seguidas (general / medio / primer plano / inserto).
• Los empujes en las pausas se mantienen lentos: 0.15-0.35 % por fotograma, 0.6 % en palabras de golpe. Sin zooms grandes repentinos.
• Verificación automática: checkShot(camera, items) en templates/bridge/framing.ts proyecta los cuadros delimitadores al espacio de la pantalla y enumera cada problema. Ejecútalo en el primer, medio y último fotograma de cada toma, en bridge-stills, y corrige las tomas fallidas antes de renderizar. Auto-prueba: npx tsx templates/scripts/framing_selftest.ts.

Iluminación para cada lugar (el puente solo define día y dorado)

Cada lugar necesita su propio ajuste de luz en lights.ts: una dirección de luz clave clara, sombreado de dos tonos (iluminado cálido, sombra fría), sombras proyectadas y de contacto, y un cielo o techo a juego. Nunca una habitación plana sin luz, y nunca cielo o nubes visibles dentro de una habitación.

• Interior (salón, hotel, oficina): un techo o parte superior de pared oscura, una luz clave de una ventana o lámpara, luces prácticas cálidas (velas, lámparas) con floración, un lado de sombra fría, una viñeta suave, sombras de suelo y pared de cada accesorio, rayos de luz o polvo de las ventanas.
• Noche: luz clave azul lunar (aproximadamente #5b7fd6), sombra violeta azulada profunda, ventanas y lámparas iluminadas cálidas como contraste, disco lunar o estrellas.
• Amanecer/atardecer: sol bajo con rayos divinos, cielo melocotón a rosa, sombra violeta, sombras largas.
• Estos son valores iniciales: ajústalos contra references/frames/ con hojas lado a lado (sbs_sheet.py).
• Sombra de contacto debajo de cada personaje y accesorio, más una cola de sombra direccional de la luz clave; los muebles y accesorios proyectan sombras en suelos y paredes (las sombras de las tarjetas son reales, no manchas, en interiores).
• La profundidad de campo (tabla a continuación) se aplica de manera consistente: los primeros planos y planos medios nunca están completamente nítidos, los planos generales se mantienen nítidos.

Variedad de cámara (siempre en movimiento, nunca el mismo movimiento dos veces seguidas)

• Dentro de un flujo o toma, usa movimientos nombrados: empuje lento, revelación hacia atrás, órbita alrededor del sujeto, seguimiento lateral con paralaje, grúa arriba/abajo, inclinación, enfoque variable desde un accesorio de primer plano al sujeto, pequeño balanceo holandés (4-5°).
• No hay dos movimientos consecutivos iguales.
• Pon accesorios de primer plano (pilares, barandillas, muebles) entre el lente y el sujeto en aproximadamente un tercio de las tomas, para que el movimiento de la cámara se lea como profundidad.
• Al menos dos tomas de inserción por historia: un macro o corte del mecanismo para los golpes 4-6, más un ángulo dramático (ángulo bajo de héroe o vista de pájaro).
• Mantén los deslizamientos suavizados existentes (18-40 f), las pausas sigilosas y las patadas de impacto.

Flujo continuo: viaja entre sujetos, no cortes (la referencia)

...

[truncado para traducción]