Um passo a passo das decisões criativas, técnicas e de produto por trás de transformar a jornada de um programa de longevidade num mapa de metrô navegável. Reaproveitável — copie o que servir.
A maioria dos onboardings clínicos é um checklist, uma timeline ou um fluxograma. Todos dizem "faça isto, depois aquilo". Nenhum mostra como os exames conversam entre si.
Programas de longevidade têm uma estrutura escondida: um mesmo exame frequentemente serve a vários objetivos. Um painel de sangue conta para o eixo metabólico e para o cardiovascular. Uma DEXA mede densidade óssea (hormonal) e massa magra (musculoesquelético). Essa estrutura — linhas que se cruzam em estações compartilhadas — é exatamente a estrutura de uma rede de metrô. O gancho foi perceber que a metáfora não é decorativa: ela é isomórfica ao problema.
Em 1933, Harry Beck jogou fora a geografia real de Londres e desenhou o metrô como um circuito elétrico: só linhas retas, ângulos de 45° e espaçamento uniforme entre estações. Ilegível como mapa geográfico, perfeito como mapa de decisão — "onde estou, para onde vou, onde troco de linha". É o mesmo que um paciente precisa saber.
Adotamos as três primitivas de Beck:
Tudo nasce de três estruturas em app.js: LINES (os eixos),
NODES (as estações, com coordenadas de grade, os eixos que atendem e um
biomarcador fictício) e ROUTES (a ordem das estações em cada linha — os trilhos).
NODES.IX_DEXA = {
x:7.2, y:6.75, lines:["hormo","musculo"], type:"baldeacao",
name:"DEXA + composição",
desc:"A mesma imagem entrega densidade óssea (hormonal) e massa magra (musculo).",
bio:{ name:"Densidade óssea (T-score)", val:-0.4, ref:"normal > −1,0" }
};Uma estação com lines.length > 1 vira automaticamente uma baldeação. Não há
coordenada codificada em pixel: tudo é grade, e a geometria calcula o resto.
O que faz "parecer metrô" não é a cor — é a regra dos ângulos. Cada trecho entre duas estações só pode ser horizontal, vertical ou diagonal a 45°. Um pequeno roteador resolve isso para qualquer par de pontos: percorre reto até faltar exatamente a distância da diagonal, então entra na estação num ângulo de 45°.
function octSeg(a, b){
const dx=b.x-a.x, dy=b.y-a.y, adx=Math.abs(dx), ady=Math.abs(dy);
const sx=Math.sign(dx), sy=Math.sign(dy);
if(adx>=ady){ const bx=b.x-ady*sx; return `L ${bx} ${a.y} L ${b.x} ${b.y}`; }
const by=b.y-adx*sy; return `L ${a.x} ${by} L ${b.x} ${b.y}`;
}As linhas grossas com stroke-linejoin:round ganham os cantos arredondados
característicos. Como todos os nós compartilham a mesma grade, as baldeações caem no ponto
médio entre duas linhas — e os dois trilhos se cruzam exatamente ali, criando
o "X" de uma estação de transferência de verdade.
As estações e os trilhos formam um grafo. Quando você toca uma estação, uma busca em largura
(BFS) encontra o caminho mais curto desde o "você está aqui" (por padrão, o Dia Zero) e
redesenha só esses trechos, mais brilhantes, animando o traço com
stroke-dashoffset. O painel lista o trajeto passo a passo e marca cada
baldeação onde se troca de linha.
É a diferença entre um diagrama bonito e um diagrama navegável: a rota é calculada, não desenhada à mão.
Para a peça ser útil à beira do leito — e não só bonita — dois controles ancoram a conversa:
Os números são fictícios de propósito. O que se leva para o consultório é o jeito de contar a jornada.
Fundo quase-preto azulado, linhas luminosas, dourado (#d9b26a) reservado aos
grandes entroncamentos e ao ponto de partida. Tipografia de sinalização: Space Grotesk
para títulos, Barlow / Barlow Semi Condensed para rótulos — condensada porque
nome de estação precisa caber em pouco espaço.
role="button", focável por teclado, operável com Enter/Espaço.prefers-reduced-motion desliga as animações de traço e o pulso do "você está aqui".paint-order:stroke) permanecem legíveis por cima
de qualquer linha.HTML/CSS/JS estático, sem build. Publicado no Cloudflare Pages; código no GitHub (pmf-labs/protocolo-zero, MIT).
Reaproveitável em outros contextos: