Como & por quê
Este guia abre o capô. Cada decisão criativa e técnica está aqui — para que qualquer pessoa da sua equipe consiga entender, adaptar e reconstruir a abordagem. Nada de mágica escondida.
Uma linha do tempo de saúde quase sempre é um gráfico que você lê da esquerda para a direita. Aqui a proposta é invertida: você fica em pé sobre o eixo do tempo. A idade não é uma coordenada que você observa — é o lugar onde você está. A barra de rolagem do navegador, aquele elemento que todo site tem e ninguém nota, vira uma vida inteira: rolar dos 0 aos 100 é atravessar uma existência. E, ao atravessá-la, tudo muda com você: a cor da tela faz o percurso de um dia (aurora → meio-dia → poente), a tipografia ganha peso e caráter como um corpo que envelhece, e os biomarcadores percorrem suas curvas de vida.
A barra de rolagem é reinterpretada como um tempo de vida; os dados não são lidos num eixo — são habitados. Cada biomarcador mostra, ao mesmo tempo, toda a sua trajetória e o ponto exato do presente.
O botão intervenção desenha, ao vivo, duas vidas possíveis. Um médico liga e mostra ao paciente a diferença que hábitos fazem no healthspan projetado — exatamente a conversa de uma consulta de longevidade.
O coração do projeto é uma disciplina simples: existe uma variável de estado — a idade (0–100) — e todo o resto é uma função pura dela. Cor, peso da fonte, frequência cardíaca, cada curva, o brilho do canvas. Isso mantém o código honesto e o efeito coeso.
A idade é escrava da rolagem. Um trilho invisível de 640vh dá o comprimento; a posição
da rolagem é normalizada em 0–1 e multiplicada por 100. Teclado, arraste no número e clique na régua
também escrevem a idade — todos pela mesma porta (rolar a página), então nunca há duas fontes da verdade.
// rolagem → idade → mundo
const maxScroll = () => document.documentElement.scrollHeight - innerHeight;
function onScroll(){
S.age = clamp((scrollY / maxScroll()) * 100, 0, 100);
render(); // repinta o estado inteiro a partir da idade
}Três paradas de paleta — nascer (noite→aurora), meio-dia (plena luz) e poente (cobre→noite) — são
interpoladas em dois trechos. O fundo vai de escuro a claro e de volta ao escuro, e a cor da tinta
acompanha para manter o contraste sempre alto. É a metáfora do dia = vida, feita de lerp
entre vetores RGB.
function paletteAt(t){ // t = idade/100
const seg = t < .5 ? [S0, S1, t/.5] : [S1, S2, (t-.5)/.5];
return mixStops(seg); // bg, ink, accent… suavizados (smoothstep)
}A fonte Fraunces é variável em quatro eixos. Mapeamos cada um para a idade: o peso cresce (o corpo acumula gravidade), o tamanho óptico aumenta, a suavidade é alta na infância e na velhice (as pontas macias da vida) e o eixo de caráter (WONK) aparece só nos anos avançados — a letra ganha personalidade e um leve desgaste. Nada disso é imagem: é a mesma glifa, reescrita por CSS.
root.style.setProperty('--wght', lerp(300, 720, smooth(t)));
root.style.setProperty('--wonk', age > 82 ? (age-82)/18 * .9 : 0);
/* CSS: font-variation-settings:"wght" var(--wght), "WONK" var(--wonk) … */Cada biomarcador (VO₂ máx, força de preensão, FC de repouso, índice de healthspan) é uma função da idade — uma curva-base e uma curva com intervenção, ambas fictícias e ilustrativas. A sparkline não mostra só um valor: desenha toda a vida. O passado é linha sólida, o futuro é tracejado, e um ponto marca o presente. É a novidade formal em miniatura — você vê de onde veio e para onde vai, e onde está agora.
As curvas são desenhadas em <canvas> com preenchimento de área,
e no modo intervenção a base fica esmaecida atrás da curva em destaque — o contraste entre dois futuros.
O fundo é um pequeno organismo em canvas, sem nenhuma biblioteca: um núcleo luminoso que
pulsa na frequência cardíaca da idade (rápida na infância, ~60 no adulto, subindo na
velhice), ondas concêntricas emitidas a cada batida, e "motes" de vitalidade cuja densidade segue o
healthspan — fartos e ascendentes na juventude, esparsos e assentando com o tempo. Tudo com
additive blending para o brilho. Um grão de filme (SVG feTurbulence) por cima dá a
textura. Zero fotografia: cada pixel é gerado — original por construção.
const period = 60 / bpmAt(age); // batida sincronizada à idade
const pulse = g(.06,.045) + g(.30,.06)*.55; // onda lub-dub (gaussianas)
if (p < prevP) rings.push({ r:0, life:0 }); // nova onda a cada cicloAbaixo da régua, uma linha calcula a idade em que o índice de healthspan cruza um limiar — a
"projeção" de quantos anos de vida com capacidade. Ligar a intervenção recalcula na hora e mostra o
ganho (+22 vs. base). É o instante em que a peça deixa de ser bonita e vira útil: a frase
que um profissional manda para um colega.
role="slider" operável por teclado (setas, Home/End), com
aria-valuetext atualizado.prefers-reduced-motion: o campo generativo congela num estado estático e elegante;
nenhuma animação contínua.?age=47 e ?intervene=1 deep-linkam um estado — um clínico pode salvar o
link da idade do paciente.rodar local
python -m http.server 8791 # abra http://127.0.0.1:8791/repositório + deploy
git init && git add -A && git commit -m "v1"
gh repo create pmf-labs/vida-inteira --public --source . --push
# Cloudflare Pages — site estático, deploy direto da pasta:
wrangler pages deploy . --project-name vida-inteiraPor que estático puro? Porque o objetivo é ensinar: o código que roda é o código que você lê. Sem etapa de compilação, sem dependências opacas. E porque um site que é arte visual não precisa de servidor — a Cloudflare serve os arquivos na borda, e pronto.
O que dá para roubar daqui
Dados ilustrativos e fictícios. Nada nesta página é medida clínica, diagnóstico ou recomendação. Assets 100% originais, gerados por código (canvas, CSS, SVG). Tipografia: Fraunces e Inter (Google Fonts, licença aberta). Licença do código: MIT © 2026 Paulo Melo Franco (pmf-labs). Construído com o modelo Fable, da família Claude.