kbohara315/what-if-animation

Animación What If

Una línea temática y obtienes un episodio terminado de 15 a 25 segundos. Cada fotograma es SVG que escribe Claude (renderizado por Remotion); la voz y el sonido provienen de ElevenLabs. Dos ejemplos vienen en studio/src/episodes/, ambos listos para renderizar: rewind ("¿Qué pasaría si pudieras retroceder 10 segundos?", el clip de prueba: tomas reproducidas al revés como el poder) y copy-paste ("¿Qué pasaría si pudieras copiar y pegar cualquier cosa?", la primera ejecución completa del skill: una nueva cocina, un esquema para el golpe científico, un apagón de suspenso). Lee el que más se acerque a tu tema antes de empezar.

Archivo	Qué contiene
references/formula.md	La fórmula de siete compases What If, la forma de 15-25 s, reglas del guion, elegir un tema
references/look.md	La apariencia medida, el ritmo, el vocabulario de tomas, y las listas de verificación de storyboard y movimiento
references/kit.md	Los bloques de construcción: motor, elenco, escenarios, kit de habitaciones, luz, interfaz, looks, y cómo agregar cada uno
references/sound.md	Escribir eventos de sonido, indicaciones, niveles, costos
references/traps.md	Todo lo que costó tiempo en los dos episodios de ejemplo
studio/	El proyecto Remotion: cópialo una vez, luego cada episodio vive dentro
scripts/	voz, plan, fotogramas, storyboard, efectos de sonido, verificación de mezcla, cuadrícula de movimiento, máster (Python 3.9+ y Node)

Reglas

• Solo personajes originales. Pip (el héroe, look B) y Mo (su amigo) son nuestros, y también lo son la hermana, la mamá y el traje en el rig. Nunca el héroe de un canal, y nada que se parezca a un personaje famoso de dibujos animados: verifica cada nuevo look en la hoja del elenco (el primer sombrero de Mo se descartó por parecerse a uno).
• Historias originales. La fórmula es compartida; el episodio no es de nadie más. No rehagas un título de un canal.
• Nunca afirmes que los canales virales están hechos con Claude ni con ninguna otra herramienta. Nadie ha dicho cómo se hacen.
• Claves solo por nombre. ELEVENLABS_API_KEY, del entorno o un .env encima del estudio. Nunca imprimas, pegues o codifiques una clave.
• Reporta los créditos de ElevenLabs de cada ejecución: los scripts los registran en out/<slug>/costs.json y master.py los totaliza en report.json. El costo de la voz se lee del historial de la cuenta (exacto); los clips de sonido no aparecen allí, por lo que su costo proviene del contador de la cuenta, que puede retrasarse: vuelve a leerlo antes de reportar. Di el número cuando entregues el episodio. La ejecución de copy-paste costó 152 créditos (78 para la voz, 74 para 12 clips nuevos).
• Storyboard antes de la animación. No se renderiza ningún video hasta que los fotogramas pasen la autoverificación (paso 5) y, cuando la persona esté en el bucle, haya visto el storyboard.
• Cada hecho es real. Un número en el guion se calcula y se documenta en el campo science del episodio primero.

Configuración (una vez por máquina)

Necesita Node 18+, ffmpeg y ffprobe en el PATH, Python 3.9+ con numpy y Pillow, y una clave de ElevenLabs.

cp -r <skill>/studio ./what-if-studio && cd what-if-studio && npm install

Todo lo siguiente se ejecuta desde esa carpeta de estudio; <skill> es la carpeta de este skill. Para trabajar sin conexión o con tu propia marca, coloca una fuente de visualización en public/fonts/ y configura titleFont en src/studio.config.ts (la cara de título predeterminada, Bricolage Grotesque, y las caras de interfaz se cargan desde Google Fonts en tiempo de renderizado). Para actualizar un estudio existente a un motor más nuevo, copia <skill>/studio/src/engine sobre su src/engine.

El flujo de trabajo

Trabaja a través de los pasos en orden. Cada uno termina en algo que miras antes del siguiente.

1. Guion

Lee references/formula.md. Busca en YouTube la premisa primero: si un canal What If ya tiene ese episodio exacto, cambia el poder o la regla. A partir de la línea temática, decide la palabra del poder, su regla, tres demostraciones escalonadas y el giro (un dato real con un número). Escribe src/episodes/<slug>/episode.json con id (PascalCase, el nombre de la composición), slug, topic, title (dos líneas), script (una entrada por compás) y science (cada hecho: la afirmación, el cálculo, la fuente). De 45 a 65 palabras. Léelo en voz alta al ritmo: cada línea debe ser una imagen.

2. Voz

python <skill>/scripts/voice.py <slug>

Una toma de ElevenLabs con marcas de tiempo de personaje (la toma de copy-paste de 356 caracteres costó 78 créditos), luego los cortes de pausa se ajustan al ritmo del género: public/<slug>/voice.wav y src/episodes/<slug>/words.json. Verifica la duración (15-25 s) y los tiempos de palabra que imprime. Reajusta las pausas con gaps en episode.json y vuelve a ejecutar: la toma se almacena en caché, por lo que es gratis. Cambia una palabra y llama a la API nuevamente.

3. Lista de tomas

