hashgraph-online/awesome-codex-plugins

Constructor de Videos Remotion

Tu conocimiento de Remotion puede estar desactualizado. Cuando el comportamiento exacto de la API sea importante, prefiere el servidor MCP oficial remotion-documentation o la documentación en remotion.dev.

Comienza Aquí

• Si el proyecto aún no existe, créalo con npx create-video@latest y prefiere la plantilla en blanco.
• Mantén todos los paquetes remotion y @remotion/* en la misma versión exacta y evita rangos con caret.
• Estructura de entrada estándar:
  • src/index.ts llama a registerRoot()
  • src/Root.tsx registra todos los videos con <Composition> o <Still>

Orden de Construcción

1. Primero modela el contrato de entrada:
   • esquema de props de nivel superior
   • datos de la línea de tiempo o eventos
   • perfil de renderizado
2. Define props compartidas con zod y pasa el esquema a cada <Composition>.
3. Usa calculateMetadata para obtener durationInFrames, width, height, props transformados y defaultOutName.
4. Construye la estructura de escenas con <Series> para el orden narrativo y <Sequence> para superposiciones, entradas, ventanas de footage y anotaciones.
5. En proyectos con Remotion v4.x, establece explícitamente premountFor en los elementos <Sequence> que necesitan cargar activos antes de que aparezcan.
6. Agrega datos de muestra y scripts de renderizado antes de pulir la animación.

Valores Predeterminados y Reglas

• Por defecto usa fps={30} y 1920x1080 para orientación horizontal a menos que el resumen indique lo contrario.
• Usa AbsoluteFill para las capas.
• Usa staticFile() para cualquier cosa que venga de public/.
• Usa useCurrentFrame() y useVideoConfig() para la lógica basada en fotogramas.
• Prefiere movimiento sutil:
  • spring() con amortiguación alta
  • interpolate() con sujeción
• No uses Math.random(). Usa random(seed) de remotion.
• Mantén la animación de texto simple y legible.
• Mantén las salidas horizontal y vertical con la misma lógica de negocio a menos que el resumen realmente requiera divergencia.

Lista de Verificación de Video Parametrizado

• Un esquema z.object() compartido de nivel superior
• defaultProps que coincida con la forma de props del componente
• calculateMetadata devolviendo duración o dimensiones dinámicas cuando las entradas lo requieran
• Datos de muestra en JSON o TypeScript para vista previa local
• Scripts de renderizado para cada salida objetivo

Estrategia de Footage

Soporta al menos estos modos cuando el footage sea opcional:

• none
• placeholder
• real

La línea de tiempo y las superposiciones deben renderizarse incluso cuando no haya footage real.

Video de Lanzamiento de Millrace

Si la solicitud es sobre Millrace o el pipeline de video de lanzamiento, lee references/millrace-launch-video.md antes de implementar.

Referencias

• references/remotion-core.md
• references/millrace-launch-video.md