Como & por quê
Senescência é um ensaio sobre células que param de se dividir — contado por um texto que faz exatamente isso. Ele envelhece enquanto você o lê e se repara sob o seu toque. Aqui estão as decisões criativas e técnicas por trás dele, e o que você pode reaproveitar.
A pergunta que abriu o projeto: e se o leitor não lesse sobre senescência, mas a sentisse acontecer com o próprio texto? Quase toda peça de divulgação sobre envelhecimento celular é uma ilustração ao lado de um parágrafo. Aqui a ilustração é o parágrafo. As palavras que ficam paradas — não tocadas, não lidas — perdem contraste, incham, escurecem em tons de lipofuscina (o pigmento marrom-amarelado que se acumula em células velhas) e borram. Passar o cursor ou o dedo sobre um trecho o limpa instantaneamente.
Esse gesto tem nome na biologia: senólise — a remoção seletiva de células senescentes. O leitor, ao mover a atenção, vira o sistema imune da página. Nada disso é dito de forma didática pela interface; é experimentado. É esse o gancho de novidade: a degradação e o reparo do próprio texto como estrutura de navegação.
passe o cursor / toque nas palavras abaixo →
A célula que parou não morre: ela permanece, incha e sussurra inflamação aos vizinhos. Limpe-a, e o tecido clareia.
O ensaio comprime uma história real da biologia do envelhecimento em quatro movimentos:
Cada uma dessas batidas virou uma regra do motor: o texto para (senescência), resiste em ochre (zumbi), contamina os vizinhos (SASP) e é limpo pelo cursor (senólise). A biologia não é o assunto — é a mecânica.
Na carga da página, o JavaScript percorre cada parágrafo e envolve cada
palavra num <span class="cell"> — preservando itálicos e
termos. Cada célula guarda uma idade de 0 a
1. Um laço requestAnimationFrame incrementa essa
idade ao longo do tempo, e a idade dirige uma única variável CSS por célula:
.cell{
--a: 0; /* idade 0..1 */
color: color-mix(in oklab, var(--ink-fresh), var(--ink-aged) calc(var(--a)*100%));
opacity: calc(1 - var(--a) * .62);
filter: blur(calc(var(--a) * var(--a) * 1.15px));
transition: color .55s, opacity .55s, filter .55s;
}
Duas decisões importam. Primeira: as células são display:inline-block
com geometria estável — o envelhecimento nunca muda a
largura do glifo. Isso mantém o alvo de toque parado e evita reflow (a
página não "treme" ao senescer). Segunda: o JS só escreve no DOM quando a
idade cruza um dos 22 estágios quantizados; a transição CSS de
.55s faz o resto suave. Centenas de células animam sem travar.
O ponteiro não repara "a palavra sob o cursor": ele limpa um raio de células com atenuação suave a partir do centro — um patch circular de faxina, como um macrófago varrendo uma região do tecido. O motor cacheia o centro de cada célula em coordenadas de documento e, a cada quadro em que o ponteiro está ativo, aplica:
influencia = 1 - distancia / alcance; // 1 no centro → 0 na borda
if (influencia > 0) idade = idade * (1 - influencia);O alcance não é constante: ele depende da idade do paciente. Imune jovem alcança mais e limpa mais fácil; imune velho, menos. É a mesma verdade biológica traduzida em pixels — manter o tecido limpo fica literalmente mais difícil conforme a idade sobe.
A senescência não é isolada — ela se espalha. A cada quadro, a idade de uma célula ganha um empurrão proporcional à idade dos vizinhos elevada a uma potência (o termo SASP). Trechos abandonados formam focos de decadência que crescem para fora, em vez de uma névoa uniforme. Um "surgimento estocástico" ocasional injeta um novo foco senescente, como acontece de verdade.
Atrás do texto, um <canvas> desenha um campo de células
generativas. Elas respiram e derivam de leve, e adoecem em
sincronia com a carga senescente global do ensaio: quando você
limpa o texto, o pano de fundo cicatriza; quando você o abandona, ele arde
em ochre. O organismo é a página inteira.
Para que a peça seja usável à beira do leito, o painel traz
um controle de idade do paciente (mais presets rápidos).
Ele muda três coisas ao mesmo tempo: a velocidade com que o tecido senesce,
o alcance da faxina, e três leituras — reserva senolítica, carga
p16^INK4a e índice de inflammaging.
Um médico ou nutricionista arrasta a idade de 32 para 72 na frente do paciente e diz: "olha como o tecido decai mais rápido e resiste à limpeza — são as suas células." A educação vira experiência tátil, não folheto. Serve para onboarding, para explicar por que hábitos anti-inflamatórios importam, para dar corpo a um conceito abstrato.
Os números são deliberadamente fictícios e sinalizados como tais no painel e no rodapé — a peça educa sobre um mecanismo, não entrega dados de exame.
prefers-reduced-motion entra automaticamente em modo
legibilidade: sem envelhecer, contraste cheio, sem
pulsos nem campo animado. Um botão permite congelar/retomar a qualquer
momento.left:50%; transform:translateX(-50%)
— nunca left:0;right:0;margin:auto, que desloca no mobile.flex-wrap:nowrap;
html,body{overflow-x:hidden}; testado a 390 e 414 px sem
cortes.
Stack deliberadamente simples: HTML/CSS/JS estático, sem
build, sem framework. Só <canvas> 2D nativo e Google
Fonts. Isso torna a peça leve, portátil e à prova do tempo.
pmf-labs/senescencia), MIT.wrangler,
a partir de uma cópia limpa sem .git./guide como guide/index.html — esta
página.O padrão central — "o meio demonstra a mensagem" — é transponível. A técnica de uma variável CSS por token dirigindo cor, opacidade e blur, com escrita ao DOM quantizada e transição fazendo a suavização serve a qualquer texto que precise mudar de estado de forma viva e barata: um contrato que "desbota" o que já expirou, um laudo que destaca o que mudou, uma narrativa que reage à atenção. A senólise espacial (reparo por raio com atenuação) é um belo mecanismo de "pincel" para qualquer interface tátil.
Aviso de dados. Esta é uma peça de design demonstrativa.
Todos os números, índices e "biomarcadores" apresentados — carga
p16^INK4a, índice de inflammaging, reserva senolítica — são
fictícios e ilustrativos, criados apenas para dar corpo à
metáfora. Não têm valor clínico, diagnóstico ou prognóstico, e nada aqui
substitui avaliação médica.