Vitrine Fable · peça #4 · nota de bastidores

Como & por quê

Por que a compressão da morbidade merecia virar algo que se fecha com as mãos — e como isso foi construído com um único canvas, sem framework.

Toda conversa de longevidade esbarra na mesma frase: "não é sobre viver mais, é sobre viver bem por mais tempo." É verdadeira e é abstrata. Este projeto tentou uma coisa só: dar corpo físico a essa frase — um espaço que o profissional e o paciente fecham juntos, no consultório.

1. A tese: a margem é uma área

Em 1980, James Fries propôs a compressão da morbidade: se a idade de início das doenças crônicas puder ser adiada mais rápido do que a idade da morte, o período de doença — a "margem" — encolhe. A pessoa vive praticamente igual até quase o fim, e a fase de dependência fica curta.

A maioria das visualizações desse conceito são duas curvas sobrepostas: expectativa de vida e expectativa de vida saudável. É correto, mas é leitura, não gesto. A aposta aqui foi tratar a margem como o que ela geometricamente é — uma área — e deixar o usuário fechá-la com o dedo.

2. A vida como fileira de anos

Em vez de uma linha suave, a vida é desenhada como ~96 barras verticais — uma por ano. A altura de cada barra é a capacidade funcional naquela idade. Foi uma escolha deliberada por três razões:

• Contável. O profissional consegue apontar para um ano específico: "este é você aos 72". A morbidade deixa de ser um conceito e vira anos que dá para contar nos dedos.
• Tátil. Barras discretas transitam de estado (sombra → luz) uma a uma, em onda, quando um hábito entra. A compressão vira movimento, não um número que muda.
• Nova. Não é um gráfico de linha, não é um dashboard. É um "código de barras de uma vida" — uma forma que o olho não associou antes a healthspan.

3. O modelo (ilustrativo)

A capacidade funcional é uma função da idade funcional. Sobe até um pico por volta dos 25 e decai com aceleração quadrática. Cada hábito aplica um offset — anos de idade funcional recuperados na vida tardia — mais um pequeno acréscimo ao lifespan:

vitalidade(idade, offset):
    fa = idade − offset · rampa(idade)   // "rejuvenesce" a decida
    retorna base(fa)

// início da doença = idade em que a curva cruza o limiar (0,34)
// margem = morte − início_da_doença

Como cada hábito empurra o início da doença (offset) mais do que empurra a morte, a diferença morte − início — a margem — encolhe. A vida fica maior e a sombra fica menor: exatamente o resultado geométrico da compressão da morbidade.

Os quatro hábitos e seus efeitos ilustrativos:

4. A interação: fechar com as mãos

A afordância central é o arraste. Um pointerdown em um hábito arma um possível arraste; passar do limiar de 8px vira arraste (com um "fantasma" seguindo o dedo/cursor e o canvas destacado como alvo); soltar sobre o canvas aplica. Se o dedo não se moveu, é um toque — e o toque também aplica. Assim o mesmo elemento serve arraste no desktop e toque no celular, sem duas implementações.

Tudo é reversível e acessível: cada hábito é um <button> com aria-pressed; Enter/Espaço aplicam e removem; um aria-live anuncia a nova margem a cada mudança.

5. A âncora clínica

O que separa uma peça bonita de uma ferramenta de consultório é a personalização. Um slider de idade coloca um marcador "você está aqui" na linha da vida e recalcula a leitura em tempo real: quantos anos saudáveis restam antes da sombra começar. A conversa deixa de ser sobre "a humanidade" e passa a ser sobre este paciente, nesta cadeira.

6. Render: um canvas, zero dependências

Tudo é desenhado num único <canvas> 2D, escalado por devicePixelRatio para nitidez em telas retina. Barras, hachura da margem, gradientes de calor, ícones, marcador do paciente e rótulos de eixo são 100% procedurais — nenhuma imagem externa. A animação é um lerp do offset e da morte alvo a cada frame, com uma "frente de aquecimento" que percorre os anos reconquistados. Com prefers-reduced-motion, o estado final aparece instantâneo.

DPR = min(devicePixelRatio, 2)
canvas.width = larguraCSS · DPR
ctx.scale(DPR, DPR)
// cada frame: animOffset += (targetOffset − animOffset) · 0,11

7. Deploy

Arquivos estáticos, sem etapa de build. Versionado no GitHub e publicado na Cloudflare Pages:

gh repo create pmf-labs/a-margem --public --source . --push
wrangler pages project create a-margem --production-branch main
wrangler pages deploy . --project-name a-margem --branch main

Para capturar screenshots em headless (onde rolagem programática deixa a imagem em branco), a página aceita ?nosync=1: renderiza um estado representativo — dois hábitos já aplicados — sem animar nem rolar.

8. O que dá para reaproveitar

• Discretizar para tornar contável. Trocar uma curva contínua por unidades (anos, doses, sessões) transforma leitura em contagem — e contagem é tátil.
• Área > linha para "quantidade". Quando a mensagem é "quanto de X", uma área que se fecha comunica melhor que uma linha que se move.
• Arraste-ou-toque num só handler. Detectar movimento > limiar separa arraste de toque sem ramificar código por dispositivo.
• Uma âncora pessoal converte demo em ferramenta. Um único controle ("sua idade") faz a diferença entre algo que se admira e algo que se usa com o paciente.
• Canvas procedural = zero peso de assets. Nenhuma imagem para carregar, nitidez em qualquer DPR, e cada pixel sob controle.

Dados ilustrativos e fictícios. Todos os números desta peça — idades, healthspan, lifespan, "anos reconquistados" e os efeitos de cada hábito — são uma simulação editorial criada para explicar o conceito de compressão da morbidade (Fries, 1980). Não têm valor clínico, diagnóstico ou prognóstico e não substituem avaliação profissional individualizada.

A Margem · Vitrine Fable #4 · assets 100% gerados por código.
← Voltar à peça  ·  Código no GitHub
© 2026 Paulo Melo Franco (pmf-labs) · Licença MIT.