Laboratório

01 Cor

A paleta não muda em nenhuma frente. Ela foi medida em OKLCH, passa nos quatro portões e é a parte já resolvida. Está aqui para conferência.

Os quatro pilares, a 90° um do outro em OKLCH, com L e C constantes. Fixar luminosidade e croma e variar só a matiz é o que garante que nenhum dos quatro pese mais que os outros.

02 Tipografia P31

Use as barras "Tipografia" e "Escala" acima. A primeira troca a família de toda esta página; a segunda troca o tamanho e o piso.

Trocar só a família não resolveu, e a medição diz por quê. O número que o olho lê não é o font-size: é a altura-x em pixels, que junta família e tamanho num valor só. E há um segundo número, que é o mais grave: a fração do texto da página abaixo de 16 px.

Era eu repetindo o defeito. Construí esta bancada com a mesma escala de que você reclamou: 136 dos 237 blocos de texto estavam a 14 px - os rótulos, as medidas, as células de tabela. O parágrafo nunca foi o problema; o problema é tudo em volta dele. Por isso a barra "Escala" abre em Confortável, e não em Atual.

Medido em 09/09/2026: das sete referências, seis usam sans-serif no corpo, e as duas que você apontou como boas - linear.app/now e razaoinadequada.com - usam Inter e Rubik. O site é o único serifada no corpo e serifada de display no título.

A altura-x dividida pela caixa alta diz o tamanho aparente das minúsculas. A Newsreader tem 0,654, a menor do conjunto: em 17 px ela desenha minúsculas 14% menores que a Inter no mesmo tamanho nominal. É a medida por trás de "tudo pequeno demais".

A folga do circunflexo é o quanto o acento sobe acima do e, dividido pela altura-x. Foi este critério que reprovou EB Garamond, Cormorant Garamond e Bodoni Moda nesta casa - e a Newsreader tem 0,517, o pior número da tabela. O defeito que barrou três famílias está na que ficou.

A escala existe e é fluida. O que a P31 conserta é o degrau: hoje o h3 dos cards mede 16 px contra corpo de 16 px, e subtítulo do mesmo tamanho do texto não é subtítulo.

Decidido e aplicado — P31, 09/09/2026 (A-58). Nenhuma das candidatas entrou: a prosa continuou na Newsreader, e o que mudou foi a escala e a divisão das vozes. Corpo com piso de 19 px em 390 e 20,2 px em 1440, degrau de 4 px entre rótulo e corpo; Space Mono para a interface (data, tag, botão) e Instrument Serif só no display.

Depois, em 13/09/2026. A coluna de leitura dos posts tinha ficado calibrada para a Literata a 17 px (36 rem, 68 caracteres) e ninguém refez a conta quando a prosa virou Newsreader a 20 px: eram 552 px e 63 caracteres, com título e dek em tetos próprios de 469 e 462 px - o dono: "por que tá tudo tão espremido?". Hoje a coluna é 39 rem (624 px, 71 caracteres) e a composição inteira, índice incluído, é centrada na tela. Ver a seção 16. As oito candidatas de família continuam nesta bancada como registro; nenhuma entrou, e o site continua a única serifada no corpo entre as referências, por decisão.

03 Caixa contra régua P32 · P37

O achado mais forte da varredura, e o que exigiu duas medições. Cerca é fundo próprio ou borda em três lados: o cartão. Régua é borda em um ou dois lados: o fio que separa, e não conta. A primeira medição juntava as duas, e por isso acusava páginas limpas.

Contando só cerca, por 100 elementos: o /about/ tem 29,4 e o /projects/ tem 9,1, contra 1,4 do linear.app/now, 2,3 do joshwcomeau e zero do overreacted.io. A home mede 0,7 e está mais limpa que as duas referências. A proposta troca o cartão pela linha na régua - notação que o projeto já tem.

Decidido e aplicado — P32 e P37, 09/09/2026 (A-59, A-61). O cartão virou linha na pauta. Cercas por 100 elementos: /projects/ de 9,3 para 0,2, /links/ de 9,1 para 0,0, /about de 2,8 para 0,9. As sete rotas medidas ficaram abaixo de 1,0, e o /about/ perdeu 124 pílulas e as quatro barras de progresso.

Depois, em 13/09/2026. O cartão de destaque de /projects/ ainda tinha um defeito escondido: pedia sm:flex no markup e display: block no estilo escopado, e o escopado ganhava - a miniatura empilhava acima do texto em qualquer largura e a página media 6 378 px para oito projetos. Virou linha de pauta com a prancha à direita: 5 406 px. E o filtro de pilar deixou de ser chip com bolinha: são os quatro símbolos alquímicos com o anel de seleção do hero, e o "todos" é o K₄ completo - ver a seção 16.

04 Desbotar contra acender P33

Passe o ponteiro sobre os quatro. Hoje o site tira presença do que não importa: 59 textos da home usam opacidade parcial, e desbotar derruba o contraste junto. Na Noite Estrelada a luminância representa energia cinética - o que tem energia brilha. A proposta inverte a operação: nada apaga, o ativo acende.

Decidido e aplicado — P33, 09/09/2026 (A-62). Textos com opacidade parcial na home: de 59 para 0, e zero nas outras rotas. O deslocamento em resposta a gesto segue uma razão só, --k4-cascata = 0,45, em quatro degraus de 14 a 1,3 px; /posts/ foi de 27 para 66 transições, e nenhuma animação roda sozinha fora do hero.

Depois, em 13/09/2026. A regra "o ativo acende" ganhou o exemplo mais literal do site: a marca do cabeçalho, ao apontar, faz o encontro do hero em miniatura - os quatro nós acendem nas cores dos pilares, as arestas se traçam de novo em acento, e um brilho atravessa a palavra no sentido da leitura. Em repouso continua monocromática. E a regra "nada roda sozinho fora do hero" ganhou uma ressalva medida no próprio hero: ele dorme quando ninguém olha - ver a seção 09.

05 O item da listagem P36

Cada item de /posts/ carrega oito blocos de texto. O overreacted.io carrega três, o joshwcomeau quatro, o danluu dois. As quatro tags já estão ditas no filtro, poucos pixels acima - repetir o filtro dentro de cada linha é dizer duas vezes.

Decidido e aplicado — P36, 10/09/2026 (A-67). O item caiu de 7 a 8 folhas para 4: índice e categoria se fundiram numa marca acima do título, as tags e a miniatura saíram, e o item ganhou coluna de 47,5 rem. A amostra acima mostra a ordem proposta; a aplicada pôs a marca antes do título, porque em duas colunas o texto fundido vazava sobre ele.

Depois, em 13/09/2026. A marca ganhou um dado a mais, e não uma folha: o tempo de leitura ("filosofia · 12 abr, 2026 · 13 min de leitura"), pela mesma conta do artigo - só as palavras de prosa, a 265 por minuto (`utils/leitura.ts`). Continua em quatro folhas.

06 Aparato de leitura P34

Nove das treze referências de ensaio têm figura viva dentro do texto, e quatro têm nota lateral. O artigo do site tem a barra de progresso, e mais nada. A nota lateral vive na margem que já é vazia - a coluna de leitura não estreita para acomodá-la.

Decidido e aplicado — P34, 10/09/2026 (A-66). O artigo ganhou índice gerado dos próprios títulos, sem JavaScript, e a nota lateral virou sintaxe de markdown, > [!aside]. O cipreste é a régua fina contínua (seção 08). A figura viva dentro do texto não foi entregue, e continua declarada como pendente.

Depois, em 13/09/2026. O índice ganhou seção ativa (aria-current="location" na última seção cujo título passou pelo terço de cima da tela, com um traço à esquerda - o mesmo dispositivo do cipreste), a abertura do artigo virou kicker, título, dek e meta, o corpo saiu do branco cheio para o tom 1, e a capitular parou de vazar para dentro das citações. Ver a seção 16.

07 A Noite Estrelada, como estrutura P33 · P35

