vibe-motion/remotion-code-motion-explainer

Remotion Code Motion Explainer

Construye una explicación abstracta como un sistema visual continuo y editable. Muestra cómo cada concepto cambia en lugar de decorar la narración con movimiento no relacionado.

Creado por Bingo (@DWCD-Bingo) y mantenido bajo la organización Vibe Motion.

Carga la guía relevante

• Lee references/code-motion-design.md para cada producción.
• Lee references/motion-production-patterns.md para cada producción.
• Lee references/production-and-qc.md antes de la implementación y la entrega final.
• Lee references/ui-motion-shot-library.md para trabajos de interfaz de usuario, producto, flujo de trabajo de IA, enfoque neón, forma de onda, panel de control, herramienta de diseño o trabajo de alta fidelidad.
• Lee references/reference-reconstruction.md al estudiar o reproducir un video de referencia, render de After Effects, prototipo o grabación de pantalla.
• Usa assets/shot-library como biblioteca de inicio editable incluida. Busca en assets/shot-library/shot-library.json antes de diseñar una nueva toma. Copia la biblioteca en el proyecto de destino cuando un componente reutilizable coincida con el trabajo semántico; no edites la habilidad instalada en su lugar.
• Consulta la documentación instalada de Remotion o la habilidad de mejores prácticas antes de usar APIs desconocidas.

Establece el contrato de producción

1. Resuelve el guion o explicación aprobados, estado de la narración, autoridad de subtítulos, relación de aspecto, fotogramas por segundo, duración, sistema de marca, hechos técnicos y formato de entrega.
2. Trata los subtítulos verificados por humanos como autoridad de tiempo cuando exista narración. Si no hay narración, crea una línea de tiempo explícita de ritmos y diseña el video para que sea comprensible sin sonido.
3. Usa solo recursos proporcionados por el usuario, bajo licencia, de dominio público o claramente redistribuibles.
4. Nunca inventes comportamiento de productos, datos numéricos, relaciones científicas o resultados de interacción.
5. Prefiere un sistema visual parametrizado en lugar de escenas codificadas de una sola vez.

Ejecuta el flujo de trabajo

1. Convierte el lenguaje en estados visuales

• Divide la explicación en ritmos semánticos a nivel de cláusula.
• Para cada ritmo, registra:
  • narración o declaración en pantalla;
  • propósito narrativo;
  • estado de entrada;
  • verbo dominante;
  • transformación visible;
  • estado de salida;
  • enfoque del espectador;
  • transferencia al siguiente ritmo.
• Compila sustantivos, acciones, números, relaciones y cambios de estado en actores visuales independientes.
• Identifica objetos persistentes que sobreviven a través de los ritmos.
• Elige la representación precisa más simple: interfaz de usuario, flujo, diagrama, forma de onda, fórmula, gráfico, modelo espacial o 3D.
• Escribe el plan en src/data/choreography-plan.json.

Puerta: cada declaración tiene un trabajo de razonamiento visible, ejecutor, resultado y transferencia.

2. Bloquea el sistema visual

• Define la cuadrícula, área segura, espaciado, tipografía, semántica de color, profundidad, cámara y curvas de movimiento.
• Escribe una oración de ángulo de concepto que describa el mundo visual.
• Diseña fotogramas estáticos representativos para el gancho, el mecanismo más complejo y el final.
• Construye el fotograma héroe de máxima información antes de diseñar las entradas.
• Crea un registro de objetos persistentes y un plano de coordenadas del mundo.
• Descompone objetos complejos en partes móviles significativas en lugar de animar capturas de pantalla planas.
• Mantén los conceptos idénticos visualmente consistentes en todo momento.

Puerta: los fotogramas estáticos se leen como un sistema y el fotograma complejo se puede ensamblar a partir de componentes editables.

3. Implementa movimiento determinista en Remotion

