Diagramas desenhados, animados ao entrar na tela
Princípio
Uma ideia por diagrama, escrita primeiro em uma frase. O desenho se traça uma vez quando entra na tela, na ordem em que é lido, e depois não se move mais. A tinta carrega a mensagem, o cinza carrega o resto, os rótulos estão sobre o desenho, não há legenda. Com "Reduzir animações", o desenho está simplesmente presente.
REQUIRED BACKGROUND: diagram-storytelling (redução a uma ideia, verbos nas setas, nós = estados). emil-design-eng para curvas e durações.
Quando não usar
- Um gráfico de dados (curva, barras numeradas): ferramenta de dataviz.
- Uma animação que toca em loop para mostrar um funcionamento em tempo real: protótipo animado, não diagrama.
- Um diagrama visto dezenas de vezes por dia em uma ferramenta: sem animação alguma.
Passo a passo
- A frase. Escrever a ideia em uma frase, com o sujeito que carregará a tinta ("três conceitos explorados, um protótipo selecionado"). Se a frase tiver duas ideias, fazer dois diagramas.
- O vocabulário. Copiar
reference/diagramMotion.tsereference/DiagramParts.tsxpara o projeto, se ainda não estiverem lá. Nunca redefinirPanel,Arrowhead, os tons ou os helpers localmente. - As palavras. Um arquivo de dados bilíngue (
en/fr):titleedescpara acessibilidade, depois cada rótulo. Um rótulo tem no máximo algumas palavras. Francês: acentos nas maiúsculas, espaço inseparável antes de ":", sem travessão. - A geometria.
viewBox="0 0 960 H"(H entre 300 e 400), coordenadas em constantes nomeadas, 60 px de margem à esquerda e à direita para os rótulos no final da linha (um rótulotextAnchor="end"em x = 54 é cortado). Mínimo doPanel: 720 (ele rola no telefone). - A ordem de leitura = a ordem dos atrasos. Cada elemento recebe um atraso em ms que segue a leitura: 0 para o que se lê primeiro, +200 a 300 ms por etapa, 40 a 110 ms entre os elementos de uma mesma série. A mensagem em tinta chega por último (1.500 a 2.300 ms). Duração total do traçado: 2 a 3 s.
- A verificação. Renderizar a página em localhost, rolar o diagrama para o centro, esperar 3 s, capturar o painel (
reference/shoot-diagrams.cjs, executar comNODE_PATH=<projeto>/node_modules). Olhar cada captura: rótulos cortados na borda, rótulo sob um bloco branco, dois rótulos lado a lado que se tocam. Corrigir, recapturar. Verificar também a 390 px.
Referência rápida
| Elemento | Helper | Valores |
|---|---|---|
| Linha, seta | draw(shown, delay, duration) em um path com pathLength={1} | 400 a 900 ms |
| Linha pontilhada | não pode ser traçada: rise (fade in) | |
| Bloco, rótulo | rise(shown, delay): sobe 8 px | 500 ms |
| Barra de tempo | grow(shown, delay, duration): cresce da esquerda | 500 a 800 ms |
| Moldura, lente | open(shown, delay): abre de 0,96 a 1 | 600 ms |
| Ponta de seta | <Arrowhead x y angle style={rise(...)}> logo após o draw | |
| Tons | INK #111827 mensagem, LINE #D1D5DB bordas, PALE #E5E7EB fundos, #6B7280 rótulos secundários, #9CA3AF o que é descartado | |
| Texto | título do nó 14 px 600, rótulo 11 a 13 px, nunca menor que 10 | |
| Curva | cubic-bezier(0.22, 1, 0.36, 1) (já nos helpers) |
Qualquer transformação CSS vai em um <g> envolvente, nunca em uma forma que tenha um transform SVG (isso o substituiria).
Formas por tipo de ideia
- Sequência que se afunila: nós em linha, leque de ramos, apenas um continua em tinta, os outros em
LINEcom "descartado". - Ritmo no tempo: eixo das semanas no topo, uma linha por ator, barras
grow, uma seta em tinta para a relação que importa. - Abertura depois convergência: uma lente (
opendepoisdrawdo contorno) acima de uma barra proporcional às durações. - Estados e transições: nós = estados (pontilhado para exploração, cinza para intermediário, tinta cheia para o que é gravado), setas rotuladas pelo verbo, acima da linha para não tocar os nós.
- Um objeto dividido em partes: o objeto à esquerda, cortes pontilhados, seta, as partes em cartões à direita, a primeira em tinta.
Um exemplo completo de cada forma: reference/exemple-TemplateDiagrams.tsx e suas palavras em reference/exemple-templateDiagramsData.ts.
Miniatura de um diagrama (cartão, lista)
O mesmo componente renderiza uma visão fixa e enquadrada para um cartão: thumb desativa o painel e a revelação, e o viewBox se torna um quadro de 520 × 400 (13:10, como a imagem dos cartões) centralizado na mensagem. Um quadro por diagrama, em FRAMES, verificado em captura a 350 px de largura: o texto permanece legível a partir de 11 px no desenho. Ver Drawing e TemplateDiagramThumb em reference/exemple-TemplateDiagrams.tsx.
Erros frequentes
| Erro | Correção |
|---|---|
| Adicionar um loop (bolinha que circula, estados que piscam) "para dar vida" | O traçado é o movimento. Um loop apenas se o tempo é o assunto do diagrama, apenas um, após o traçado, via useLoop |
| Cores de destaque, verde/vermelho para válido/recusado | Apenas tinta e cinza; um veredito se diz pela forma (cheio, pontilhado, descartado) ou por uma palavra |
| Legenda ao lado do desenho | As palavras estão sobre o desenho, perto do que nomeiam |
| Seta rotulada pelo nome da tela de destino | O verbo da transição ("validado", "não selecionado") |
| Rótulo centralizado entre dois nós com 60 px de distância | Ele transborda sobre os nós: colocá-lo acima da linha |
| Atrasos escolhidos pelo efeito | Atrasos que seguem a leitura, mensagem por último |
| Declarar finalizado sem captura | Capturar após rolagem e 3 s de espera, ler a captura |