# 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.

## 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](https://github.com/oil-oil/oil-motion) - 2692 estrellas; GitHub identifica MIT. Último commit consultado: 2026-10-04.
- [README en inglés](https://github.com/oil-oil/oil-motion/blob/HEAD/README.en.md) - alcance, requisitos y ejemplos.
- [Skill](https://github.com/oil-oil/oil-motion/blob/HEAD/SKILL.md) - instrucciones y referencias técnicas.
- [Licencia](https://github.com/oil-oil/oil-motion/blob/HEAD/LICENSE) - términos MIT.