Diseña una toma por imagen en el guion (generalmente de 9 a 14), variando el tamaño y el ángulo en cada corte (plano general, inserto, medio, primer plano, sobre el hombro, picado, contrapicado; ver references/look.md). Agrega a episode.json:

• shots: { "id": "S1", "size": "medium", "set": "kitchen", "key": 14, "note": "lo que vemos" } (key es el fotograma del reloj de la propia toma que muestra el storyboard)
• edit: { "shot": "S1", "at": "cookie" } por corte, señalado en la palabra en la que aterriza (plan.py enumera las formas de señal; reverse, from, to y look para poderes que doblan el reloj de una toma)
• fx: destellos y sacudidas de un fotograma, { "at": "S3+2", "kind": "flash" }

python <skill>/scripts/plan.py <slug>

Escribe timeline.json y out/<slug>/shotlist.md e imprime el ritmo. Apunta a 27+ cortes por minuto en la apertura y ninguna toma estática de más de unos 3 s; corrige lo que marca antes de dibujar nada.

4. Storyboard

Lee references/kit.md para los bloques de construcción. Escribe src/episodes/<slug>/shots.tsx, un componente por toma, cada uno una función pura de su reloj t (copia los patrones de los dos ejemplos en shots.tsx), y index.tsx (el episodio y su look de poder), luego agrega el episodio a src/episodes/index.ts. En este paso, cada toma solo necesita estar correcta en su fotograma key. Cuando un tema necesite un lugar que falte en la biblioteca, constrúyelo con el kit de habitaciones y agrégalo a src/engine/sets/ (y a la copia del skill) para que el próximo episodio lo tenga, como se hizo con la cocina y el esquema en la ejecución de copy-paste. Un nuevo personaje o vestuario: agrega el look, luego verifícalo en la hoja del elenco (npx remotion still src/index.ts Cast out/cast.png).

npx tsc --noEmit
node <skill>/scripts/stills.mjs <slug>
python <skill>/scripts/board.py <slug>

out/<slug>/storyboard.jpg: un fotograma con leyenda por toma.

5. Autoverificar los fotogramas

Mira el storyboard, luego abre cada fotograma en out/<slug>/board/ a tamaño completo, y ejecuta honestamente la lista de verificación del storyboard en references/look.md, toma por toma. Anota lo que falla, arréglalo, vuelve a renderizar solo esas tomas (stills.mjs <slug> S3 S7), reconstruye la hoja y vuelve a mirar. Repite hasta que pase. Revisa references/traps.md para el fallo que estás viendo antes de inventar una solución. Si la persona está en el bucle, muéstrale el storyboard ahora y toma sus notas antes de animar.

6. Animar

Dale vida a cada toma desde su pose clave: claves de poseAt con anticipación, mantenimientos y exageración, faceAt para expresiones, movimientos de cámara con kf, el look del poder, los fx. Luego renderiza un borrador y verifica el movimiento:

python <skill>/scripts/master.py <slug>
python <skill>/scripts/motiongrid.py <slug> S2 S5
node <skill>/scripts/stills.mjs <slug> --frames 120 240

Lee las cuadrículas como un folioscopio contra la lista de verificación de movimiento en references/look.md; corrige y vuelve a renderizar hasta que se lea bien.

7. Sonido

Lee references/sound.md. Agrega sound a episode.json: los clips (indicación y duración), un evento por acción visible señalado a su toma, ambientes por ubicación, la música de fondo y los niveles. Verifica lo que ya tiene la biblioteca, luego genera:

python <skill>/scripts/sfx.py <slug> --dry
python <skill>/scripts/sfx.py <slug>

Imprime los créditos utilizados y establece los volúmenes de las pistas en timeline.json. Luego verifica que cada palabra se mantenga clara:

python <skill>/scripts/mixcheck.py <slug>

Enumera los momentos, mientras se habla una palabra, en que los efectos o la música están a menos de 3 dB de la voz. Un golpe que ilustra una palabra aterriza en la pausa justo después, nunca sobre ella; un fondo (un zumbido, un dron) debajo de una línea clave se reduce; si la mayoría de la pista abruma la voz, baja sfx_lu. Vuelve a ejecutar sfx.py y la verificación hasta que solo queden superposiciones deliberadas (un boom de título, un giro).

8. Máster y entrega

python <skill>/scripts/master.py <slug>

Renderiza, lleva la mezcla a -14 LUFS con picos por debajo de -1 dBTP, y escribe out/<slug>/report.json (duración, volumen, ritmo, créditos). Mira el archivo final una vez con sonido. Entrega out/<slug>/<slug>-final.mp4 y out/<slug>/storyboard.jpg, con la duración, los créditos de ElevenLabs utilizados, y cualquier cosa que aún mejorarías.

Dónde vive un episodio

Ruta	Qué
src/episodes/<slug>/episode.json	Todo lo que escribes: guion, ciencia, tomas, edición, fx, sonido
src/episodes/<slug>/shots.tsx, index.tsx	El dibujo: un componente por toma, el look del poder
src/episodes/<slug>/words.json, timeline.json	Escrito por voice.py y plan.py (sfx.py agrega los volúmenes)
public/<slug>/	voice.wav, sfx.wav, music.wav
out/<slug>/	Fotogramas del storyboard, storyboard.jpg, shotlist.md, cuadrículas de movimiento, renders, costs.json, report.json
library/sfx/	Cada clip de sonido generado, compartido por todos los episodios