• Conduce la animación desde useCurrentFrame(), interpolate(), spring() y rangos de fotogramas explícitos.
• No uses transiciones CSS, keyframes CSS, valores aleatorios sin determinismo con semilla, o animación del navegador con temporización independiente.
• Mantén los valores parametrizados a través de props y esquemas Zod cuando sea útil.
• Prefiere React, SVG y HTML. Usa Canvas, WebGL o Three.js solo cuando el concepto lo requiera.
• Mide texto, limita rangos, valida entradas numéricas y evita efectos secundarios dependientes del fotograma.
• Mantén los objetos persistentes montados y muta su estado a través de los ritmos.
• Compón de dos a cuatro átomos de movimiento compatibles en cada ventana de revisión de cuatro a seis segundos.
• Dale a cada ventana fases de configuración, acción, resultado visible y transferencia.
• Congela cada hijo dependiente del tiempo desde el mismo fotograma de visualización cuando el final deba mantenerse.

Puerta: el renderizado es determinista, editable, técnicamente preciso y estable en fotogramas arbitrarios.

4. Preserva la continuidad y la causalidad

• Reutiliza posición, identidad de objeto, escala, máscaras, dirección y motivos de audio a través de las transiciones.
• Transforma o transfiere un elemento significativo antes de introducir el siguiente.
• Usa movimientos de cámara solo para revelar jerarquía o relación.
• Evita reinicios repetidos de pantalla completa con fundido y escala.
• Mantén al menos un invariante visual en ritmos adyacentes a menos que un reinicio de capítulo sea deliberado.
• Haz legible la causa y el efecto: la entrada se mueve, el proceso reacciona, la salida se vuelve visible y la cámara revela el sistema más grande.

Puerta: el video silencioso sigue siendo comprensible como una explicación continua.

5. Vincula narración, etiquetas y sonido

• Dispara etiquetas, valores, estados y retroalimentación de interacción en señales de subtítulos exactas.
• Mantén la narración claramente dominante sobre la música y los efectos.
• Usa ticks, impactos, barridos y acentos tonales moderados solo para eventos visibles.
• Crea un mapa de eventos de audio junto con el plan de movimiento.
• Termina la música y el movimiento con una resolución intencional en lugar de un corte abrupto.

6. Revisa, renderiza y aprende

• Renderiza primero el gancho, el mecanismo más complejo, los estados de ecuaciones/datos, las transiciones y el final.
• Inspecciona los fotogramas de entrada, punto medio, máxima información, transferencia y mantenimiento.
• Revisa ventanas de movimiento contiguas y sus superposiciones, no solo capturas de pantalla aisladas.
• Crea una hoja de contactos que cubra toda la línea de tiempo.
• Verifica el mantenimiento del fotograma final comparando dos fotogramas tardíos píxel por píxel.
• Revisa recorte de texto, áreas seguras, contraste de color, corrección de forma de onda/datos, recursos faltantes, picos de audio, duración, fotogramas por segundo y códec.
• Guarda evidencia de revisión en qc/workflow-evidence.json.
• Registra correcciones y componentes reutilizables en qc/production-learning.json.

Puerta: el renderizado completo pasa verificaciones semánticas, de continuidad, causalidad, composición, temporización, técnicas y de licencias.

Rechazar

Rechaza interacciones inexactas, datos inventados, movimiento arbitrario, etiquetas ilegibles, diagramas de proceso aplanados, reinicios de diapositivas genéricas, desajuste de narración/subtítulos, recursos sin licencia, rutas personales codificadas, renderizado no determinista, revisión de ventana de movimiento faltante, verificaciones de mantenimiento de fotograma final omitidas, o copias de referencia con marca presentadas como plantillas reutilizables.

Entregar

Devuelve el video final, el proyecto editable de Remotion, la línea de tiempo, los parámetros de componentes, los recursos de entrada aprobados, las pistas de audio cuando se usen, la hoja de contactos, la evidencia de QC y una lista breve de componentes reutilizables.

Ejemplos incluidos

• assets/showcase/code-motion-promo-30s.mp4: video promocional de 30 segundos de capacidad.
• assets/showcase/ac-to-dc-explainer.mp4: ejemplo de explicación científica.
• assets/shot-library: biblioteca de tomas editable de Remotion y catálogo buscable.