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

Chart Animation Skill.

Renderize gráficos de dados com valores exatos e movimento controlado por quadros.

  • Animação de dados
  • Gráficos
Baixar OpenDesignVer guia de uso
Análise da fonte · chart-animationSKILL.md
Tarefa Renderize gráficos de dados com valores exatos e movimento controlado por quadros. Entregáveis Uma composição de gráfico Remotion controlada por quadros. Antes de começar O fluxo da fonte depende do Remotion e dos pacotes de gráficos ou escalas escolhidos.
Resumo editorial · fonte revisada em 2026-11-02 · não é um exemplo gerado

01 Funcionalidades

Renderize gráficos de dados com valores exatos e movimento controlado por quadros

Crie vídeos de gráficos com valores por quadro, contadores legíveis, transições de classificação e verificação dos dados antes de exportar no Remotion.

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

A abordagem de trabalho

chart-animation cria gráficos em movimento cujos números e geometria vêm do quadro atual do vídeo. Separa a escala que mapeia dados em pixels da interpolação que transforma quadros em valores variáveis. Essa distinção importa quando o temporizador próprio da biblioteca de gráficos diverge do renderizador offline.

O fluxo documentado usa Remotion para renderizar e mantém os conjuntos de dados nas props de entrada. Abrange barras crescentes, contadores, revelação de linhas e sequências de classificação. Rótulos exatos, unidades e valores finais são conferidos em imagens estáticas renderizadas antes de codificar um vídeo ou repetir o design com vários conjuntos de dados.

Entregas esperadas

  • Uma composição de gráfico Remotion controlada por quadros.
  • Um MP4 e entradas reutilizáveis de dados e tema.
  • Imagens estáticas representativas para conferir rótulos, posições e valores.
Ver o briefing de exemplo

Do briefing à revisão

  1. 01
    Valide o mapeamento dos dados

    Identifique campo de tempo, séries, unidades e intervalo de valores. Registre a composição Remotion com esquema de entrada e props padrão, mantendo os dados separados do tema. Quando o número de linhas definir a duração, calcule-a por calculateMetadata para que outro conjunto não mantenha a duração do vídeo anterior.

  2. 02
    Controle mudanças pelos quadros

    Calcule valores e posições pelo relógio de quadros. Desative loops concorrentes da biblioteca de gráficos e formate os valores exibidos depois de arredondá-los.

  3. 03
    Inspecione antes de codificar

    Renderize imagens do início, do meio e do fim com as props reais da entrega. Confira números exatos, mudanças de posição, rótulos e escala antes de renderizar o MP4 completo.

02 Quando usar

Quando usar

O fluxo da fonte depende do Remotion e dos pacotes de gráficos ou escalas escolhidos.

Bom encaixe

  • Os dados precisam continuar exatos no vídeoUse em gráficos em que um dígito errado ou mapeamento incorreto de coluna alteraria a mensagem.
  • Um design de gráfico atende a muitos conjuntos de dadosProps validadas e configurações compartilhadas de tema permitem renderizações repetidas a partir do mesmo projeto-fonte.

Limites a verificar

  • Precisa de um ambiente de renderizaçãoO fluxo da fonte depende do Remotion e dos pacotes de gráficos ou escalas escolhidos.
  • A animação não valida a narrativaOs dados e sua interpretação precisam ser fornecidos e verificados; barras suaves não demonstram que a métrica tem significado.

Traga estas entradas

  • Registros estruturadosForneça CSV ou JSON com identidades claras das séries e campos de tempo.
  • Definições das métricasEspecifique unidades, arredondamento, rótulos e eventos que mereçam uma pausa.
  • Objetivo do vídeoInforme duração, proporção, taxa de quadros e tamanho de visualização previsto.

03 Decisões importantes

Decisões importantes

  1. Valores determinísticos

    Ir ao mesmo quadro exibe os mesmos dados, não um estado dependente de temporizador.

  2. Contadores legíveis

    Formatação e algarismos tabulares mantêm os números variáveis estáveis na tela.

  3. Verificações representativas do lote

    Um conjunto real pode revelar defeitos de mapeamento ou layout antes que sejam copiados para muitos arquivos.

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 CSV ou JSON com identidades claras das séries e campos de tempo.

Arquivo-fonte original
https://github.com/iart-ai/data-animation-skills/blob/8ce2709c3992490251e8a991535b1945f01c6865/skills/chart-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 chart-animation para criar um vídeo de classificação de 15 segundos com meu CSV de vendas mensais. Mantenha exatamente os cinco nomes de produtos e os valores de receita fornecidos, com a moeda visível. Faça uma breve pausa inicial, anime as mudanças de classificação, pause na primeira troca de liderança e mantenha o resultado final por tempo suficiente para leitura. Controle valores e posições pelo quadro do vídeo, com identidades estáveis das séries e algarismos tabulares. Antes de codificar, renderize imagens representativas usando as props reais derivadas do CSV. Entregue o MP4, a composição reutilizável e uma nota que identifique as colunas utilizadas.

Inspecione o resultado

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

  • Compare rótulos renderizados, unidades e valores finais com os registros fornecidos.
  • Confira o movimento interpolado da classificação e rótulos fora do canvas.
  • Confirme as props de entrada reais, a duração final e o vídeo decodificado.

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/data-animation-skills
Arquivo da skill
SKILL.md
Licença
MIT
Versão revisada
2026-11-02 · 8ce2709c3992
Resumo editorial da fonte
Renderize gráficos de dados com valores exatos e movimento controlado por quadros.

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 usar D3?

A fonte usa D3 para escalas e formas, deixando o tempo sob controle do renderizador de vídeo. Transições D3 ou outros relógios independentes não devem controlar os quadros exportados.

Por que inspecionar imagens estáticas antes do vídeo?

Uma imagem estática facilita identificar valores incorretos, colunas trocadas e rótulos cortados. A fonte exige verificações com o conjunto de dados real da entrega.

Pode renderizar vários arquivos CSV?

O padrão documentado passa cada conjunto como props para uma composição. Valide um conjunto representativo antes de ampliar para o lote.

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/data-animation-skills/blob/8ce2709c3992490251e8a991535b1945f01c6865/skills/chart-animation/SKILL.md