dibujo-de-diagramas-animados

Diagramas dibujados y animados al entrar en pantalla

Principio

Una idea por diagrama, escrita primero en una frase. El dibujo se traza una vez cuando entra en la pantalla, en el orden en que se lee, y luego no se mueve. La tinta lleva el mensaje, el gris lleva el resto, las etiquetas están sobre el dibujo, no hay leyenda. Con «Reducir animaciones», el dibujo está simplemente ahí.

REQUIRED BACKGROUND: diagram-storytelling (reducción a una idea, verbos en las flechas, nodos = estados). emil-design-eng para curvas y duraciones.

Cuándo no usarlo

• Un gráfico de datos (curva, barras numeradas): herramienta de dataviz.
• Una animación que se reproduce en bucle para mostrar un funcionamiento en tiempo real: prototipo animado, no diagrama.
• Un diagrama visto decenas de veces al día en una herramienta: sin animación en absoluto.

Procedimiento

1. La frase. Escribir la idea en una frase, con el sujeto que llevará la tinta («tres conceptos explorados, un prototipo seleccionado»). Si la frase tiene dos ideas, hacer dos diagramas.
2. El vocabulario. Copiar reference/diagramMotion.ts y reference/DiagramParts.tsx en el proyecto si no están. Nunca redefinir Panel, Arrowhead, los tonos o los helpers localmente.
3. Las palabras. Un archivo de datos bilingüe (en/es): title y desc para accesibilidad, luego cada etiqueta. Una etiqueta tiene como máximo unas pocas palabras. Español: acentos en mayúsculas, espacio duro antes de «:», sin guión largo.
4. La geometría. viewBox="0 0 960 H" (H entre 300 y 400), coordenadas en constantes con nombre, 60 px de margen a izquierda y derecha para etiquetas al final de línea (una etiqueta textAnchor="end" en x = 54 queda cortada). Mínimo del Panel: 720 (se desplaza en teléfono).
5. El orden de lectura = el orden de los retrasos. Cada elemento recibe un retraso en ms que sigue la lectura: 0 para lo que se lee primero, +200 a 300 ms por paso, 40 a 110 ms entre elementos de una misma serie. El mensaje en tinta llega al final (1500 a 2300 ms). Duración total del trazado: 2 a 3 s.
6. La verificación. Renderizar la página en localhost, desplazar el diagrama al centro, esperar 3 s, capturar el panel (reference/shoot-diagrams.cjs, ejecutar con NODE_PATH=<proyecto>/node_modules). Revisar cada captura: etiquetas cortadas en el borde, etiqueta bajo un bloque blanco, dos etiquetas una al lado de la otra que se tocan. Corregir, recapturar. Verificar también a 390 px.

Referencia rápida

Elemento	Helper	Valores
Línea, flecha	draw(shown, delay, duration) en un path con pathLength={1}	400 a 900 ms
Línea punteada	no se puede trazar: rise (fundido)
Bloque, etiqueta	rise(shown, delay): sube 8 px	500 ms
Barra de tiempo	grow(shown, delay, duration): crece desde la izquierda	500 a 800 ms
Marco, lente	open(shown, delay): se abre de 0,96 a 1	600 ms
Punta de flecha	<Arrowhead x y angle style={rise(...)}> justo después del draw
Tonos	INK #111827 mensaje, LINE #D1D5DB bordes, PALE #E5E7EB fondos, #6B7280 etiquetas secundarias, #9CA3AF lo descartado
Texto	título de nodo 14 px 600, etiqueta 11 a 13 px, nunca más pequeño que 10
Curva	cubic-bezier(0.22, 1, 0.36, 1) (ya en los helpers)

Toda transformación CSS va en un <g> envolvente, nunca en una forma que tenga un transform SVG (lo reemplazaría).

Formas por tipo de idea

• Secuencia que se estrecha: nodos en línea, abanico de ramas, solo una continúa en tinta, las demás en LINE con «descartado».
• Ritmo en el tiempo: eje de semanas arriba, una línea por actor, barras grow, una flecha en tinta para la relación que importa.
• Apertura y luego convergencia: un lente (open luego draw del contorno) sobre una barra proporcional a las duraciones.
• Estados y transiciones: nodos = estados (punteado para exploración, gris para intermedio, tinta sólida para lo grabado), flechas etiquetadas con el verbo, sobre la fila para no tocar los nodos.
• Un objeto dividido en partes: el objeto a la izquierda, cortes punteados, flecha, las partes como tarjetas a la derecha, la primera en tinta.

Un ejemplo completo de cada forma: reference/exemple-TemplateDiagrams.tsx y sus palabras en reference/exemple-templateDiagramsData.ts.

Miniatura de un diagrama (tarjeta, lista)

El mismo componente renderiza una vista fija y encuadrada para una tarjeta: thumb desactiva el panel y la revelación, y el viewBox se convierte en un marco de 520 × 400 (13:10, como la imagen de las tarjetas) centrado en el mensaje. Un marco por diagrama, en FRAMES, verificado en captura a 350 px de ancho: el texto sigue siendo legible desde 11 px en el dibujo. Ver Drawing y TemplateDiagramThumb en reference/exemple-TemplateDiagrams.tsx.

Errores frecuentes

Error	Corrección
Añadir un bucle (punto que circula, estados que parpadean) «para que tenga vida»	El trazado es el movimiento. Un bucle solo si el tiempo es el tema del diagrama, uno solo, después del trazado, mediante useLoop
Colores de acento, verde/rojo para válido/rechazado	Solo tinta y gris; un veredicto se expresa por la forma (sólido, punteado, descartado) o por una palabra
Leyenda al lado del dibujo	Las palabras están sobre el dibujo, cerca de lo que nombran
Flecha etiquetada con el nombre de la pantalla de destino	El verbo de la transición («validado», «no seleccionado»)
Etiqueta centrada entre dos nodos separados 60 px	Se desborda sobre los nodos: colocarla sobre la fila
Retrasos elegidos por efecto	Retrasos que siguen la lectura, mensaje al final
Declarar terminado sin captura	Capturar después del desplazamiento y 3 s de espera, leer la captura