X Motion

¿Qué hace X Motion?

Crea movimiento que comunique algo específico. El gusto es contextual: una demostración técnica silenciosa y un identificativo musical exuberante requieren decisiones diferentes. Un renderizador capaz no es garantía de buen diseño. El trabajo obtiene su calidad a través de la dirección de arte, la ejecución, la observación y la revisión.

Este es un método original y portátil de diseño de movimiento, inspirado en la discusión sobre el agente de diseño en el artículo de LangChain. No depende del código o servicios de LangChain, y no implica afiliación alguna.

Contrato de trabajo

• Sigue las instrucciones del proyecto anfitrión y el alcance real del usuario. Esta habilidad no otorga permiso para publicar, gastar, llamar a modelos, obtener credenciales o usar activos sin licencia.
• Utiliza una tesis visual y un punto focal dominante en un momento dado. La complejidad puede apoyar la tesis; no debe competir accidentalmente con ella.
• Diseña el tipo, el espaciado, el tratamiento de imagen, el movimiento y el sonido como un solo sistema. No decores una idea débil para aparentar sofisticación.
• Elige las herramientas para el trabajo y el entorno disponible. No se requiere un modelo, framework o motor de renderizado en particular.
• Separa la evidencia técnica del juicio estético. Nunca inventes una puntuación de gusto, reacción de la audiencia o aprobación. Nunca afirmes haber visto un video cuando solo se inspeccionaron sus fotogramas fijos.
• Mantén los activos locales y su procedencia explícita. Fija las dependencias. Mantén los renders generados fuera del control de versiones, a menos que el proyecto los requiera deliberadamente.

Elige el proceso más pequeño útil

Edición pequeña: una corrección de copia, ajuste de tiempo, intercambio de activo o arreglo de easing aislado puede omitir un nuevo brief, storyboard y animática. Preserva la dirección aprobada; inspecciona el compás afectado y sus vecinos, vuelve a renderizar y ejecuta las verificaciones relevantes. Escala al proceso completo si el cambio altera el mensaje, la jerarquía o la narrativa.

Nueva composición o rediseño sustancial: sigue las etapas a continuación. Escala los artefactos según la tarea; un título de seis segundos no necesita una biblia de producción. Si falta una intención crucial, haz una pregunta enfocada. Cuando no haya preguntas disponibles, etiqueta una suposición conservadora y evita trabajo irreversible.

1. Brief → tesis visual

Establece la audiencia, el mensaje deseado, el contexto de visualización, la duración, la relación de aspecto, los entregables, el texto/activos requeridos, las restricciones de marca, las necesidades de accesibilidad y si el sonido puede transmitir significado. Marca los requisitos estrictos por separado de las preferencias.

Escribe una tesis en este formato:

Para [audiencia], haz que [idea] se sienta [cualidad específica] a través de [mecanismo visual], para que comprendan o hagan [resultado].

Nombra la metáfora organizadora, el sujeto dominante, el rol tipográfico y la lógica de movimiento. Una lista como "premium, cinematográfico, limpio" no es una dirección. Explica qué elecciones hacen tangibles esas palabras. Usa referencias para identificar principios, no para reproducir la identidad de otro trabajo.

Lee Dirección de arte para la resolución del brief, el análisis de referencias y un lenguaje visual coherente.

2. Storyboard → argumento legible

Planifica los compases antes de pulir los fotogramas. Para cada compás, registra:

Rango de tiempo	Qué aprende el espectador	Punto focal / fotograma clave	Transición y motivo	Señal de audio
Inicio–fin	Un mensaje	Sujeto y jerarquía	Qué cambia y por qué	Evento o silencio deliberado

Dibuja o renderiza fotogramas representativos con texto real y proporciones de activos realistas. Dale suficiente tiempo a la lectura y al reconocimiento; no distribuyas cada compás uniformemente por costumbre. Confirma la promesa inicial, los vínculos causales entre los compases y el mensaje final. Valida el texto o la dirección crítica con el humano cuando sea necesario antes de la producción costosa.

Lee Tipografía antes de fijar la composición o el tiempo del texto.

3. Animática → probar el tiempo de forma económica

Construye fotogramas temporizados aproximados, bloques o movimiento de bajo detalle. Usa sonido temporal solo cuando sea legal y esté claramente etiquetado. Prueba la duración completa a la velocidad prevista, no solo desplazándote.

Verifica si la atención llega a donde está la información, si el texto se puede leer y si el final tiene espacio para asentarse. Arregla la estructura aquí. Saca a la superficie la incertidumbre sobre la dirección en lugar de pulirla.

Lee Animación y cámara para el diseño temporal y la construcción de escenas deterministas; lee Audio cuando el sonido sea parte de la pieza.

4. Producción → ejecución intencional

Refina los compases aprobados con la tipografía final, los activos, el tratamiento de iluminación o gráfico, las curvas de movimiento, las transiciones y el sonido. Preserva la tesis. Cada efecto añadido debe tener un trabajo: revelar, conectar, enfatizar, orientar o resolver. Si no hace nada de esto, elimínalo o justifica su función expresiva.