Até esta seção, a referência ao quadro aparecia nesta bancada 21 vezes em texto e nenhuma em desenho. Era a mesma falha que você apontou no site: "não to sentindo muito a referência". Paleta não é referência ao quadro.

O campo de turbulência

Não são espirais desenhadas. É um campo vetorial - a técnica que a pesquisa achou em todos os trabalhos de Van Gogh no front-end -, e a espiral é o que aparece quando o escoamento acontece. O potencial é uma soma de gaussianas e a velocidade é o rotacional dele, o que torna o escoamento incompressível por identidade: sem fonte nem sumidouro visíveis.

O campo é gerado no build, então isto é SVG estático: zero JavaScript em runtime, e o portão sem-js continua de pé. No hero, a P35 troca a órbita das 160 partículas que já existem por este mesmo campo - sem WebGL e sem partícula a mais.

POC: o campo como fundo da secao

Esta e a POC do que voce pediu. O campo ocupa o fundo da secao inteira - 1440 × 989, a proporcao real -, e a composicao do hero fica por cima, intacta: a elipse com as gravuras, a figura do K₄, os quatro glifos, os rotulos e o texto.

Os quatro vortices grandes ficam exatamente sobre os quatro pilares, convertidos da caixa do K₄ para a caixa da secao. O ceu nao e textura atras da figura: ele e organizado por ela.

O hero nessa pegada

Mesma técnica, amarrada à geometria real do hero - viewBox -430 -226 860 452, os quatro nós nas coordenadas medidas, as seis arestas. O que muda não é a figura: é o que está atrás dela.

A pincelada tem o comprimento do quadro. A Noite Estrelada mede 92 cm de largura e as pinceladas do céu têm de 3 a 8 cm - entre 3,3% e 8,7% da tela. A primeira versão disto usava traços de 27,9%, de três a oito vezes longos demais: aquilo não era pincelada, era linha de corrente, e lia como agressivo. Agora a mediana é 7,4%, e a densidade se forma por sobreposição, como no impasto.

A proposta, e ela não é decorativa: os quatro vórtices grandes ficam exatamente nos quatro pilares. O céu não é textura atrás da figura - ele é organizado pela figura. Os quatro assuntos são o que agita o campo, e os dez vórtices menores são a cascata descendo a partir deles. Quatro grandes mais dez pequenos são os 14 do quadro.

Aqui o campo é SVG estático porque a bancada é uma bancada. No hero de verdade a P35 não faz assim: lá o campo vira uma função pura que as 160 partículas que já existem em orbe.mjs consultam a cada quadro - elas deixam de percorrer uma órbita elíptica e passam a escoar. Mesmo teto de partículas, sem WebGL, e o custo é aritmética em vez de bytes.

O céu se agita, a vila não

O quadro tem três regimes empilhados, e o contraste entre eles é o que faz o céu parecer vivo. Isto resolve a contradição que a medição tinha deixado em aberto: nenhum bom site de leitura tem movimento contínuo, e o hero deste site tem 36 animações infinitas. Céu inteiro seria ruído; vila inteira seria morto.

Justapor, e não misturar

Os azuis e amarelos do quadro não foram fundidos na paleta: foram postos lado a lado, e o olho faz a mistura. As pranchas do site usam mix-blend-mode, que faz o oposto - e é de onde vem a mancha acinzentada que E-21 registrou.

O que aconteceu com esta seção — P35, ainda aberta (A-65). O campo entrou no hero como lei de movimento, e não como desenho: a poeira passou a escoar pelos catorze centros, com correlação de 0,995 entre brilho e velocidade. O fundo pintado das POCs acima nunca foi aprovado, e o hero seguiu outro caminho - a poeira ganhou massa, céu e forma, e as pranchas passaram a cobrir o hero. É o que a seção 09 conta.

09 O hero depois da bancada P40 · P41

Entre 11 e 12/09/2026 o hero mudou mais do que em todas as frentes acima juntas, e quase tudo é movimento em canvas - que uma bancada sem JavaScript não mostra. Por isso aqui entram só o que mudou, o número medido e onde está a evidência. O hero de verdade está na home.

Ainda em aberto: a P41 continua aberta - falta a tinta das manchas formar os hemisférios, tecnologia ir para a área de Wernicke e os pilares acesos girarem como elétrons (o tremor que vinha junto saiu em 12/09/2026, a pedido do dono: era imperceptível e custava quadro) -, e a P35 também. Evidência em docs/evidencia/hero-inteiro/, newton/, ceu/, p40/, p41/ e vazio/.

O que mudou entre 12 e 13/09

10 O que esta bancada mede de si mesma

Uma página que cobra número dos outros declara o dela. Medida com o mesmo script, em 1440×1000: 32 cercas e 36 réguas em 476 elementos, ou 6,7 cercas por 100.

Remedida em 12/09/2026, depois desta atualização, com a coleta de caixa.test.mjs - a mesma que fecha as rotas do site: 30 cercas e 99 réguas em 3 177 elementos, ou 0,9 por 100. O número de elementos não bate com o de 09/09, e não foi reconciliado: esta coleta conta todo elemento do documento, inclusive os traços dos campos, e a de 09/09 não está guardada para saber o que contava. As cercas, que não dependem da base, são quase as mesmas: 32 antes, 30 agora.

É alto para uma página de leitura e correto para esta: 10 das 32 são amostras de cor, que são retângulos de cor; 6 são o diagrama de proporção da home; e 6 são o cartão e as tags da coluna "hoje" - isto é, o defeito sendo exibido. Duas cercas eram vício meu e saíram: a pílula com borda em volta da etiqueta de frente, que é o mesmo vocabulário que a P32 manda tirar do /about/, e o truque de gap sobre fundo colorido, que desenha régua mas conta como cerca.

O que ela custa, e o que não é medido. As seis candidatas de tipografia somam 341 KB de fonte que o site não carrega. E orcamento.test.mjs mede só a home: esta rota não passa pelo portão de peso. É aceitável numa bancada noindex de trabalho e seria inaceitável numa rota pública - quando uma família for escolhida, ela entra pelo astro.config.ts, com subconjunto declarado, e as outras cinco saem daqui.

E os dois campos custam HTML: cerca de mil traços curtos punham a página em 471 KB de marcação em 09/09, e em 12/09 o dist/laboratorio/index.html mede 669 KB - subiu de 300 KB quando a pincelada encolheu para a escala do quadro, porque traço curto significa mais traços. Aqui é o preço certo, e gerar no build é o que mantém o portão sem-js de pé. No hero, a P35 não faz assim: lá o campo é uma função pura avaliada em runtime sobre as 160 partículas que já existem, e o custo é aritmética, não bytes.

O que ela lê agora, neste navegador

Daqui para baixo nada é número gravado: é lido em tempo de execução do CSS, das fontes e dos módulos - e por isso muda com o tema, com a janela e com o navegador de quem está olhando. Sem JavaScript as tabelas ficam com o traço.

O contraste é calculado do valor computado, convertido de OKLCH para sRGB linear pela conta do próprio espaço (OKLab → LMS → RGB) - e não por canvas.fillStyle, que devolve preto para oklch() e deu duas rodadas de números falsos a dois agentes hoje.

Os módulos de cliente da home, lidos do disco no build: 74 arquivos, 1341,5 KB na fonte (antes de juntar, minificar e comprimir - o bundle é menor, mas a ordem de grandeza e a proporção entre eles são estas).

11 A televisão do vizinho

No Amélie Poulain, ela monta uma fita com cenas soltas e deixa na porta do vizinho que não sai de casa. Este aparelho faz o mesmo: sorteia uma cena da lista a cada visita e só procura o vídeo quando alguém liga - até lá, o que existe na tela é o quadro de capa. A lista mora em src/data/tv.ts, e acrescentar cena é acrescentar uma linha.

