106.9K+Baixar
Ir para o guia de uso
Whiteboard Animationpor iart-ai

Whiteboard Animation Skill.

Crie explicações SVG desenhadas em cena com uma mão segurando um marcador seguindo cada traço.

  • Quadro branco
  • Vídeo explicativo
Baixar OpenDesignVer guia de uso
Análise da fonte · whiteboard-animationSKILL.md
Tarefa Crie explicações SVG desenhadas em cena com uma mão segurando um marcador seguindo cada traço. Entregáveis Cena independente de desenho em HTML ou composição de vídeo solicitada. Antes de começar Traga ordem de desenho, arte linear e mão com ponta identificável. Inclua timing da narração se o desenho seguir a fala; escolha explicitamente prévia HTML ou entrega em vídeo.
Resumo editorial · fonte revisada em 2026-11-02 · não é um exemplo gerado

01 Funcionalidades

Crie explicações SVG desenhadas em cena com uma mão segurando um marcador seguindo cada traço

Crie cenas de quadro branco com traços ordenados, ponta de caneta calibrada, timing de narração e inspeção visual em tempos exatos.

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

A abordagem de trabalho

whiteboard-animation cria a ilusão de uma mão desenhando diagrama ou legenda. Traços SVG aparecem em ordem enquanto a imagem do marcador segue a ponta atual. A posição da mão e o caminho revelado compartilham o mesmo progresso e podem ser inspecionados juntos em um instante exato.

A fonte distingue cena curta no navegador de exportação narrada. A cena independente usa um HTML e timeline com navegação temporal; o filme completo leva a mesma mecânica a uma composição guiada por quadros. Ordem dos traços, levantamentos da caneta e timing da narração fazem parte do design.

Entregas esperadas

  • Cena independente de desenho em HTML ou composição de vídeo solicitada.
  • Traços SVG ordenados e recurso de mão com marcador calibrado.
  • Evidência em quadros congelados da mão durante o traço e do quadro concluído.
Ver o briefing de exemplo

Do briefing à revisão

  1. 01
    Prepare arte desenhável

    Converta a ilustração em traços abertos numa ordem plausível. Dê às regiões preenchidas contornos que apareçam antes da cor.

  2. 02
    Vincule a ponta ao traço

    Meça o deslocamento da ponta no recurso da mão; mova-a pelo mesmo progresso da revelação. Levante a mão entre caminhos separados.

  3. 03
    Sequencie e inspecione

    Alinhe os desenhos aos beats da narração e congele no meio de um traço. Confira ponta, conclusão final, layout e transições entre seções.

02 Quando usar

Quando usar

Traga ordem de desenho, arte linear e mão com ponta identificável. Inclua timing da narração se o desenho seguir a fala; escolha explicitamente prévia HTML ou entrega em vídeo.

Bom encaixe

  • Diagrama deve se revelar enquanto é explicadoO desenho sequencial foca a relação atual, sem mostrar todo o quadro de uma vez.
  • Escrita manual faz parte do efeitoA fonte cobre caminhos de glifos e revelações na ordem de leitura.

Limites a verificar

  • Arte preenchida não é automaticamente desenhávelForma composta sólida precisa de preparação para revelação convincente traço a traço.
  • Exportação narrada acrescenta pipelineO exemplo web de arquivo único não produz sozinho MP4 com voz.

Traga estas entradas

  • Conteúdo ordenadoForneça ilustrações, rótulos e sequência de desenho pretendida.
  • Recurso da mãoForneça ou aprove imagem de mão com marcador cuja ponta possa ser medida.
  • Narração e destinoInclua voz ou roteiro temporizado, tamanho de quadro e formato de saída.

03 Decisões importantes

Decisões importantes

  1. Ponta de desenho convincente

    Progresso compartilhado impede a mão de avançar à frente da linha visível.

  2. Ordem intencional de traços

    Levantamentos e elementos sequenciais mantêm a ação fisicamente compreensível.

  3. Intermediários inspecionáveis

    Um quadro no meio do traço revela falhas que desaparecem em velocidade normal.

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

Forneça ilustrações, rótulos e sequência de desenho pretendida.

Arquivo-fonte original
https://github.com/iart-ai/explainer-video-skills/blob/3e2d411b725d9a72939cf8e5eb81579e751373e7/skills/whiteboard-animation/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 whiteboard-animation para explicar três etapas de cadastro com meus desenhos lineares e narração. Revele uma etapa por vez na ordem falada, com a mesma mão segurando um marcador. Prepare caminhos abertos e calibre a ponta para ficar na extremidade ativa. Oculte preenchimentos até concluir contornos e levante a mão entre desenhos. Entregue prévia HTML independente com busca por tempo exato e quadro completo como estado de movimento reduzido. Inspecione início, meio de um traço de cada etapa e quadro final antes de propor exportação narrada.

Inspecione o resultado

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

  • Congele no meio do traço e confirme a ponta sobre a extremidade desenhada.
  • Confira levantamentos, ordem dos caminhos e preenchimento após contorno.
  • Verifique traços finais completos e quadro estático legível para movimento reduzido.

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
iart-ai
Repositório
iart-ai/explainer-video-skills
Arquivo da skill
SKILL.md
Licença
MIT
Versão revisada
2026-11-02 · 3e2d411b725d
Resumo editorial da fonte
Crie explicações SVG desenhadas em cena com uma mão segurando um marcador seguindo cada traço.

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

Posso animar SVG preenchido diretamente?

A fonte exige traços desenháveis ou contornos preparados. Silhueta preenchida sozinha não dá o caminho que o marcador seguiria.

Como a mão permanece alinhada?

O mecanismo amostra o caminho no mesmo progresso de stroke-dashoffset e subtrai da posição da mão o deslocamento medido da ponta.

Inclui narração?

Pode planejar desenho conforme a narração. Um vídeo com voz incorporada exige a rota guiada por quadros, não somente a prévia HTML.

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/iart-ai/explainer-video-skills/blob/3e2d411b725d9a72939cf8e5eb81579e751373e7/skills/whiteboard-animation/SKILL.md