Contrato opcional del renderizador HTML

Cuando se utiliza el renderizador HTML de X Motion, cada composición expone:

window.motion = { width: 1920, height: 1080, duration: 8, fps: 30, poster: 5.5 };
window.renderFrame = function (tSeconds) {
  // Establece cada propiedad animada a partir de esta marca de tiempo y los datos fijos de la escena.
  // Las llamadas repetidas, incluyendo llamadas fuera de orden, producen el mismo fotograma.
};
window.renderAudio = async function ({ sampleRate }) {
  // Opcional. Construye la partitura en un OfflineAudioContext y devuelve su AudioBuffer.
};

Estos números son ilustrativos, no valores predeterminados de diseño. Width y height están en píxeles; duration, poster y tSeconds están en segundos; fps es la tasa de fotogramas. poster es opcional y nombra el fotograma utilizado como miniatura. Ajústalos al brief.

• Calcula el estado directamente a partir de la marca de tiempo proporcionada. Sin tiempo de pared, animaciones CSS autónomas, pasos de simulación acumulativos, activos de red o aleatoriedad sin semilla.
• Carga y decodifica los activos y fuentes locales antes de la captura. No introduzcas mutaciones asíncronas de fotogramas después de que renderFrame devuelva; verifica el mecanismo de preparación del renderizador anfitrión.
• Define el comportamiento en los límites de los compases y más allá del intervalo activo. Prueba marcas de tiempo repetidas y búsquedas hacia atrás.
• La función de fotograma define los visuales, no la reproducción de audio. El sonido proviene únicamente de renderAudio: uno o dos canales, renderizado sin conexión, idéntico en cada llamada. La reproducción de medios HTML nunca se captura.

Resuelve primero la ubicación real de este directorio de skill, siguiendo cualquier enlace simbólico de instalación hasta el clon completo de X Motion. La raíz del repositorio está en ../.. en relación con ese directorio skills/x-motion resuelto, no en relación con el directorio de trabajo actual del usuario. Cambia a esa raíz del repositorio antes de ejecutar estos comandos; las rutas de composición a continuación son relativas a ella.

Exporta PNGs del storyboard y manifest.json (sin video por defecto). Añade --times 0.5,2,4.25 para elegir los fotogramas fijos y --audio para exportar también sound.wav con cifras de sonoridad:

node scripts/render.mjs path/to/scene.html --out renders/name-storyboard --audio

Exporta PNGs del storyboard, fotogramas completos, poster.webp, film.mp4 (con la partitura multiplexada como AAC cuando exista renderAudio) y manifest.json:

node scripts/render.mjs path/to/scene.html --out renders/name-video --video

Usa un directorio de salida nuevo para cada revisión. Inspecciona manifest.json y las salidas reales antes de reportar éxito: registra una verificación de determinismo de fotogramas, una verificación de determinismo de audio, sonoridad integrada, pico verdadero y muestras recortadas. La codificación de video requiere ffmpeg. En otro anfitrión, preserva la semántica de marca de tiempo determinista y adapta el comando de exportación.

5. Crítica → revisión → entrega

Cuando la retroalimentación nombre un ID de video publicado, lee Retroalimentación de galería. Resuelve la película exacta, preserva su identidad y la retroalimentación, y publica las revisiones bajo nuevos IDs enlazados. Transfiere las lecciones acotadas, no cada instrucción específica de un clip como regla universal.

Inspecciona los artefactos renderizados, no solo el código fuente. Ve el storyboard para la composición y reproduce el video para el ritmo; escucha el audio exportado cuando esté presente. Si la reproducción o la escucha no están disponibles, indica exactamente qué queda sin revisar.

Usa Crítica y entrega para separar los fallos medibles de las preocupaciones subjetivas. Aborda primero el problema de mayor impacto. Limita el ciclo de crítica/revisión a tres iteraciones por dirección. Si la dirección sigue sin resolverse, detente, explica las preocupaciones en conflicto y pide al humano que elija o aclare antes de continuar. Una aprobación técnica no es una aprobación estética.

Entrega la ubicación del artefacto, la ubicación del código fuente, las especificaciones de exportación, la evidencia de verificación, las limitaciones conocidas y las preguntas de aprobación no resueltas. Reporta lo que realmente observaste. No publiques externamente sin autorización.

Mapa de referencias

Carga solo las referencias necesarias para la etapa actual:

• Dirección de arte: intención, gusto, referencias, tesis visual.
• Animación y cámara: tiempo, puesta en escena, transiciones, renderizado determinista.
• Tipografía: jerarquía, tipo cinético legible, manejo de fuentes.
• Audio: mapas de señales, sincronización, silencio, comprobaciones de exportación.
• Crítica y entrega: evidencia, revisión acotada, traspaso.
• Retroalimentación de galería: IDs inmutables, retroalimentación de chat, mantener/mejorar/descartar y aprendizaje acotado.