SonuSV7719/cinematic-camera

Cámara Cinematográfica

Úsalo con remotion-best-practices y motion-graphics. Construye un mundo conectado y mueve una cámara compartida a través de él en lugar de insertar paneles desconectados en el vacío.

Ingesta obligatoria

Antes de planificar o codificar, sigue el proceso de ingesta de motion-graphics. Si falta, pregunta:

¿Qué formato prefieres: inserto de media pantalla 4:3 para Instagram o pantalla completa 9:16 para Instagram? ¿Y qué fondo: luz cálida, oscuro limpio, cuadrícula clara o cuadrícula oscura?

No uses por defecto 9:16 u oscuro en silencio. Si el usuario delega la elección, usa luz cálida.

Prohibición visual absoluta

Este skill nunca introduce neón, resplandor, brillo, bordes luminosos, sombras de colores, orbes degradados, lavados de color radiales, degradados cian-púrpura, glassmorphism o iluminación ciberpunk. El movimiento de la cámara no puede convertir una escena contenida en una demo de IA con estilo. Los acentos de producto permanecen planos y contenidos.

Proceso obligatorio de referencia aprobada

Completa antes de planificar o codificar:

1. Inspecciona los últimos 3 a 5 renders aprobados relevantes para el mismo proyecto, producto, relación de aspecto, ubicación o mecanismo visual.
2. Abre las composiciones fuente e inspecciona los fotogramas clave de cámara, temporización, espaciado, tipografía, colores, densidad, entradas, salidas y pausas finales.
3. Inspecciona los clips reales o fotogramas representativos; solo los nombres de archivo no son suficientes.
4. Haz un inventario de activos auténticos: logotipos, mascotas, capturas de pantalla, grabaciones, material de archivo y resultados anteriores.
5. Escribe un breve mapa de compases que explique cómo el clip continúa el sistema aprobado.
6. Si no existe una referencia del proyecto, usa el respaldo bloqueado: mundo físico/editorial blanco cálido, tinta oscura, neutros apagados, un acento de marca plano y contenido, sombras neutras y cero efectos decorativos.

Prioridad de referencia: mismo video → mismo producto/serie → misma relación de aspecto/caso de uso → otros ejemplos aprobados del repositorio → respaldo bloqueado.

Galería canónica: https://github.com/Liamrjohnston/remotion-motion-graphics-skill

El trabajo aprobado reciente es la línea base, no una inspiración opcional. No inventes una nueva estética por novedad.

Idea central

Construye un mundo más grande que el viewport. Abre cerca en una acción, mantén mientras se completa, revela el contexto, viaja al contraste/desenlace y luego estabiliza.

Los paneles pueden existir, pero deben compartir un mundo y una relación espacial significativa. Evita tarjetas desconectadas que aparecen de forma independiente en el espacio vacío.

Rig de cámara

Usa una línea de tiempo de fotogramas clave compartida para el punto focal y el zoom:

const ease = Easing.inOut(Easing.cubic);
const KEY_T = [0, 46, 62, 78, 96, 132, 174, TOTAL_FRAMES];

const fx = interpolate(frame, KEY_T, [/* focal x */], {
  easing: ease,
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});
const fy = interpolate(frame, KEY_T, [/* focal y */], {
  easing: ease,
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});
const z = interpolate(frame, KEY_T, [/* zoom */], {
  easing: ease,
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});

<AbsoluteFill style={{backgroundColor: BG}}>
  <div
    style={{
      position: 'absolute',
      transform: `translate(${VIEW_W / 2 - fx}px, ${VIEW_H / 2 - fy}px) scale(${z})`,
      transformOrigin: `${fx}px ${fy}px`,
    }}
  >
    {/* Escena completa en coordenadas del mundo */}
  </div>
</AbsoluteFill>

• Las dimensiones provienen del formato confirmado, nunca de un valor por defecto oculto.
• El ancho del mundo suele ser de 2 a 2.5 veces el ancho del viewport.
• Las teclas adyacentes repetidas crean pausas.
• Los movimientos de cámara suelen durar entre 14 y 24 fotogramas.
• Termina con dos teclas casi idénticas para una pausa estable en el editor.
• La cámara, el cursor, los efectos y los objetos conectados permanecen en un sistema de coordenadas.

Coreografía

1. Abre cerca en algo que ya se esté moviendo.
2. Mantén mientras se completa la acción principal.
3. Revela su sistema más grande.
4. Viaja al contraste/desenlace.
5. Aleja mientras los objetos secundarios terminan en secuencia escalonada.
6. Estabiliza para un corte limpio.

Reglas:

• La cámara se mueve a la siguiente acción; la acción se completa durante la pausa.
• Una acción principal por compás.
• Usa micromovimientos solo para mostrar estado: escribir, marcar, verificar, reproducción, progreso, movimiento del cursor.
• Prefiere transformación continua sobre reemplazo de escena.
• Prefiere viaje suave sobre movimientos bruscos.
• El movimiento explica la causalidad; nunca compensa un concepto débil.

Autenticidad y texto

• Usa logotipos reales, material de archivo, capturas de pantalla, grabaciones, IU y datos verificados cuando estén disponibles.
• Nunca sustituyas con cuadrados genéricos de colores, marcas falsas, IU inventada o métricas falsas.
• Se permiten nombres de productos, nombres de archivos, contadores, comandos, progreso y texto de IU real.
• No repitas frases narradas ni agregues insignias explicativas porque un fotograma parezca vacío.

Filtro de rechazo de primera pasada

No muestres un render hasta que todas las respuestas sean "no":

1. ¿Quedó el formato o fondo sin confirmar?
2. ¿Hay algún neón, resplandor, iluminación de colores, lavado degradado, panel de vidrio o tratamiento de IA con estilo?
3. ¿Es la escena un conjunto de tarjetas genéricas desconectadas en el vacío?
4. ¿Se usa oscuro sin que el usuario lo haya elegido o una referencia aprobada lo requiera?
5. ¿Decora el movimiento de la cámara en lugar de guiar la causalidad?
6. ¿Faltan activos auténticos cuando están disponibles?
7. ¿Son ilegibles los elementos esenciales en la ubicación de Instagram elegida?
8. ¿El resultado no coincide con el espaciado, densidad, materiales y ritmo de movimiento de la referencia aprobada?

Revisa en privado hasta que el filtro pase.

QA y entrega

1. Renderiza fotogramas fijos para la apertura, cada destino de cámara, transición, desenlace y pausa final.
2. Compara junto a las referencias aprobadas en encuadre, densidad, identidad, moderación de materiales y pulido.
3. Verifica que los activos auténticos sigan siendo legibles.
4. Verifica que haya pausa → movimiento → pausa y que ninguna acción quede oculta durante el viaje.
5. Inspecciona el MP4 completo en busca de viajes vacíos, recortes, fotogramas muertos, relleno genérico, neón/resplandor y pausas finales débiles.
6. Entrega solo cuando se vea como el mismo sistema visual aprobado.

Restricciones técnicas

• Impulsa el movimiento con useCurrentFrame(), spring() e interpolate(); sin animaciones CSS.
• Los rangos de entrada de interpolate() deben ser estrictamente crecientes.
• Mantén mundos moderados; las capas grandes con desenfoque/sombra son costosas y generalmente violan las reglas visuales.
• Usa números tabulares para datos que cambian.