Vitrine Fable · peça nº 9 · escala molecular · registro experimental

Duas Idades

Um relógio marca os anos que você tem. Outro marca os anos que seu corpo vive. Esta peça mostra os dois ao mesmo tempo — e deixa você mover um deles.

Idade cronológica é aritmética: um aniversário por ano, sem apelação. Idade biológica é biografia: quão desgastados estão seus sistemas, algo que os chamados relógios epigenéticos tentam estimar a partir de marcas no DNA. A distância entre as duas é o que a medicina de longevidade persegue. O problema de comunicação: quando você mostra "idade biológica: 39" ao lado de "idade cronológica: 45", são só dois números. Ninguém sente a diferença — e ninguém vê que os hábitos mexem em uma, não na outra.

Então parei de mostrar números lado a lado e materializei a diferença como dois enxames de partículas à deriva sobre um mesmo eixo de anos.

01A ideia formal

Duas nuvens de partículas, um eixo horizontal de tempo (mais jovem à esquerda, mais velho à direita):

O dado que importa não é a posição de nenhum dos dois: é a distância entre os centroides. Esse vão — desenhado como um feixe pontilhado com uma pílula no meio — é a "idade líquida". Empurrar e puxar duas nuvens até que o vão feche é uma interação que não existe num dashboard nem num scrollytelling. É uma simulação manipulável, e essa foi a aposta de novidade.

Por que dois caracteres de movimento diferentes

A decisão de design mais importante foi não fazer os dois enxames se moverem igual. O cronológico tem ordem mecânica: spin constante, sem ruído. O biológico tem ordem orgânica: respiração senoidal por partícula, jitter proporcional ao risco. O contraste vende, sem uma palavra, a tese clínica — um relógio é fixo, o outro você influencia.

02O modelo (fictício) por trás

Seis hábitos, cada um num controle de 0 a 10, com a média populacional em 5 (efeito zero). Cada desvio da média vira anos na idade biológica. Penalidades pesam um pouco mais que ganhos — manter o dano é mais barato que revertê-lo:

norm   = (5 - valor) / 5          // +1 no pior … -1 no melhor
fator  = norm > 0 ? 1.15 : 0.85   // penalidade > ganho
offset = Σ  peso · norm · fator   // anos ± sobre a cronológica
idadeBio = cronológica + offset

Há ainda um ritmo de envelhecimento (×/ano), derivado da média dos hábitos, que controla a agitação e a dispersão do enxame biológico — quanto pior o perfil, mais rápido o relógio "tica" e mais a nuvem se espalha. Os pesos são plausíveis na direção, mas os valores exatos são inventados. Nenhum relógio epigenético real foi consultado; a peça é para conversar, não medir.

03O gancho clínico

A afordância de beira de leito é o controle "Idade do paciente". Ele ancora toda a cena na idade cronológica real — e é o único número que os hábitos não movem. Um médico ou nutricionista abre a peça, põe a idade do paciente à frente dele, e então:

• mostra o vão atual entre as duas idades com o perfil de hábitos daquela pessoa;
• move um único hábito — "e se você dormisse melhor?" — e o enxame recua na hora;
• usa os cenários rápidos (Se parar de fumar, Estilo de vida ótimo, Alto risco) para dar saltos dramáticos e memoráveis.

O objetivo é explicar relógios epigenéticos e resultados de testes de idade biológica sem jargão, e deixar registrada a mensagem central: seus hábitos movem o relógio biológico; eles não movem o calendário. É material de educação e onboarding que se vive, não se lê.

04Técnica

Sem framework, sem build, sem dependências além das fontes do Google. O eixo de anos remapeia sozinho quando a idade do paciente muda (o centro do eixo é a idade cronológica). Os centroides fazem easing em direção ao alvo, então mudar um slider faz a nuvem fluir até a nova posição em vez de saltar.

Acessibilidade e movimento

• Tudo operável por teclado — os controles são <input type="range"> nativos, com foco visível e um skip link.
• prefers-reduced-motion é respeitado por padrão, e há um botão "Reduzir movimento" que troca a animação viva por um único quadro estático assentado.
• Uma região aria-live narra as duas idades e o delta a cada mudança, para leitores de tela.

Captura headless

Como a peça é dirigida por estado (sliders), não por rolagem, o estado inicial já é representativo. Mesmo assim há um parâmetro ?nosync=1 que assenta os enxames em suas posições finais sem a animação de entrada — o que evita fotos "em branco" no navegador headless.

05Deploy

Arquivos estáticos servidos pelo Cloudflare Pages, publicados de uma cópia limpa (sem .git) via wrangler pages deploy. Identidade de commit anônima (noreply do GitHub, datas em UTC), licença MIT. O repositório está aberto — clone, troque os pesos, mude a paleta, adapte os hábitos ao seu contexto.

06O que reaproveitar

• Dois sistemas em deriva relativa. A gramática "duas nuvens sobre um eixo comum, o vão é o dado" serve para qualquer par antes/depois, meta/real, você/coorte — não só idade.
• Caracteres de movimento como argumento. Dar a uma variável imutável um movimento rígido e à variável influenciável um movimento orgânico comunica a tese sem texto.
• Âncora de consulta. Um único controle "personalize para esta pessoa" transforma uma demo bonita em ferramenta de beira de leito.
• Cor como leitura. Uma única rampa de cor conduzindo enxame, feixe, número e UI mantém a peça legível de relance.

Duas Idades · Vitrine Fable nº 9 · MIT © 2026 Paulo Melo Franco (pmf-labs) · código