Amartileyton/autovideo

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 mostrar paneles desconectados en el vacío.

Ingesta obligatoria

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

¿Qué formato prefieres: inserto de Instagram 4:3 de media pantalla o Instagram 9:16 de pantalla completa? ¿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, brillo, resplandor, bordes luminosos, sombras de colores, orbes degradados, lavados de color radiales, degradados cian-púrpura, vidrio esmerilado o iluminación ciberpunk. El movimiento de la cámara no puede convertir una escena comedida en una demo de IA con estilo "vibe-coded". Los acentos del producto se mantienen planos y comedidos.

Puerta de referencia aprobada obligatoria

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 keyframes de la cámara, el tiempo, el espaciado, la tipografía, los colores, la densidad, las entradas, las salidas y las pausas finales.
3. Inspecciona clips reales o fotogramas representativos; los nombres de archivo por sí solos no son suficientes.
4. Inventaria los activos auténticos: logotipos, mascotas, capturas de pantalla, grabaciones, metraje y resultados anteriores.
5. Escribe un mapa de ritmos corto que explique cómo el clip continúa el sistema aprobado.
6. Si no existe ninguna referencia del proyecto, usa el respaldo fijo: mundo editorial/físico blanco cálido mate, tinta oscura, neutros apagados, un acento de marca plano y comedido, sombras neutras y cero efectos decorativos.

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

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

El trabajo aprobado reciente es la línea de 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 de una acción, mantén mientras se completa, revela el contexto, viaja al contraste/remate, luego estabiliza.

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

Sistema de cámara

Usa una línea de tiempo de keyframes 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 predeterminado 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 del editor.
• La cámara, el cursor, los efectos y los objetos conectados permanecen en un solo sistema de coordenadas.

Coreografía

1. Abre cerca de 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/remate.
5. Aleja mientras los objetos de apoyo terminan en secuencia escalonada.
6. Estabiliza para un corte limpio.

Reglas:

• La cámara se mueve hacia la siguiente acción; la acción se completa durante la pausa.
• Una acción principal por ritmo.
• Usa micromovimiento solo para mostrar estado: escribir, marcar, verificar, reproducir, progreso, movimiento del cursor.
• Prefiere la transformación continua sobre el reemplazo de escena.
• Prefiere el viaje suave sobre los giros frenéticos.
• El movimiento explica la causalidad; nunca compensa un concepto débil.

Autenticidad y texto

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

Puerta de rechazo de primera pasada

No muestres un render hasta que cada respuesta sea "no":

1. ¿No se confirmó el formato o el fondo?
2. ¿Hay algún neón, brillo, iluminación de colores, lavado degradado, panel de vidrio o tratamiento de IA con estilo "vibe-coded"?
3. ¿La escena es 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. ¿El movimiento de la cámara decora en lugar de guiar la causalidad?
6. ¿Faltan activos auténticos cuando están disponibles?
7. ¿Hay elementos esenciales que no son legibles en la ubicación de Instagram elegida?
8. ¿El resultado no coincide con el espaciado, la densidad, los materiales y el ritmo de movimiento de la referencia aprobada?

Revisa en privado hasta que pase la puerta.

Control de calidad y entrega

1. Renderiza fotogramas fijos para la apertura, cada destino de cámara, transición, remate y pausa final.
2. Compara junto a las referencias aprobadas en cuanto a encuadre, densidad, identidad, moderación de materiales y acabado.
3. Verifica que los activos auténticos sigan siendo legibles.
4. Verifica 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/brillo 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 animación CSS.
• Los rangos de entrada de interpolate() deben ser estrictamente crecientes.
• Mantén los mundos moderados; las capas grandes con sombra/desenfoque son costosas y generalmente violan las reglas visuales.
• Usa números tabulares para datos que cambian.