106.9K+Baixar
Ir para o guia de uso
Motion Canvaspor VideoZero

Motion Canvas Skill.

Escreva cenas Motion Canvas com generators, sinais reativos e nós reutilizáveis.

  • TypeScript
  • Animação em canvas
Baixar OpenDesignVer guia de uso
Análise da fonte · motion-canvasSKILL.md
Tarefa Escreva cenas Motion Canvas com generators, sinais reativos e nós reutilizáveis. Entregáveis Código de cena Motion Canvas usando a configuração existente do projeto. Antes de começar Traga um projeto Motion Canvas existente, sua versão instalada e um briefing com a ordem das ações. Decida quais valores serão sinais compartilhados e quais momentos exigem eventos nomeados.
Resumo editorial · fonte revisada em 2026-11-02 · não é um exemplo gerado

01 Funcionalidades

Escreva cenas Motion Canvas com generators, sinais reativos e nós reutilizáveis

Crie cenas Motion Canvas com timing por generators, sinais reativos, referências de nós, formas e transições explícitas.

Fluxo de trabalho baseado na fonteNão é um benchmark de execução

A abordagem de trabalho

motion-canvas é uma referência do framework para escrever cenas Motion Canvas em TypeScript. Explica sequenciamento por generators, sinais reativos, referências e hierarquia da cena e mostra como combiná-los com formas, texto, paths e mídia.

A fonte inclui mecânicas práticas de estado e timing: salvar e restaurar nós, esperar eventos nomeados, executar threads de fundo e encerrar uma transição personalizada. É útil quando o agente já sabe a cena desejada e precisa dos conceitos corretos do framework para expressá-la.

Entregas esperadas

  • Código de cena Motion Canvas usando a configuração existente do projeto.
  • Sinais, componentes e sequências de timing reutilizáveis.
  • Um projeto pronto para seu fluxo configurado de prévia e renderização.
Ver o briefing de exemplo

Do briefing à revisão

  1. 01
    Defina os objetos da cena

    Crie formas e textos necessários, atribua referências e organize-os em uma hierarquia clara de nós.

  2. 02
    Conecte estado e timing

    Use sinais para valores mutáveis e funções generator para a sequência. Use all() para ações simultâneas e yield* para uma sequência que espera a animação terminar. Eventos nomeados waitUntil() podem alinhar a cena a uma deixa da narração.

  3. 03
    Verifique transições e saída

    Adicione os nós da cena de entrada antes de iniciar slideTransition(), evitando que surjam depois. Um useTransition() personalizado retorna uma função de encerramento que deve ser chamada após a animação da transição. Inspecione a prévia ou renderização configurada e preserve as configurações de saída do projeto.

02 Quando usar

Quando usar

Traga um projeto Motion Canvas existente, sua versão instalada e um briefing com a ordem das ações. Decida quais valores serão sinais compartilhados e quais momentos exigem eventos nomeados.

Bom encaixe

  • Uma animação por código precisa de sequência precisaGenerators e eventos nomeados explicitam a relação entre ações.
  • Vários objetos compartilham um valor mutávelSinais calculados derivam geometria de uma única fonte em vez de atualizar cada nó manualmente.

Limites a verificar

  • O framework precisa estar disponívelA skill é referência, não um runtime Motion Canvas funcional incluído.
  • É separada da automação do editorBusca temporal, capturas e controle HTTP de renderização pertencem à skill complementar motion-canvas-agent.
  • Exemplos exigem verificação no projetoA versão atual do framework e a configuração de saída devem orientar a adaptação dos exemplos.

Traga estas entradas

  • Briefing da cenaDescreva objetos visíveis, ordem das ações e explicação ou história.
  • Configuração do projetoForneça o código Motion Canvas atual e a versão instalada.
  • Timing e saídaEspecifique duração, eventos, tamanho do quadro e formato de renderização.

03 Decisões importantes

Decisões importantes

  1. Relações reativas na cena

    Um sinal calculado mantém dimensões dependentes sincronizadas.

  2. Sequenciamento legível

    O código generator torna esperas, ações paralelas e transições visíveis na fonte.

  3. Componentes reutilizáveis

    Nós personalizados e estados salvos apoiam elementos repetidos e ações reversíveis.

04 Exemplo de briefing

Experimente um briefing específico

O briefing de exemplo abaixo não foi testado. Verifique a configuração da skill antes de usá-lo.

Confira a fonte e a configuração

Descreva objetos visíveis, ordem das ações e explicação ou história.

Arquivo-fonte original
https://github.com/VideoZero/skills/blob/670ff96af6149f0ac8850380a466f073471e600c/motion-canvas/SKILL.md

A referência abaixo abre as instruções originais. Confira a configuração do repositório antes de usá-las; não é um comando de instalação.

Comece com um entregável

Adapte o escopo, o material de origem e as restrições deste briefing antes de executar a skill.

Briefing de exemplo
Use motion-canvas para criar no meu projeto existente uma cena curta de três pacotes passando por uma fila. Dê identidade estável a cada pacote e derive o espaçamento da fila de um sinal. Apresente rótulos antes da ação, mova pacotes sequencialmente e mantenha a contagem sincronizada ao estado visível. Use um evento nomeado para a pausa final de explicação. Preserve a versão instalada do framework e os ajustes atuais de renderização. Entregue o código e inspecione as transições de entrada e saída, especialmente objetos que só aparecem após o fim da transição.

Inspecione o resultado

Compare o resultado real com estes critérios observáveis.

  • Verifique relações entre sinais e referências estáveis de objetos.
  • Verifique ordem, threads de fundo e conclusão das transições.
  • Inspecione separadamente a prévia configurada e a saída realmente renderizada.

OpenDesign oferece um espaço de trabalho de design local para agentes de programação. Esta listagem não significa que a skill esteja incluída nem que suas ferramentas externas, credenciais e dependências de software estejam incluídas.

Baixar OpenDesignLer o guia rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão fixada da fonte vinculada abaixo. O comportamento e os requisitos upstream podem mudar.

Responsável pela fonte
VideoZero
Repositório
VideoZero/skills
Arquivo da skill
SKILL.md
Licença
Apache-2.0
Versão revisada
2026-11-02 · 670ff96af614
Resumo editorial da fonte
Escreva cenas Motion Canvas com generators, sinais reativos e nós reutilizáveis.

Resumo original de OpenDesign, baseado na fonte vinculada. As estrelas do repositório são um sinal de popularidade datado, não uso da skill nem nota de qualidade.

06 Perguntas antes de começar

Perguntas antes de começar

O que funções generator acrescentam?

Descrevem ações temporais por yields, esperas e operações de animação compostas. A fonte as usa como mecanismo principal de sequenciamento.

Para que servem sinais?

Sinais guardam valores mutáveis e derivam outros reativamente, como o tamanho de uma forma a partir de um raio compartilhado.

Inclui automação de capturas?

A referência cobre autoria de cenas. A skill complementar motion-canvas-agent documenta uma ponte HTTP de controle e capturas para um editor em execução.

OpenDesign

Mantenha o briefing e o trabalho de design juntos.

Mantenha seu briefing, o material de origem e o trabalho de design juntos em um espaço de trabalho local. Verifique a configuração da própria skill antes de adicioná-la ao seu fluxo de trabalho.

Baixar OpenDesignExplorar skills de design
Arquivo-fonte original
https://github.com/VideoZero/skills/blob/670ff96af6149f0ac8850380a466f073471e600c/motion-canvas/SKILL.md