Depois, em 13/09/2026. A fita tem oito cenas, os dois botões do painel giram a sintonia de verdade (eram decorativos e aria-hidden), e a troca tem chuvisco de tubo com o corte caindo no meio da estática. A playlist do dono ficou de fora porque é privada, e list= privado derruba o embed inteiro - medido com e sem o parâmetro na mesma sessão. A televisão também mora no /sobre, no fim de tudo, sem legenda. Em aberto: o dono quer experimentar GIFs passando sozinhos, um após o outro, no lugar dos vídeos.

Ligar a televisão: Cute Lamb Needs Attention

12 A cortina de entrada

A home abre com uma cortina, e ela existe por três razões que não são enfeite: o som só nasce dentro de um gesto (a política de autoplay não reconhece pointermove; o clique que abre a cortina é o gesto que destrava o AudioContext); a figura demora a montar, e a cortina é o tempo dela; e movimento é preferência de sistema, mas o site oferece a porta local.

O que a cortina não faz. Não é portão: um clique entra, Escape entra, e há um abridor de emergência no script embutido para o intervalo em que o módulo ainda não chegou - medido em 13/09/2026 com a rede a 400 KB/s, o botão de entrar ficava 13 s desenhado e sem ouvinte, e o relato foi "está tudo branco". Não existe sem JavaScript. E não decide nada sozinha: som nasce desligado, movimento nasce como o sistema pediu. O endereço ?cortina a reabre, e sai da barra por replaceState ao entrar.

13 A poeira e as duas constelações

Entre os 320 grãos do céu, 26 escondem uma referência do dono. Ao clicar, abre uma folha; ao fechar, o grão voa até a constelação do seu lado e vira estrela. Virgem à esquerda, Câncer à direita - o signo solar e o ascendente, e ninguém precisa saber disso para jogar. A distribuição é semântica, gravada no catálogo: Virgem é a mente que analisa e ordena, Câncer é a casa, a memória e o que se sente.

Modo de teste: /?ovos pinta os ovos de vermelho e expõe a posição de cada um no data-ovos-xy do canvas; /?ovos=25 abre a visita com os 25 primeiros achados já encontrados, sem gravar nada.

14 O som

Silêncio é o padrão, e nada toca sem gesto. A regra vale para o acorde dos pilares, para os toques dos achados e para a trilha. Tudo o que soa está na mesma afinação: cada altura é um parcial da série harmônica sobre os mesmos 55 Hz - som de interface fora da afinação do resto lê como efeito colado por cima. A sala é uma só (SALA em afinacao.mjs: 2,8 s de cauda, corte em 2 400 Hz).

Um só AudioContext por página, fechado em pagehide - medido em 13/09/2026, o da cortina ficava running até o fim, e voz.fechar() nasceu por isso.

15 A memória, e o que você deixou aqui

Tudo o que o site lembra fica no navegador da pessoa - o site é estático, não há servidor, nada sai daqui. São dez chaves - oito no `localStorage` e duas na sessão da aba. A tabela abaixo lê as suas agora, neste navegador; sem JavaScript ela mostra só o que cada chave é.

O seu estoque de leitura, agora

Um texto conta quando fica visível por vinte segundos contínuos com a aba em primeiro plano - abrir, rolar e clicar não contam. O mesmo texto não conta duas vezes, e um texto de dois assuntos enche os dois. Quando os quatro nós enchem, a assinatura do rodapé passa a apontar para como este site é organizado.

Sem placar, e não é por gosto. As quinze combinações não vazias de quatro pilares são a estrutura de faces do K₄: quatro vértices, seis arestas, quatro triângulos e o todo. A figura já desenha esse objeto - ela é o caderno, e nenhuma medalha precisa existir. O estoque de leitura só conta o que esteve visível por segundos contínuos com a aba em primeiro plano: não conta abrir, rolar nem clicar, porque placar que sobe com clique mede clique.

16 A leitura e as listas, depois

As seções 03, 05 e 06 descrevem o que foi decidido entre 09 e 10/09. Em 13/09 as três superfícies foram refeitas de novo, e o que a medição achou desta vez não era a linha nem a entrelinha: