Haseeburrahmann/3d-animator

Animador 3D

Un prompt simple te da un objeto girando en medio de un vacío gris: cámara estática, luz plana, movimiento lineal y sin sonido. Un animador piensa en cuatro cosas antes de escribir cualquier código: cámara, luz, movimiento y sonido. Esta skill te hace pensar así, luego escribir cada fotograma en código.

Las reglas provienen de un pipeline de producción de WhatsNext AI (@whats.nextai), ajustado contra los reels de mejor rendimiento medidos:

• menos del 10% de fotogramas estáticos;
• aproximadamente 0.7 cortes duros por cada 10 s;
• música a unos 9 dB por debajo de la voz.

0. Antes de cualquier código: dirige

Escribe primero una lista de tomas. Cada golpe narrativo obtiene una línea:

beat | seconds | subject | CAMERA move | LIGHT change | MOTION event | SOUND cue

Reglas para la lista de tomas:

• El fotograma 1 muestra el sujeto. No fundas desde negro, no muestres un logotipo, no abras en un escenario vacío.
• Cambia algo visible aproximadamente cada 1.5 s: un movimiento de cámara, una revelación o un cambio de luz.
• Cada golpe cambia una cosa: la escala (general ↔ macro), el ángulo, la luz o el estado del objeto. Nunca todo a la vez.
• Reorganiza el mismo objeto en lugar de cortar a escenas no relacionadas. La toma final debería rimar con la toma inicial.
• ¿Sin sujeto? Elige uno con un interior oculto, para que la cámara tenga a dónde ir: un reloj, un teléfono, un motor, una manzana de ciudad, un cable. Planea un corte de transición o una revelación.

1. Cámara (references/camera.md)

• La cámara nunca descansa. Agrega una órbita lenta y un balanceo hechos de dos senos inconmensurables encima de cada toma, para que ningún fotograma esté estático. Valores iniciales: aproximadamente 0,17 rad × sin(0,8t) + 0,09 rad × sin(1,9t + 0,7).
• Muévete entre cámaras clave con ease-in-out (cúbico). Nunca uses movimientos lineales, y nunca hagas saltos bruscos.
• Carro, no hagas zoom. Mueve la posición de la cámara y mantén el campo de visión entre 30° y 40° para objetos. El FOV gran angular distorsiona los productos.
• Avanza en las revelaciones. Retrocede para dar contexto. Un movimiento por golpe.
• Pocos cortes duros: aproximadamente 0.7 por cada 10 s. El movimiento proviene de la cámara, no del corte.
• Encuadre vertical 9:16:
  • Mantén al sujeto en el 60% central de la altura del fotograma.
  • El 15% superior es para un título.
  • El 25% inferior es para subtítulos e interfaz de la app.
  • Deja los 150 px derechos libres en Instagram y TikTok.
• Profundidad: coloca algo en primer plano, el sujeto en el medio y un fondo suave detrás. Agrega motas de polvo flotantes o partículas cerca del punto de mira para que incluso un movimiento lento se lea como movimiento.

2. Luz (references/light.md)

• Fondo oscuro, un color de acento, un sujeto. Por ejemplo, una escena azul marino #0B0F18 con un acento naranja #FF914D para "información".
• Configuración de iluminación:
  • Un relleno hemisférico: cielo #A9BDE0, suelo #0B0F18, intensidad aproximadamente 0.8.
  • Una luz direccional clave fría desde arriba a la izquierda: intensidad aproximadamente 1.5, proyectando sombras.
  • Una luz puntual cálida en un lado y una luz puntual fría en el otro, para que los bordes se separen del fondo.
• Reflejos: usa un mapa de entorno (RoomEnvironment a través de PMREMGenerator) con una intensidad de 0.2 a 0.6. Sin él, el metal y el vidrio parecen plástico.
• Bloom solo a propósito:
  • Usa UnrealBloomPass con un umbral de 0.9 o más, fuerza aproximadamente 0.4 y radio aproximadamente 0.4.
  • Las cosas que deben brillar usan emissive, y nada más brilla.
  • La trampa de la sobreexposición: los materiales blancos puros más el bloom lavan el fotograma. Usa gris claro (#C9CFD9) para plásticos "blancos".
• Usa niebla (<fog args={[bg, near, far]}/>) para que la distancia se desvanezca en el color de fondo.
• Los cambios de luz son golpes narrativos: una parte se ilumina mientras se nombra, la habitación se oscurece para una revelación, un destello aterriza en el momento culminante.

3. Movimiento (references/motion.md)

• Cada animación es una función pura del fotograma: t = frame / fps.
  • Nunca uses Date.now() o Math.random(). Usa random(seed) de remotion.
  • Nunca animes con useFrame.
• Los estallidos usan resortes (amortiguación 12–14, rigidez aproximadamente 170). Los movimientos usan ease-in-out cúbico. Usa lineal solo para cosas constantes como cintas transportadoras y deriva de partículas.
• Escalona elementos relacionados por 3–5 fotogramas. Nunca muevas diez cosas en el mismo fotograma.
• Agrega movimiento secundario: una rotación lenta de plataforma giratoria sobre el objeto héroe (±0.4 rad), motas a la deriva, una escala de respiración (±1%).
• Las pausas son una elección. Una congelación de hasta 2 s está bien cuando es un golpe dramático deliberado. De lo contrario, algo siempre se mueve.
• Etiquetas: las etiquetas de estado cortas en mayúsculas aparecen en el golpe que nombran. Marca las recreaciones como "RECREACIÓN 3D".

4. Sonido (references/sound.md)

• Un SFX por evento:
  • un swoosh en un gran movimiento de cámara;
  • un golpe en una revelación;
  • un ascensor (de aproximadamente 2 s) hacia una revelación;
  • un clic o pop en las etiquetas.
  • Sintetízalos (scripts/sfx_synth.py) o usa paquetes CC0.
• La pista musical se sitúa entre 6 y 11 dB por debajo de la voz, aproximadamente 9 dB como objetivo. Aplica sidechain-ducking bajo la narración.
• El silencio es un efecto. Elimina la música durante un golpe antes de la línea clave, luego vuelve a entrar con fuerza en un golpe.
• Masteriza a −14 LUFS integrados, con un pico verdadero en o por debajo de −1,5 dBTP. Extiende la clave de voz a la longitud completa para que la cola de la música no se corte.

5. Reglas de código (Remotion + three.js)

• Canvas: envuelve el 3D en <ThreeCanvas width={width} height={height}> de @remotion/three, e incluye siempre las luces.
• Secuencias: cualquier <Sequence> dentro del canvas necesita layout="none".
• Post-procesamiento: un EffectComposer puede tomar el control del renderizado con un useFrame(() => composer.render(), 1) de prioridad 1. Ese es el único uso permitido, porque Remotion avanza la escena una vez por fotograma para que la salida siga siendo determinista. Consulta templates/Fx3D.tsx.
• Estado: maneja la escena desde una única función de estado worldAt(t) que devuelve cámara, escenario y banderas. Mantén los componentes simples.
• Renderizado: renderiza con --gl=angle en macOS cuando la salida WebGL sea negra o inestable. Usa H.264, yuv420p, 1080×1920, 30 fps.

Piezas listas para usar (copia, no importes):

• templates/Fx3D.tsx: Reflejos de entorno y Bloom.
• templates/camera.ts: easeCam, orbit, ramp, pop.
• templates/Motes.tsx: Partículas de polvo deterministas.

6. Verifica como un editor

1. Renderiza 4–6 fotogramas fijos: el gancho, cada revelación y el último fotograma. Busca sobreexposición, el sujeto cortado por subtítulos o el título, fotogramas vacíos y texto ilegible.
2. Renderiza el video, luego ejecuta scripts/check_motion.sh out.mp4. Objetivo: menos del 10% de fotogramas estáticos, movimiento (YDIF) de aproximadamente 2 o más, y aproximadamente 0.7 cortes duros por cada 10 s. Si está estático, aumenta la órbita o el balanceo, agrega motas o agrega un avance. No agregues cortes.
3. Si hay audio, verifica el volumen (−14 LUFS) y que la música esté aproximadamente 9 dB por debajo de la voz.
4. Vuelve a renderizar solo lo que falló.

Hecho significa: existe una lista de tomas, cada golpe tiene un movimiento de cámara, un rol de luz, un evento de movimiento y una señal de sonido, las verificaciones pasan y has mirado los fotogramas fijos.