Gráfico animado, programado en código
Tres instrucciones partiendo de una página en blanco: constrúyelo, haz que tenga buen aspecto, y expórtalo.
Antes de empezar: lee brand.md y MOTION.md si existen. Si no existen, ejecuta brand-intake primero, o solicita los códigos hexadecimales, una fuente y un archivo de logotipo. Nunca llames a un resultado «acorde a la marca» sin estos elementos.
Paso 1: Pide los números, luego espera
El título, las etiquetas, los valores exactos, y si son resultados reales o datos de muestra. Los datos de muestra llevan una etiqueta «Datos ilustrativos» en cada fotograma. Nunca redondees, reformatees ni agregues un número.
Instrucción 1: constrúyelo
Quiero un gráfico animado para una publicación de LinkedIn. Constrúyelo como un único archivo HTML que pueda abrir en mi navegador.
Título: "[TÍTULO]". [Si son datos de muestra: mantén visible «Datos ilustrativos».]
Valores: [ETIQUETA 1: VALOR 1], [ETIQUETA 2: VALOR 2], ...
La animación tiene cuatro estados:
1. Inicio: [cómo se ve al principio].
2. Cambio: [la única cosa que se mueve]. Nada se desvanece y es reemplazado.
3. Pausa: el gráfico terminado, con [el valor principal] etiquetado.
4. Retorno: regresa suavemente al inicio, para que el bucle no tenga salto.
Tiempo: 8 segundos en total. Aproximadamente 2 segundos para el cambio, 4 de pausa, 1,5 para el retorno.
Aspecto: fondo [FONDO], texto [TEXTO], acento [ACENTO], [FUENTE]. Sin fuentes ni imágenes externas. Sin degradados, sin resplandor, sin rebotes.
Tamaño: 1080 x 1350 píxeles.
Reglas para la construcción:
- Calcula cada fotograma solo a partir del tiempo. Añade window.seek(segundos).
- El título, las etiquetas y los ejes nunca se mueven. Solo cambia el gráfico.
- El último fotograma debe coincidir exactamente con el primero.
Después de construirlo, toma capturas de pantalla en los segundos 0, 1, 2, 4 y 7. Revísalas para detectar texto superpuesto o elementos recortados. Corrige lo que encuentres y dime qué cambiaste.
Instrucción 2: haz que tenga buen aspecto
Inspecciona los cinco fotogramas capturados y el límite del bucle. Verifica que los valores se mantienen igual, las etiquetas son legibles, nada se superpone y cada elemento aparece solo cuando debe. Reporta solo los problemas que observes realmente. Corrige los que encuentres, conserva la versión anterior y vuelve a capturar los mismos fotogramas. Si no encuentras problemas, dilo y no inventes una revisión.
Instrucción 3: expórtalo
Ahora convierte esto en un video y un GIF que pueda publicar. Usa herramientas ya instaladas en este ordenador. Si necesitas algo que no está instalado, detente y dime qué es antes de instalar nada. Dame un MP4 (1080 x 1350, 8 segundos) y un GIF que se repita para siempre. Luego muéstrame tres fotogramas del GIF terminado para que pueda comprobar que salió bien.