Oil Motion: animaciones web que siguen el scroll y el cursor

Convierte imágenes o vídeo en una animación web que responde al scroll, al cursor o al arrastre. Tu agente prepara los fotogramas y los integra en la página.

✓ verificado el 26 oct 2026

Instrucciones para tu agente

Esto es lo que se copia. Pégaselo a tu agente y te lo monta paso a paso.

O ábrelo directamente en

Claude

ChatGPT

Pega este texto a tu agente (Claude Code, Codex, OpenCode, Hermes o el que uses) y dile «ayúdame a montarlo». Son los pasos para ponerlo en marcha; el porqué de cada pieza está en la guía completa.

Dificultad: avanzado
Proyecto: https://github.com/oil-oil/oil-motion (licencia MIT)
Guía completa: https://lab.wisd.ai/hub/oil-motion

Para el agente: cómo acompañar al usuario

Pregunta primero para qué lo quiere. Si su objetivo no necesita algún paso, sáltalo.
Antes de instalar, comprueba lo que ya tiene (versiones, claves, sistema operativo).
Avanza un paso cada vez: explica en una frase qué vas a hacer y deja que el usuario lo ejecute o lo apruebe.
Tras cada paso, comprueba que funcionó antes de seguir. Si falla, para y explica el error.
No inventes comandos ni opciones: si la documentación del proyecto contradice estos pasos, manda la documentación.
Al terminar, haz una prueba real con el objetivo del usuario y dile dónde profundizar.

Pasos de configuración

Paso 1: instala la skill

Comprueba que tienes Node.js ≥22.20.0 con npm/npx (mínimo de la CLI skills) para instalar la skill. Si vas a procesar material, comprueba Python ≥3.10 y FFmpeg antes de continuar. Desde el entorno de tu agente, usa el comando del README:

npx skills add oil-oil/oil-motion

Recarga las skills del agente. Antes de generar material, comprueba Node.js ≥22.18 y un almacén de credenciales del sistema disponible; el autor solo ha probado ese mecanismo en macOS. Consulta el README.

Paso 2: define una prueba pequeña

Adjunta las imágenes y explica qué objeto puede cambiar, qué debe conservarse y qué gesto controla la animación. Pide primero una secuencia breve montada en la página real. Un prompt posible:

Usa oil-motion para mostrar cómo se abre este producto al bajar por la página. Conserva su forma y su logotipo. Prepara primero un prototipo breve y una alternativa estática para móvil.

Paso 3: configura la generación si hace falta

Sigue el flujo local que abre la skill para configurar ZenMux. Introduce la clave en esa interfaz, sin pegarla al chat. Revisa el prototipo antes de generar el resto; las solicitudes tienen coste. Si solo procesas material existente, no necesitas generar imágenes nuevas.

Comprobación

Prueba avance y retroceso rápidos, carga inicial y tamaño real en móvil. Comprueba que la anatomía o estructura permanece estable y que la página muestra una imagen estática cuando los recursos no cargan o se reduce el movimiento.

Si algo falla

Si el sujeto cambia de forma, revisa los estados inicial e intermedio antes de repetir la generación. Si el problema es de carga, revisa el presupuesto y el formato con las referencias técnicas. El mecanismo de configuración de credenciales solo está verificado por el autor en macOS.

Qué es

Oil Motion es una skill para producir recursos visuales interactivos con ayuda de un agente. Trabaja sobre imágenes y vídeo: prepara una secuencia y conecta su reproducción con lo que hace la persona en la página.

Para qué te sirve

Cuando quieres mostrar cómo se desmonta un producto mientras el visitante baja por una página.
Cuando un personaje debe mirar hacia el cursor sin generar un vídeo nuevo en cada movimiento.
Cuando ya tienes una secuencia o un vídeo con fondo verde y necesitas adaptarlo a una interacción web.

Cómo funciona

El agente fija primero los estados que debe atravesar el sujeto. Después genera o procesa los fotogramas intermedios, revisa la continuidad y ajusta los recursos al tamaño real de presentación. La interacción controla una secuencia ya preparada; el navegador no consulta al modelo con cada gesto.

La skill contempla atlas WebP con transparencia y vídeo MP4, con distintas estrategias según el fondo, el acceso a los fotogramas y el presupuesto del dispositivo. El flujo incluye un prototipo en la página real antes de producir todos los tramos.

Antes de empezar

Para procesar material existente, el README pide Python 3.10+ y FFmpeg. La generación usa ZenMux por defecto y tiene coste por solicitud. Su configuración local requiere Node.js 22.18+ y un almacén de credenciales del sistema; el autor solo confirma la prueba de ese mecanismo en macOS.

Las imágenes de referencia y los prompts se envían a los proveedores durante la generación. Elige material que puedas enviarles.

Límites y alternativas

Un fallo en la estructura de un objeto o en una extremidad puede exigir volver a generar las imágenes. La compresión no lo corrige. Para transiciones de botones o cambios de distribución, el propio proyecto recomienda CSS, JavaScript, SVG, Lottie o 3D en tiempo real.

Comprueba la carga en móvil, las inversiones rápidas del gesto y la alternativa estática para quienes reducen el movimiento. Esta skill se centra en interacción web, no en editar una pieza de vídeo independiente.

Recursos

Repositorio - 2692 estrellas; GitHub identifica MIT. Último commit consultado: 2026-10-04.
README en inglés - alcance, requisitos y ejemplos.
Skill - instrucciones y referencias técnicas.
Licencia - términos MIT.