Vitrine Fable · nota de bastidores

Como & por quê

Folha nasceu de uma frustração clínica simples: dizer "coma mais fibra" não muda ninguém. Falta ver o que a comida faz. Então a página segue um prato para dentro do corpo — e o scroll vira a escada dessa descida.

A ideia formal: o scroll é uma escada de decomposição

A maioria dos scrollytellings prende um elemento e troca legendas. Folha faz outra coisa: uma única tela <canvas> fixa atrás do texto interpola continuamente entre seis escalas do mesmo alimento. Rolar não avança slides — cai através das escalas. Cada estrato cresce, passa por você e cede lugar ao próximo, numa queda vertical sem cortes: do prato ao ingrediente, à molécula, à via, ao marcador.

01Pratoa refeição composta, em duotone construído em canvas
02Ingredientesos componentes se afastam do centro do prato
03Macronutrientescada ingrediente se dissolve numa nuvem de partículas por classe
04Moléculasfórmulas estruturais desenhadas por geometria, não por imagem
05Vias metabólicasas moléculas se acoplam a nós de sinalização; pulsos percorrem a rede
06Marcadoreshs-CRP, HbA1c, ApoB… antes → depois (ilustrativo)

As seis escalas, lado a lado — no site elas são um único movimento vertical contínuo.

Direção de arte: revista, não dashboard

A regra estética foi tratar dado nutricional com a mão de um editorial gastronômico. Isso significou:

Tipografia display serifada. Fraunces (variável, com eixo óptico) nos títulos e no corpo do ensaio; Inter só no miúdo da interface; IBM Plex Mono nas anotações de laboratório — o contraste revista × ficha técnica.
Muito respiro e folios. Cada estrato é uma página dupla com número de folio, olho e legenda em itálico. Um trilho vertical à direita funciona como uma amostra de testemunho geológica: mostra a que profundidade você está.
Duotone construído por código. O prato — filé de salmão, folhas de couve, gomo de limão, gotas de azeite — é desenhado com bézier, gradientes e um pouco de ruído senoidal nas bordas das folhas. Nenhuma fotografia; nenhum asset externo.
A página escurece na descida. A luminância do fundo cai do papel-osso (o prato sob a luz da mesa) ao quase-preto (a célula). O tema do texto acompanha: escuro sobre claro em cima, claro sobre escuro no fundo.

A afordância de consulta

O critério que separa "bonito" de "quero usar amanhã" é o paciente estar na sala. Por isso a barra fixa embaixo ancora a peça a dois controles de consultório:

Objetivo (Inflamação · Glicemia · Lipídios) — re-tinge toda a descida: muda a cor de acento, destaca as moléculas e vias que servem àquele objetivo, esmaece o resto e aponta o marcador a acompanhar. Cada estrato ganha uma linha "para este objetivo…". O ensaio inteiro se re-sintoniza.
Prato (salmão & couve × aveia & frutas) — troca a refeição-fonte para ancorar no que o paciente realmente come. Toda a cascata — ingredientes, moléculas, vias, marcadores — se recompõe.

Teste de qualidade aplicado: se um profissional de saúde não parasse de rolar e não mandasse o link a um colega, a peça falhou. A régua foi transformar aconselhamento em uma descida guiada à beira do leito — "isto é o que acontece quando você come isto" — sem números que assustem.

Técnica, em miúdos

Profundidade a partir da rolagem

Um valor depth ∈ [0,1] é derivado de scrollY / scrollMax. Seis centros de cena são dispostos ao longo dessa profundidade; uma partição da unidade (com smootherstep) faz o cross-fade entre cenas adjacentes, de modo que a soma das opacidades é sempre ~1 — sem "buracos" nem sobreposição suja. Cada cena também recebe uma escala crescente e uma translação para cima conforme depth a atravessa: é isso que dá a sensação de passar por dentro de cada escala.

Moléculas por geometria

As fórmulas estruturais (ômega-3, sulforafano, oleocantal, butirato, beta-glucana…) são desenhadas com primitivas — chain(), ring(), bond() com ligações simples e duplas — não são imagens. É geometria química, reaproveitável para qualquer molécula.

Screenshots de um site dirigido por rolagem

Rolagem programática deixa o screenshot headless em branco. A solução: modos de freeze que renderizam o estado-alvo sem chamar window.scroll. ?stratum=N isola um estrato no topo e trava o canvas na profundidade certa; ?d=0.5 trava numa profundidade arbitrária. Assim cada escala pode ser fotografada isoladamente.

# servir localmente
python -m http.server 8832

# fotografar o estrato "moléculas" (04) em headless
msedge --headless=new --screenshot=out.png \
  --window-size=1440,900 "http://127.0.0.1:8832/?stratum=3"

Acessibilidade & movimento

Seletores são radiogroup com navegação por seta; trilho e ações são botões; foco sempre visível.
prefers-reduced-motion desliga a animação ambiente e a rolagem suave — o canvas passa a atualizar só na rolagem, mantendo a leitura. Há também um botão movimento visível.
aria-live anuncia trocas de objetivo e prato; contraste mira AA; texto sobre a arte fica em painéis com leve desfoque.

O que outros podem reaproveitar

O motor de descida: partição-da-unidade + escala/translação por cena é uma receita genérica para transformar qualquer sequência de "escalas" (organograma → função → tarefa; galáxia → estrela → átomo) numa queda contínua.
O par arte-generativa + dado real: canvas duotone para o "calor" editorial, listas de dados em DOM para a precisão — o melhor dos dois.
A afordância de consulta: um seletor de "objetivo" que re-sintoniza a peça inteira transforma uma vitrine passiva em ferramenta de conversa.

Aviso. Todos os números desta peça são fictícios e ilustrativos. As moléculas, vias e sentidos de efeito refletem a literatura de nutrição/longevidade de forma editorial e simplificada; os valores de biomarcadores (hs-CRP, HbA1c, ApoB, LDL, pressão) foram inventados para ilustrar a direção do efeito de um padrão alimentar ao longo do tempo — não de uma única refeição. Sem qualquer valor clínico, diagnóstico ou prognóstico.