Repolode
Enviar
oil-oil

oil-oil/oil-motion

Uma skill de agente para Claude Code e Codex que transforma movimentos gerados por IA em animações web controladas por scroll, mouse, arraste, toque ou orientação do dispositivo.

Ver no GitHub
Estrelas
2,632
Forks
197
Issues abertas
1
Último commit
há 16 dias

O que é?

Oil Motion é uma skill independente de agente para criar animações web interativas. Ela planeja o movimento, gera quadros contínuos com modelos de vídeo de IA, revisa e corta os quadros, compacta os assets para o tamanho em que serão exibidos na página e associa scroll, ponteiro, arraste, toque ou orientação do dispositivo ao progresso da animação.

O fluxo de trabalho começa confirmando quadros-chave, como os estados inicial, intermediário e final, para manter a identidade e a estrutura do objeto consistentes. Em seguida, o vídeo gerado por IA preenche o movimento entre eles, enquanto deslocamento, escala, recorte, easing e velocidade de rotação são controlados pelo código. O resultado é uma sequência de quadros ou um vídeo preparado que o navegador percorre ou reproduz em resposta à interação, sem gerar nada novamente durante a interação.

Os assets podem ser entregues como MP4 pré-renderizado, sprite sheets WebP com alpha ou MP4 com tela verde e chroma key via WebGL, conforme as necessidades de tamanho, transparência e reprodução. A geração usa o ZenMux para modelos de imagem e vídeo e requer uma API key armazenada no cofre de credenciais do sistema.

Recursos principais

  • 01Planeja primeiro os quadros-chave para manter o objeto consistente ao longo do movimento gerado.
  • 02Associa scroll, mouse, arraste, toque ou orientação do dispositivo ao progresso da animação.
  • 03Corta pausas, remove quadros duplicados e sinaliza flicker ou mudanças estruturais.
  • 04Compacta os assets com base no tamanho em que serão realmente exibidos na página.
  • 05Oferece formatos de entrega em MP4 pré-renderizado, sprite sheets WebP com alpha e MP4 com tela verde.
  • 06Armazena a API key do ZenMux no cofre de credenciais do sistema.

Casos de uso

  • Páginas de produtos em que um dispositivo se desdobra em uma vista explodida conforme o usuário rola a página.
  • Rostos de personagens ou mascotes que acompanham o cursor durante interações de hover.
  • Visualizações 360° de produtos controladas por arraste.
  • Narrativas controladas por scroll que percorrem várias cenas de vídeo conectadas.

Tópicos

#agent-skill#web-animation#scroll-animation#frontend#ai-video#interaction#motion-design#agent-skills#animation#claude-code

Perguntas frequentes

O que é oil-motion?
Uma skill de agente para Claude Code e Codex que transforma movimentos gerados por IA em animações web controladas por scroll, mouse, arraste, toque ou orientação do dispositivo. Oil Motion é uma skill independente de agente para criar animações web interativas. Ela planeja o movimento, gera quadros contínuos com modelos de vídeo de IA, revisa e corta os quadros, compacta os assets para o tamanho em que serão exibidos na página e associa scroll, ponteiro, arraste, toque ou orientação do dispositivo ao progresso da animação.
oil-motion é gratuito? Qual é a licença?
oil-motion é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
oil-motion ainda é mantido?
Manutenção ativa. O último commit de oil-motion foi em 4 de out. de 2026.
Para que posso usar oil-motion?
Páginas de produtos em que um dispositivo se desdobra em uma vista explodida conforme o usuário rola a página. Rostos de personagens ou mascotes que acompanham o cursor durante interações de hover. Visualizações 360° de produtos controladas por arraste. Narrativas controladas por scroll que percorrem várias cenas de vídeo conectadas.
Onde consigo oil-motion?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/oil-oil/oil-motion

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados