Pular para o conteúdo
Skillpedia
Motion e animação101 mil · #747

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

https://github.com/nexu-io/open-design/blob/main/skills/oil-motion/SKILL.md

Mensagem pronta para colar

Use esta skill para me ajudar: https://github.com/nexu-io/open-design/blob/main/skills/oil-motion/SKILL.md Leia o arquivo SKILL.md desse link e siga as instruções dele na minha tarefa.
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-motion

Ou baixe só o arquivo:

curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/skills/oil-motion/SKILL.md -o SKILL.md
Conteú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:

  1. source/concept-contract.yaml: Objetos, visuais, interações e continuidade explicitamente solicitados pelo usuário.
  2. source/motion-brief.yaml: Quadros-chave, segmentos e cronogramas de produção derivados do contrato.
  3. build/timeline.json: Taxa de quadros real do filme, limites de parágrafo, quadros congelados e curvas de reprodução.
  4. 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_ratio retirado do contêiner real de destination: tela cheia horizontal ou Hero geralmente é 16:9, tela cheia vertical é 9:16, cartões, avatares e outras janelas quadradas são 1:1; não presuma 1:1 sem 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.
  • navigation descreve 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: video quando a continuidade de lentes, luz ambiente, sombras de contato, profundidade de campo ou fundo for importante. Use page apenas 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:

4. Produção de Quadros-Chave

  1. Quando houver personagens ou for necessária consistência de identidade, escreva primeiro a Bíblia de Identidade.
  2. Gere e aceite K0…Kn; cada segmento é responsável por apenas uma mudança semântica principal, o segmento i usa Ki → Ki+1. Ao clip_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.
  3. Gere quadros-chave usando as ferramentas de imagem disponíveis do host: passe o tamanho de acordo com aspect_ratio e 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 --image como 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

Essa skill é útil?

0

Entre para votar.

Comentários

  • …

Mais skills deste repositório

Skills parecidas