Vitrine Fable · peça 15 · como & porquê

Compasso

Como um painel laboratorial inteiro passou a se ler — e a se ouvir — como uma partitura rítmica.

A leitura de um painel de exames é, quase sempre, uma tabela: dezenas de linhas, uma coluna de valores, outra de faixas de referência, e um jogo de vermelho e verde. Funciona, mas obriga o olho a percorrer linha por linha. O Compasso parte de uma pergunta diferente: e se o painel inteiro fosse uma peça de música que toca de uma vez? Aí "estar na faixa" vira estar na batida, e o marcador fora da faixa salta — porque toda síncope salta, tanto para o olho quanto para o ouvido.

01A ideia

Um pentagrama tem várias linhas (pautas), uma grade de compassos que divide o tempo, e notas que caem na batida ou fora dela. O Compasso mapeia esse vocabulário direto sobre o painel clínico:

Linha da pautaum biomarcador (glicose, LDL, PCR…)

Grade de compassosas linhas verticais de tempo — a "batida" esperada

Faixa de referênciao corredor "afinado" ao redor da linha central

Nota na batidavalor dentro da faixa — consonante, cheia, na grade

Nota fora da batidavalor fora — síncope, vazada, dissonante, trêmula

Batutao "agora" que percorre a peça e faz cada nota soar

O resultado não é uma versão bonita da tabela: é uma estrutura de leitura nova. Você não lê valor por valor — você escuta a forma do painel e o problema se anuncia sozinho, como um instrumento que entrou atrasado numa orquestra.

02O ritmo vem do dado

Nada é decorativo. O padrão rítmico de cada linha é construído a partir do próprio resultado: se o marcador está no compasso, ele bate nos tempos fortes, exatamente sobre a grade; se está fora, ele se desloca e gagueja — e o deslocamento é proporcional a quão fora ele está (a "severidade", medida em larguras da faixa de referência).

// no compasso → tempos fortes 1 e 3, na grade, dentro da faixa
push({ beat: base+0, yOff: 0, on:true });
push({ beat: base+2, yOff: 0, on:true });

// fora do compasso → deslocamento (síncope) + gaguejo
off = 0.30 + 0.34*sev;              // atraso, em tempos
yOff = dir*(0.52 + 0.40*sev);        // sobe se alto, desce se baixo
push({ beat: base+off, yOff:yOff, on:false });          // nota deslocada
push({ beat: base+off-0.46, yOff:yOff*.82, on:false, ghost:true }); // gaguejo

Cada nota fora da batida ainda desenha um anel pontilhado na grade (onde ela deveria ter caído) e um traço fino ligando os dois — a metáfora visual de "isto está fora do lugar" fica explícita, sem precisar de legenda.

03A âncora no paciente

Um painel só significa alguma coisa para alguém. Por isso a peça tem um modo consulta: a idade e o sexo (de um paciente fictício) reposicionam as faixas de referência mostradas. Isso não é enfeite — é o que torna a peça útil à beira do leito.

O piso de HDL sobe no sexo feminino — troque o sexo e a linha do HDL pode sair do compasso.
O teto de ferritina e de ácido úrico muda com o sexo.
O alvo de LDL aperta com a idade (risco acumulado) — envelheça o paciente e a linha do LDL cai mais fundo na síncope.

É o gesto que fecha o argumento clínico: "para a sua idade, este aqui saiu do compasso" — a faixa se move com o paciente, na frente dele, e a nota responde.

Dois recursos tornam isso operável à beira do leito. Os casos ilustrativos (fictícios) deixam o médico alternar entre painéis inteiros — de "quase tudo no compasso" (peça consonante, quase toda na batida) a "risco metabólico" (a maioria das linhas em síncope) — e a peça muda de música na frente do paciente. E o botão "percorrer os fora do compasso" conduz um percurso guiado: a peça destaca, um a um, cada marcador fora da batida, abrindo a leitura em linguagem simples — o roteiro de uma devolutiva.

04Desenhado por código, quadro a quadro

Tudo é canvas 2D procedural — sem imagens, sem SVG externo, sem Three.js, sem WebGL, sem framework, sem build. A cada quadro o motor desenha:

a grade de compassos (barras douradas nos limites, subdivisões finas nos tempos);
por linha, o corredor afinado (a faixa de referência) e uma mini-pauta de 3 linhas;
as notas — cabeça cheia e haste para as consonantes, cabeça vazada com traço de dissonância e tremor para as fora de compasso;
a batuta com rastro de cometa e ponta luminosa, mais os anéis de pulso que nascem quando ela cruza cada nota.

O canvas escala com o devicePixelRatio para ficar nítido em telas retina, e o número de compassos visíveis se adapta à largura (4 no desktop, 2 no celular), reconstruindo os padrões rítmicos sem perder o alinhamento com os rótulos.

05A trilha é sintetizada ao vivo

Nenhum arquivo de áudio: todo o som nasce de WebAudio, osciladores e envelopes, no navegador.

padplucks pentatônicosdissonânciawoodblock

Um pad grave sustenta a tonalidade da peça. Cada linha é um "instrumento" afinado num grau da escala pentatônica — então, quando o painel está saudável, as notas no compasso desenham um acorde consonante. Um marcador fora dispara uma nota desafinada (subida em cents proporcional à severidade), um trítono de tensão e um tropeço de ruído filtrado. No tempo forte, um woodblock marca a regência. O som só começa depois do gesto do usuário e há um botão de mudo sempre visível.

06Acessível de propósito

Teclado: a pauta é uma listbox — setas para navegar, Home/End, Enter para destacar, Esc para limpar. Cada linha tem um rótulo falado com valor, faixa e status.
Movimento reduzido: com prefers-reduced-motion, a batuta não faz a varredura contínua; a peça é lida como um arpejo estático sob demanda, e as notas param de tremer.
Som opt-in: mudo por padrão; nada toca sem um clique.
Contraste: paleta calibrada para AA, inclusive nos rótulos do mobile; um resumo aria-live descreve a partitura inteira para leitores de tela.

07Deploy

Arquivos estáticos, deploy instantâneo:

# repositório público (MIT)
gh repo create pmf-labs/compasso --public --source . --push

# Cloudflare Pages — cópia limpa, sem .git
wrangler pages deploy ./stage --project-name compasso --branch main

Sem servidor, sem banco, sem chave de API. A peça é 100% cliente — o que você baixa é o que roda.

08O que dá para reaproveitar

O motor de partitura: um mapeamento genérico de status + severidade → ritmo + posição, que serve para qualquer painel de indicadores (não só saúde).
O sintetizador WebAudio: pad + plucks por índice de escala + camada de dissonância — um jeito leve de "sonificar" dados sem samples.
O padrão "modo consulta": âncora (idade/sexo) que reconfigura o que se mostra, com destaque de um item para conduzir uma conversa.

Aviso — dados fictícios. Todos os valores de exames, faixas de referência e status exibidos no Compasso são ilustrativos e fictícios, gerados por um modelo simplificado para demonstrar design. As faixas se movem com idade/sexo apenas para ilustrar a ideia. Não têm valor clínico, não correspondem a nenhuma pessoa real e não substituem exames laboratoriais nem avaliação médica profissional.