Gráfico animado, construído em código
Três prompts a partir de uma página em branco: construa, revise, exporte.
Antes de começar: leia brand.md e MOTION.md se existirem. Caso contrário, execute brand-intake primeiro, ou peça códigos hexadecimais, uma fonte e um arquivo de logotipo. Nunca chame um resultado de "on-brand" sem eles.
Passo 1: Peça os números, depois aguarde
O título, os rótulos, os valores exatos e se são resultados reais ou dados amostrais. Dados amostrais recebem um rótulo "Dados ilustrativos" em cada quadro. Nunca arredonde, reformate ou adicione um número.
Prompt 1: construa
Quero um gráfico animado para uma postagem no LinkedIn. Construa como um único arquivo HTML que eu possa abrir no navegador.
Título: "[TÍTULO]". [Se dados amostrais: mantenha "Dados ilustrativos" visível.]
Valores: [RÓTULO 1: VALOR 1], [RÓTULO 2: VALOR 2], ...
A animação tem quatro estados:
1. Início: [como aparece primeiro].
2. Mudança: [a única coisa que se move]. Nada desaparece e é substituído.
3. Pausa: o gráfico finalizado, com [o valor de destaque] rotulado.
4. Retorno: volta suavemente ao início, para que o loop não tenha salto.
Tempo: 8 segundos no total. Cerca de 2 segundos para a mudança, 4 de pausa, 1,5 para retornar.
Aparência: fundo [BG], texto [TEXT], destaque [ACCENT], [FONTE]. Sem fontes ou imagens externas. Sem gradientes, brilho ou quicar.
Tamanho: 1080 x 1350 pixels.
Regras para a construção:
- Calcule cada quadro apenas a partir do tempo. Adicione window.seek(segundos).
- O título, rótulos e eixos nunca se movem. Apenas o gráfico muda.
- O último quadro deve corresponder exatamente ao primeiro.
Após construir, tire capturas de tela em 0, 1, 2, 4 e 7 segundos. Verifique se há texto sobreposto ou algo cortado. Corrija o que encontrar e me diga o que mudou.
Prompt 2: revise
Inspecione os cinco quadros capturados e o limite do loop. Verifique se os valores permanecem os mesmos, os rótulos são legíveis, nada se sobrepõe e cada elemento aparece apenas quando deveria. Relate apenas problemas que você realmente observar. Corrija qualquer um que encontrar, preserve a versão anterior e capture os mesmos quadros novamente. Se nenhum problema for encontrado, diga e não invente uma revisão.
Prompt 3: exporte
Agora transforme isso em um vídeo e um GIF que eu possa postar. Use ferramentas já instaladas neste computador. Se precisar de algo que não está instalado, pare e me diga o que é antes de instalar qualquer coisa. Me dê um MP4 (1080 x 1350, 8 segundos) e um GIF que faça loop infinito. Depois me mostre três quadros do GIF finalizado para que eu possa verificar se ficou correto.