Video explicativo: pulido Remotion, portada y export verificado

Producción con Remotion

Construye videos de Remotion como renderizadores deterministas de fotogramas. Trata la geometría de los activos, el anclaje visual, la sincronización de la línea de tiempo y la verificación final de los medios como preocupaciones separadas.

Enrutar la tarea

• Para extracción de hojas de sprites, sangrado de fotogramas, sujetos descentrados, obras de arte truncadas o bucles no naturales, lee references/sprite-sheets.md.
• Para estructura de composición, sincronización de escenas, paneles de coordenadas en vivo o diseño de transiciones, lee references/scene-architecture.md.
• Para una portada de apertura dentro del video, una composición de miniatura independiente, un final con marca o una pausa final, lee references/covers-and-endings.md.
• Para carga de activos, audio, fallos de delayRender, renders sin memoria o verificación de exportación, lee references/rendering-and-audio.md.
• Para indicaciones de imágenes de portada, dirección de miniaturas, descripciones de videos cortos o hashtags de publicación, lee references/publishing-copy.md.

Lee solo las referencias relevantes para la solicitud. Inspecciona la versión instalada de Remotion antes de elegir las importaciones, porque los proyectos antiguos pueden exponer componentes multimedia desde remotion, mientras que los proyectos actuales usan @remotion/media.

Flujo de trabajo de producción

1. Establecer el contrato de renderizado

Inspecciona el proyecto existente antes de editarlo. Registra:

• ID de composición, ancho, alto, FPS y duración;
• límites de escenas y si los fotogramas son globales o locales a una Sequence;
• dimensiones de los activos de origen, transparencia, metadatos de fotogramas y duración del audio;
• códec de salida requerido, destino y recursos de renderizado disponibles;
• si los entregables incluyen una escena de portada de apertura, una imagen de portada independiente, una tarjeta final, audio audible, silencio intencional o copia de publicación.

Preserva los cambios no relacionados en el árbol de trabajo. Prefiere un cambio pequeño y dirigido en lugar de reestructurar un proyecto funcional.

2. Modelar el tiempo explícitamente

Define las duraciones de las escenas y los fotogramas de corte como constantes o datos nombrados. Deriva el estado de la animación de useCurrentFrame() y useVideoConfig().

const spriteIndex =
  Math.floor((frame * spriteFps) / compositionFps) % sequence.length;

Usa interpolate() con rangos fijos para movimiento continuo. No uses transiciones CSS, keyframes CSS, temporizadores de tiempo real, valores aleatorios o estado de reproducción mutable para la animación renderizada.

3. Separar la geometría de origen de la presentación

Mantén los rectángulos de recorte, el orden de animación, los límites del contenido y los anclajes visuales en datos tipados. Haz que los componentes de renderizado consuman esos datos en lugar de duplicar coordenadas en CSS o etiquetas.

Usa el mismo objeto de fotograma actual calculado para:

• el recorte visible;
• los contadores de fotogramas y las celdas resaltadas;
• los paneles JSON/de coordenadas;
• los subtítulos que describen el fotograma activo.

Esto evita una animación correcta con una interfaz de usuario explicativa obsoleta.

Al mostrar un filminuto, genera una ventana que contenga el fotograma actual exacto. No resaltes el fotograma muestreado más cercano mientras renderizas un recorte diferente.

4. Estabilizar el sujeto principal

Usa un viewport fijo para la animación. Recorta primero el rectángulo de origen exacto, luego traslada ese fotograma recortado dentro del viewport usando un anclaje visual por fotograma o un cuadro de contenido visible. No centres solo el rectángulo de celda bruto cuando la obra de arte se desplaza dentro de las celdas.

Para hojas de sprites, verifica cada fotograma del borde y cualquier fotograma que contenga extremidades largas como colas, cabello, sombras o estelas de movimiento. Sigue el flujo de trabajo detallado en references/sprite-sheets.md.

5. Construir la continuidad de la escena

Dale a la composición un fondo base opaco persistente fuera de todas las secuencias de escenas. Los fondos de las escenas también pueden permanecer opacos. Aplica las transiciones como superposiciones impulsadas por fotogramas sobre las escenas y debajo de cualquier viñeta final o superposición de seguridad.

Mantén los efectos decorativos subordinados a la explicación. Una transición debe ocultar un corte, no revelar transparencia, tableros de ajedrez, celdas de sprites vecinas o contenido desmontado.

Cuando la solicitud incluya una portada o un final, impleméntalos como escenas de primera clase y renderiza una composición de portada independiente cuando sea útil. Sigue references/covers-and-endings.md. No sustituyas una indicación de generación de portada por una portada real de Remotion a menos que el usuario haya solicitado solo una indicación.

6. Agregar y mezclar audio

Haz referencia al audio local con staticFile(). Cubre la composición completa eligiendo una pista lo suficientemente larga, repitiendo intencionalmente o recortando intencionalmente. Para una pista larga proporcionada por el usuario, inspecciona su duración, silencio y volumen, luego coloca solo el extracto requerido en public/audio/. Elige un límite musicalmente natural en lugar de confiar solo en el volumen.

Usa una función de volumen basada en fotogramas para los fundidos y mantén la música de fondo lo suficientemente baja para la narración o el texto instructivo. Evita hornear los fundidos en el extracto cuando Remotion ya posee la envolvente de volumen.

No declares el audio como completo solo desde la vista previa de Studio. Verifica que el archivo exportado contenga un flujo de audio mediblemente no silencioso.

7. Validar en alcance creciente

Ejecuta las comprobaciones en este orden:

1. Verifica los tipos del proyecto.
2. Renderiza fotogramas fijos en la portada, a ambos lados de cada corte, fotogramas de sprites representativos, la entrada final y la pausa final.
3. Renderiza la composición completa.
4. Si Chrome agota la RAM o el disco temporal, reduce la concurrencia de renderizado antes de cambiar el código de la aplicación.
5. Inspecciona el contenedor final en cuanto a duración, flujo de video y flujo de audio requerido.

Usa el verificador empaquetado después de la exportación:

node /path/to/remotion-production/scripts/verify-render.mjs out/video.mp4 --expect-duration 35 --expect-width 1920 --expect-height 1080 --expect-video-codec h264 --require-audible-audio

Trata una salida parcial o fallida como inválida incluso si existe un archivo en el destino.

8. Preparar la copia de publicación cuando se solicite

Basa las indicaciones de portada y las descripciones de video en la composición final, el sujeto verificado, los puntos de enseñanza, el estilo visual, la duración y la audiencia. Entrega estos productos directamente en la conversación del usuario. No crees archivos de indicaciones o descripciones, no llames a una herramienta de generación de imágenes ni generes una imagen de portada a menos que el usuario solicite explícitamente esas acciones.

Sigue references/publishing-copy.md. Haz que el resultado esté listo para copiar, sea conciso para la plataforma de destino y esté escrito en el idioma del usuario.

Estándar de finalización

No declares la finalización hasta que:

• la animación se derive deterministamente de los fotogramas;
• los límites del sujeto permanezcan completos y visualmente estables a lo largo del bucle;
• las coordenadas explicativas se actualicen con el fotograma de sprite renderizado;
• los cortes de escena nunca expongan artefactos transparentes o de tablero de ajedrez;
• los activos multimedia se carguen sin handle de renderizado perdidos;
• un renderizado completo tenga éxito con una concurrencia estable;
• el archivo exportado tenga la duración esperada, los flujos de audio/video requeridos y audio no silencioso cuando se solicite música.
• las escenas de portada y final solicitadas se verifiquen visualmente en su estado completo, los límites de transición y el fotograma final;
• la obra de arte de portada independiente incluya su propio fondo opaco y coincida con la jerarquía del video;
• las indicaciones de portada y las descripciones de publicación solicitadas reflejen con precisión el video final y se entreguen directamente en la conversación.

Informa la ruta de salida, el comando de renderizado, el resultado de la verificación y cualquier concurrencia reducida intencionalmente.