oil-motion
Ajuda seu agente a criar animações para web a partir de vídeos. Ele processa mídias e sequências de imagens para gerar efeitos de rolagem e arrasto.
O que ela faz
Esta ferramenta transforma suas ideias de animação em realidade para a web. Ela pega comandos de como você quer que algo se mova (como arrastar ou rolar) e cria animações que funcionam em sites.
Quando usar
- ✓Quando você quer criar animações interativas para um site.
- ✓Ao transformar um design estático em algo que se move com a interação do usuário.
- ✓Para gerar vídeos curtos ou sequências de imagens que respondem a ações.
Exemplo do que pedir para a IA
“Crie uma animação de um botão que se move quando o mouse passa por cima, para ser usada em um site.”
Quer saber mais? Abra as seções abaixo.
Como usar
O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.
Link da skill
Mensagem pronta para colar
Como funciona
A ferramenta analisa como você descreve a animação desejada e as interações (como arrastar ou rolar). Em seguida, ela usa scripts e controladores para gerar os arquivos de animação corretos para a web.
Instalação
Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.
No terminal (Claude Code, Codex, Cursor), na pasta do projeto:
npx skills add nexu-io/open-design --skill oil-motionOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/skills/oil-motion/SKILL.md -o SKILL.mdConteúdo técnico (SKILL.md)
Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.
Convenção do Host de Design Aberto
Estas são as habilidades funcionais na tarefa atual. Mantenha o tipo de tarefa selecionado pelo usuário, marca, pilha de tecnologia, estágio atual e formato de entrega; não altere para um projeto de vídeo devido à seleção de @. O estágio de planejamento apenas planeja, o estágio de implementação escreve código. Verificação, renderização e exportação só são executadas quando permitidas pelo estágio atual do host e as ferramentas estão realmente disponíveis; as habilidades não podem iniciar Agentes independentes adicionais, forçar aprovações ou contornar os limites de entrega do host.
Os arquivos anexados são lidos em relação ao diretório raiz do pacote de habilidades atual, lidos de acordo com o problema atual, sem colar todos os documentos de referência no prompt. Não leia a configuração global de outros Agentes. Materiais priorizam arquivos já existentes do usuário; ao precisar de novas imagens, vídeos ou áudios, use as ferramentas reais fornecidas pelo host atual e permitidas pelo usuário. Ao faltar capacidade de geração, medição ou exportação, descreva a lacuna específica, entregue partes verificáveis e não afirme ter concluído etapas não executadas. Siga o caminho de saída da tarefa atual, sem sobrescrever entradas ou artefatos históricos.
Movimento de Óleo
Converta a intenção de interação do usuário em materiais de animação aceitáveis, listas de linha do tempo e tempo de execução de página da web. A geração de IA é responsável por mudanças semânticas como membros, estrutura, materiais, oclusão, etc.; o programa é responsável pelo mapeamento de entrada, controle de reprodução, processamento de mídia e desempenho.
Este pacote de adaptação inclui scripts de processamento de mídia local e controladores de página da web. Antes de executar scripts Python, verifique Python 3.10+, FFmpeg / ffprobe com suporte -fps_mode, Pillow, NumPy, PyYAML; se faltarem dependências, instale apenas em um ambiente isolado da tarefa de acordo com scripts/requirements.txt, sem modificar o ambiente global. O processamento puramente local não requer chave de API.
Antes de executar os comandos de referência, defina OIL_MOTION para o diretório de habilidades carregado nesta ocasião:
OIL_MOTION="<本次 SKILL.md 所在绝对目录>"
A geração de imagem/vídeo é delegada às ferramentas existentes do host. Este pacote não inclui serviços de geração upstream, Keychain ou páginas de configuração de credenciais; não tente chamá-los.
Quatro Fontes Únicas de Verdade
Cada informação é salva em um único local, outros arquivos a referenciam, sem duplicação:
source/concept-contract.yaml: Objetos, visuais, interações e continuidade explicitamente solicitados pelo usuário.source/motion-brief.yaml: Quadros-chave, segmentos e cronogramas de produção derivados do contrato.build/timeline.json: Taxa de quadros real do filme, limites de parágrafo, quadros congelados e curvas de reprodução.build/motion-budget.json: Resultados da seleção automática do formato de entrega e do controlador de tempo de execução.
Fluxo Principal
1. Bloqueio da Intenção do Usuário
Quando o usuário tem um objetivo vago, leia primeiro references/concepts.md, apresentando no máximo três direções verdadeiramente distintas; quando os requisitos já estiverem claros, escreva diretamente o Contrato de Conceito.
Quando for necessária inspiração de casos externos, leia references/motion-patterns.md de acordo com o propósito da expressão. Primeiro, distinga quais mudanças pertencem ao material em si, quais são apenas orquestração de contêineres ou estado de UI, apenas os primeiros entram no fluxo de geração.
subject_count: <number>
subjects:
- identity: <可验证的身份或外观锚点>
style: <用户原词>
motion_intent: <动作及视觉结果>
background_owner: video | page
scene: <背景属于视频时的场景、镜头和光线要求>
driver: scroll | pointer | drag | touch | orientation | audio | data | state | time
input_semantics: continuous | step | event
time_control: scrub | segment-play | autonomous
navigation: continuous | paged | none
clip_continuity: chain | independent
continuity: [<必须保持不变或连续的内容>]
aspect_ratio: 16:9 | 9:16 | 1:1 | 21:9 | custom
destination: <页面位置、最大显示尺寸和目标设备>
Regras de Julgamento:
aspect_ratioretirado do contêiner real dedestination: tela cheia horizontal ou Hero geralmente é16:9, tela cheia vertical é9:16, cartões, avatares e outras janelas quadradas são1:1; não presuma1:1sem confirmação. Quando a proporção do contêiner e a proporção de geração não corresponderem, escreva a estratégia de corte ou preenchimento no contrato. Após o bloqueio, o tamanho do quadro-chave, a moldura do vídeo e a saída de compilação usam a mesma proporção, consulte references/prompting.md para a correspondência de tamanho.scrub: O valor de entrada corresponde continuamente à posição da linha do tempo, e a imagem para na posição atual quando a entrada para.segment-play: A entrada seleciona o próximo estado, o segmento é reproduzido no tempo em seguida; a entrada reversa deve retrair da imagem atual, não trocar de fonte e cortar abruptamente.autonomous: A animação é impulsionada pelo tempo, a interação apenas é responsável por iniciar, pausar ou alternar estados.navigationdescreve apenas como a página se move, não como o vídeo é reproduzido; páginas paginadas também podem usar uma linha do tempo contínua.- Use
background_owner: videoquando a continuidade de lentes, luz ambiente, sombras de contato, profundidade de campo ou fundo for importante. Usepageapenas quando o objeto principal precisar ser transparente para ser reutilizado no fundo da página. - O conteúdo que o usuário já esclareceu é registrado diretamente, sem reescrita ou expansão. Se um item em falta afetar a capacidade de geração, o resultado aceitável ou a rota de produção, ele deve ser preenchido primeiro.
2. Estabelecimento do Cronograma de Produção
O Motion Brief salva apenas o cronograma derivado, sem duplicar os campos do contrato:
concept_contract: source/concept-contract.yaml
identity_bible: source/identity-bible.md | null
parameter_space: linear | circular | 2d | discrete
media_access: sequential | random
gesture_policy:
unit: continuous | one-gesture-one-step
inertia: coalesce | preserve
while_active: retarget | queue | ignore
boundary: clamp | loop
programmatic_navigation: ignore | observe
storyboard: <有序视觉阶段>
keyframes: <K0…Kn>
clip_chain: <每段使用的相邻关键帧>
rest_state: <初始及失去输入时的状态>
loop: open | closed | none
anchor: fixed-body | center | bottom | free
scene_continuity: <仅背景属于视频时填写>
frame_policy: native | interpolate
target_fps: <由源素材和运行时需求决定>
quality_target: <分辨率、DPR 和文件预算>
pixel_dimensions: <宽x高,由合同的 aspect_ratio 与 DPR 派生>
reduced_motion: <静态替代状态>
parameter_space descreve a linha do tempo do material, não o layout da página: linear é uma linha do tempo com início e fim, circular é um loop fechado, 2d é amostragem bidimensional, discrete são estados não contínuos. Não comprima 2D ou estados desordenados em um único vídeo linear.
O critério de escolha entre frame_policy e target_fps pode ser encontrado em references/optimization.md.
O conjunto completo de deslocamento, escala, rotação, corte e mapeamento de tempo é realizado pelo programa; as mudanças de articulação, estrutura, material, contato e oclusão são realizadas pelo modelo de geração. Se apenas mover a imagem inteira não mantiver a naturalidade, gere a ação completa, sem adicionar patches CSS.
3. Seleção Automática de Entrega e Tempo de Execução
No estágio em que o host permite a execução de ferramentas, execute motion_budget.py --strict com o número de quadros, tamanho de exibição e espaço de parâmetros do cronograma no Brief, passando explicitamente background_owner e time_control do contrato, salve build/motion-budget.json. O Pilot monta isso na página real de acordo com este resultado; mudanças posteriores no número de quadros ou tamanho serão reavaliadas. Os scripts retornam separadamente:
delivery.selected:baked-video | chroma-video | alpha-atlas.runtime.controller:frame-scrub | segment-playback | autonomous-playback.
A seleção de formato e o método de reprodução são duas coisas diferentes e não devem ser inferidas uma da outra. A ordem dos comandos e decisões pode ser encontrada em references/delivery-selection.md. Leia apenas uma rota de mídia de acordo com o resultado:
alpha-atlas: references/alpha-atlas.mdchroma-video: references/chroma-video.mdbaked-video: references/baked-video.md
4. Produção de Quadros-Chave
- Quando houver personagens ou for necessária consistência de identidade, escreva primeiro a Bíblia de Identidade.
- Gere e aceite
K0…Kn; cada segmento é responsável por apenas uma mudança semântica principal, o segmentoiusaKi → Ki+1. Aoclip_continuity: chain, o primeiro quadro a partir do segundo segmento usa o quadro final real aceito do segmento anterior, e o quadro final ainda é o quadro-chave planejado. - Gere quadros-chave usando as ferramentas de imagem disponíveis do host: passe o tamanho de acordo com
aspect_ratioe verifique a proporção real relatada pelo script; o tamanho deve cobrir pelo menos o tamanho máximo de CSS multiplicado pelo DPR alvo. Use--imagecomo entrada de referência para produtos reais, personagens estabelecidos ou o quadro-chave anterior, não apenas com base em descrições textuais.
…
Perguntas frequentes
Preciso saber programar para usar isso?
Não, você descreve o que quer em linguagem natural e a ferramenta cuida da parte técnica.
Que tipos de interação ela suporta?
Ela suporta interações como arrastar, rolar, apontar o mouse e até mesmo dados ou tempo, dependendo de como você descreve.
Posso usar minhas próprias imagens ou vídeos?
Sim, a ferramenta prioriza o uso de seus arquivos existentes e só gera novos materiais quando necessário e permitido.
Detalhes
Descrição original do autor
处理视频和序列帧,编译滚动、指针、拖动与状态驱动的网页动效;内含本地媒体处理脚本和运行时。新素材生成使用宿主工具。
repo: nexu-io/open-design
Popularidade
- Estrelas no GitHub
- 101 mil
- Posição no ranking
- #747
- Licença
- Apache-2.0
- Atualizada em
- 16/10/2026
Comentários
- …
Mais skills deste repositório
sample-plugin
Faz seu agente criar um arquivo de metadados para testes. Ele ajuda a garantir que o código funcione corretamente em diferentes situações.
nexu-io/open-design
aster-atelier
Ajuda seu agente a criar um site artístico com visual clássico. Ele usa imagens elegantes, céus azuis e fontes serifadas para um visual cinematográfico.
nexu-io/open-design
audio-jingle
Faz seu agente gerar áudio como jingles e efeitos sonoros. Ele pode criar músicas e vozes, salvando o resultado em um arquivo de áudio.
nexu-io/open-design
blog-post
Ajuda seu agente a escrever artigos longos ou posts de blog. Ele inclui espaços para imagens, citações e informações do autor.
nexu-io/open-design
Skills parecidas
blender-motion-state-inspection
Permite inspecionar detalhes de animações em 3D. É útil para verificar poses, movimentos e o alinhamento de personagens em animações.
affaan-m/ECC
manim-video
Faz seu agente criar vídeos explicativos animados. Ele usa o Manim para gerar gráficos e diagramas claros para conceitos técnicos.
affaan-m/ECC
remotion-video-creation
Orienta seu agente na criação de vídeos usando React com a biblioteca Remotion. Ele cobre boas práticas para animações, áudio, legendas e outros elementos visuais.
affaan-m/ECC