Este site

O primeiro experimento do laboratório é o próprio site que você está lendo. O código está aberto.

Problema

Construir o site da Tecnologia Básica sem cair na estética padrão de marca de IA — fundo escuro com gradiente roxo, partícula flutuando, promessa de transformação — e sem sacrificar performance ou acessibilidade em nome do efeito visual.

Hipótese

Se a identidade vier de desenho de engenharia em vez de efeito visual, ela sai da composição: fio fino, cota, chamada anotada, numeração que corresponde a algo real. Composição custa zero em tempo de execução.

A metáfora central é o corte técnico: a superfície é simples, e o corte revela as camadas que a sustentam.

Arquitetura

Next.js com App Router e geração estática. Três decisões que valem registro:

Todo o conteúdo editorial fora dos componentes. Um único arquivo concentra textos, links e configuração. Trocar uma frase não é mexer em React.

A cena tridimensional isolada. Ela vive numa pasta que nenhum outro componente importa. O site inteiro funciona sem ela.

Geometria procedural. As placas são caixas geradas em código — nenhum modelo é baixado. O custo de rede da cena é zero.

Implementação

O desenho estático em SVG foi construído primeiro, e é ele que aparece quando não há WebGL, quando o aparelho é fraco e quando a pessoa pede menos movimento. O 3D é melhoria progressiva, nunca requisito.

A câmera é ortográfica, não em perspectiva: perspectiva curva as placas e destrói a leitura de prancha de projeto.

O Three.js pesa cerca de 866 KB e só é baixado quando a seção que o usa se aproxima — não entra no carregamento inicial.

Resultado

Duas verificações viraram teste automatizado em vez de promessa:

• O contraste de cada par de cores do design system é calculado contra a WCAG. Quebrar a legibilidade quebra a suíte.
• A estrutura de acessibilidade é auditada nas rotas: um h1 por página, hierarquia sem salto, texto alternativo, rótulo de campo.

Números de Lighthouse serão medidos e publicados aqui depois do deploy no domínio final.

Aprendizados

O fallback primeiro muda o projeto. Construir o SVG estático antes do 3D não foi cautela — foi o que garantiu que o site sobrevive sem ele. Feito na ordem inversa, o fallback vira remendo.

Movimento precisa de justificativa. Toda animação que sobreviveu responde a uma pergunta: isso ajuda a contar a história? A maioria das ideias iniciais não passou nesse filtro.

Estado vazio é tela de primeira classe. O site nasceu sem conteúdo. Uma grade vazia parece defeito; um estado desenhado parece decisão.