Dashboard pronto em HTML: personalize os dados e crie uma animação com Claude Motion

A notícia sobre Claude Dashboards e Motion pode virar um projeto de programação. Aqui você recebe um dashboard de vendas feito pela Central Stack em HTML, CSS e JavaScript, com filtros, gráfico, tabela e arquivos para levar os resultados a uma animação.

O projeto funciona gratuitamente no navegador com dados fictícios. O painel é um exemplo independente que você pode editar. O recurso Claude Dashboards, apresentado na notícia, tem seus próprios conectores e regras de acesso. Para a etapa de animação, usamos o Claude Motion; você também pode entregar o mesmo roteiro a um profissional de motion design.

Você pode abrir a demonstração pelo link acima ou baixar o ZIP, extrair todos os arquivos em uma pasta e abrir index.html no navegador. Para editar, abra a pasta no VS Code. Este exemplo usa scripts comuns e não precisa de Node.js, instalação de pacotes ou chave de API.

Selecione setembro de 2026 e Sudeste. O resultado esperado é receita de R$ 46.000,00, 200 pedidos, ticket médio de R$ 230,00 e uma região. Limpe os filtros: o total passa a R$ 258.000,00, 1.350 pedidos e ticket médio de R$ 191,11. Esses valores ajudam a conferir se o projeto está funcionando.

dashboard-vendas/
  index.html       → estrutura da página
  style.css        → aparência e adaptação ao celular
  dados.js         → números fictícios de vendas
  dashboard.js     → filtros, cálculos, gráfico e downloads
  README.md        → instruções para usar e editar
  LICENSE          → licença MIT do código do exemplo

O HTML contém os campos de seleção, os quatro indicadores, um SVG para o gráfico e uma tabela. Os rótulos dos campos e os cabeçalhos da tabela tornam os dados compreensíveis também para quem navega com tecnologias assistivas. O CSS organiza os cards em uma grade e muda o layout em telas menores.

O JavaScript lê dados.js, preenche os filtros e recalcula os resultados quando uma seleção muda. Para construir a tabela, ele cria elementos e preenche textContent. Assim, o nome de uma região é tratado como texto. O gráfico utiliza os mesmos registros da tabela, em vez de manter uma segunda lista de valores.

Os scripts abaixo já estão no HTML do projeto. defer faz sua execução ocorrer depois que a estrutura da página foi lida, mantendo a ordem entre o arquivo de dados e o código que usa esses dados.

<link rel="stylesheet" href="./style.css">
<script defer src="./dados.js"></script>
<script defer src="./dashboard.js"></script>

Em dados.js, cada linha representa um mês e uma região. Use mes no formato AAAA-MM, receita como número em reais e pedidos como número inteiro. Não coloque R$, pontos de milhar ou vírgula decimal dentro do valor: R$ 12.500,50 vira 12500.50. Ao editar, salve o arquivo e recarregue o navegador.

Comece alterando apenas um registro. Depois, experimente adicionar uma nova região em outro mês e veja o filtro aparecer. O exemplo valida os campos: receitas negativas, meses inválidos ou receita positiva sem pedidos interrompem o painel e exibem uma mensagem. Mantenha uma linha por combinação de mês e região para evitar somar o mesmo registro duas vezes.

O ticket médio é a receita total dividida pelo total de pedidos. Calcular a média dos tickets de cada linha daria o mesmo peso a regiões com quantidades diferentes de pedidos. O código soma valores monetários em centavos e arredonda o ticket final para duas casas.

window.CENTRALSTACK_DASHBOARD_DATA = [
  { mes: '2026-09', regiao: 'Sudeste', receita: 46000, pedidos: 200 },
  { mes: '2026-09', regiao: 'Sul', receita: 26000, pedidos: 130 },
];

const receitaTotal = linhas.reduce(
  (total, linha) => total + Math.round(linha.receita * 100), 0
) / 100;
const pedidosTotal = linhas.reduce((total, linha) => total + linha.pedidos, 0);
const ticketMedio = pedidosTotal
  ? Math.round(receitaTotal / pedidosTotal * 100) / 100
  : 0;

O arquivo dados.js fica visível para qualquer pessoa que abrir o site. Para este exercício, use dados fictícios. Dados reais exigem autorização de uso e uma arquitetura adequada de acesso. Ao trocar a fonte, atualize também os rótulos de dados fictícios no projeto e nos arquivos exportados.

Exportar dados (JSON) gera dados-dashboard.json com filtros, indicadores, receita por mês e os registros selecionados. Exportar roteiro (TXT) gera roteiro-motion.txt com esses mesmos números e um pedido de animação. As duas opções usam os filtros atuais. Um recorte sem registros desabilita os downloads.

O código cria um Blob com o conteúdo do arquivo, gera um endereço temporário com URL.createObjectURL e aciona o download. Depois, libera esse endereço com URL.revokeObjectURL. Nenhum dado é enviado a um servidor por esses botões.

Antes de seguir, abra o JSON em um editor e compare receitaTotal, pedidosTotal e ticketMedio com os cards. No roteiro, confira o período e a região. Essa revisão evita apresentar uma animação do trimestre inteiro quando você queria mostrar apenas setembro.

Em 9 de outubro de 2026, Claude Motion está em beta nos planos Team e Enterprise; no Enterprise, um responsável precisa habilitar o recurso. A geração consome o limite do plano. O dashboard deste tutorial continua funcionando sem essa assinatura.

Abra uma conversa no Claude e escolha Output > Motion, ou abra o modelo Motion em Artifacts. Cole o conteúdo de roteiro-motion.txt e, se necessário, anexe o relatório. O guia oficial orienta enviar conteúdo próprio e informar público, duração e contexto. A passagem dos dados é manual; este projeto não conecta uma API do Motion.

O roteiro gerado propõe 30 segundos em três cenas: contexto do recorte, receita mensal e resumo dos indicadores. Ele pede que os números sejam preservados e que a indicação de dados fictícios permaneça visível. Se você trabalha com um motion designer, envie o TXT e o JSON como briefing e base para conferir os valores.

Use o relatório anexado para uma animação de 30 segundos,
em português, para estudantes de programação.
Cena 1: apresente o mês e a região selecionados.
Cena 2: anime a receita por mês, com valores em reais.
Cena 3: mostre receita total, pedidos e ticket médio.
Mantenha "DADOS FICTÍCIOS" visível.
Preserve os números; não invente crescimento ou projeções.

Pause a animação e compare cada número com o JSON exportado. Confira os rótulos, a unidade BRL, a legibilidade no celular e a soma dos valores. No Claude Motion, peça ajustes na conversa e use Export > MP4 para baixar o resultado.

Para colocar sua animação no projeto, salve o arquivo como animacao.mp4 ao lado de index.html e adicione o trecho abaixo antes do footer. O arquivo só existe depois da sua exportação. O exemplo usa controles e não inicia a reprodução sozinho. O texto abaixo do vídeo mantém os principais resultados disponíveis para leitura.

<section class="panel" aria-labelledby="video-title">
  <h2 id="video-title">Resumo animado das vendas</h2>
  <video controls playsinline preload="metadata" width="640">
    <source src="./animacao.mp4" type="video/mp4">
    Seu navegador não conseguiu reproduzir o vídeo.
    <a href="./animacao.mp4">Baixar a animação</a>.
  </video>
  <p>Dados fictícios de setembro/2026, Sudeste:
    R$ 46.000,00 de receita, 200 pedidos e ticket médio de R$ 230,00.</p>
</section>

video {
  display: block;
  max-width: 100%;
  height: auto;
}

Adapte o resumo textual aos filtros usados na sua exportação. Se a animação tiver narração, forneça também legendas e uma transcrição. Para publicar o dashboard, envie todos os arquivos da pasta; o vídeo pode aumentar bastante o tamanho do projeto.

Depois de entender os cálculos, você pode trocar a lista fixa por uma API que forneça somente os dados permitidos ao visitante. Isso exige uma camada de servidor, tratamento de erros e regras de acesso. O tutorial abaixo ensina a base de uma API com Node.js para continuar esse estudo.