Making of
Todo efeito deste site tem uma história, e quase todas começam no céu: a cor saiu do espectro de uma aurora, a fonte de display tem nome de astrônomo, o cursor é um buraco negro, e o tecido atrás dos projetos é o espaço-tempo. Nada aqui é vídeo nem biblioteca pronta: é canvas, WebGL e CSS escritos à mão.
- 28.379
- linhas de código
- 140
- arquivos
- 158
- tokens de design
- 12
- dependências de runtime
A aurora saiu de fotos de verdade
O céu que abre esta página é a única aurora dela: um campo de fluxo em WebGL2 cru. Sem three.js, sem GSAP, sem biblioteca de shader. Passe o cursor por ele: reage com o mesmo amortecimento da cena de referência de onde foi portado.
Os matizes não vieram da teoria. Fotos de referência de auroras reais foram convertidas pixel a pixel para OKLCH: o verde medido faz pico em 160–165° (o token fica em 158°), e o magenta que a teoria colocava em 322° mediu 335°. Seis das nove fotos não tinham magenta nenhum, e é por isso que o magenta aqui é acento raro, não faixa.
0 · rgb(126 249 176)0.18 · rgb(56 224 158)0.38 · rgb(30 178 148)0.58 · rgb(22 96 96)0.78 · rgb(16 34 38)1 · rgb(10 14 16)
Base escura, verde como luz
A paleta é um céu noturno, não uma cor de marca. Toda superfície fica em croma baixo (azul-noite quase neutro, porque céu noturno de verdade é quase neutro), e o verde só existe como luz: um brilho, uma aresta, uma linha. Nunca como preenchimento. É essa regra, e só ela, que separa brilho espacial de marca de sustentabilidade.
E o verde não é um verde qualquer. A uns 100 km de altitude, partículas solares atingem o oxigênio atômico e ele responde num comprimento de onda exato: 557,7 nm, a linha que faz a aurora ser verde. O azul é o nitrogênio ionizado em 427,8 nm. A paleta deste site não é moodboard; é um espectro.
voidabysssurfacesurface-hilineline-hi
greenblue
- Aa
fg - Aa
fg-dim - Aa
fg-mute
Esse azul quase nunca aparece como superfície, e isso é de propósito. Ele mora como fio: todo painel de vidro daqui carrega uma linha verde na borda de cima e uma azul na de baixo. O capítulo seis é onde dá para ver.
Toda a emissão passa por uma variável só, --color-emit-accent. Trocar a linha de emissão do site é uma edição num lugar único. O mecanismo está pronto; o verde é a linha em uso.
Kepler, por nome
A fonte de display de todo hero deste site é a Kepler. Numa página feita de céu noturno, um nome de astrônomo não era coincidência para desperdiçar: Johannes Kepler é quem olhou para as órbitas que todos desenhavam como círculos e mediu elipses, as leis que até hoje guiam qualquer espaçonave. Quatro séculos depois, a NASA pôs o nome dele num telescópio que encarou o mesmo pedaço de céu por nove anos e achou mais de 2.600 planetas em volta de outras estrelas.
As outras duas vozes ficam fora do caminho de propósito. A Inter carrega o corpo do texto, e a JetBrains Mono carrega o metadado: as coordenadas, os comprimentos de onda e as datas que uma página como esta não para de citar.
Um checkout pensado para a Amazônia
Um checkout pensado para a Amazônia
Um buraco negro, três vezes
O mesmo buraco negro aparece três vezes neste site: ele é o cursor, é o que segura o nome na home, e é a página de erro. O nome primeiro. Ele é rasterizado da fonte real e amostrado numa grade, e cada célula de tinta vira uma partícula presa por uma mola. Quem puxa essas partículas é o cursor, e ele puxa como buraco negro:
Gravidade com giro
A atração tem um componente de lado. Esse giro é a diferença entre um buraco negro e um ímã.
Horizonte de eventos
Partícula que cruza é projetada de volta para a superfície. Nada sai, mas nada se perde também.
Disco de acreção
O anel brilhante só acende quando há matéria ao alcance: buraco negro sem o que comer é invisível.
O cursor que você está movendo agora já foi outro objeto. Era uma lupa de vidro, refração de verdade, o próprio material do site aplicado ao ponteiro. Reprovou na semana em que o site foi ao ar: recompor o fundo através de um filtro a cada quadro trava um notebook comum. O que entrou no lugar dobra luz. O site inteiro ganhou um céu fino de estrelas atrás do conteúdo, e o cursor aplica nelas a equação da lente gravitacional: cada estrela é empurrada para fora, uma segunda cópia invertida aparece do outro lado, e quando o alinhamento fecha surge o anel de Einstein. Nada disso lê o fundo. É aritmética e meia dúzia de elipses. Sobre o nome a física é mais antiga e mais simples: o cursor sempre foi o atrator, e as partículas caem na direção dele. É assim que se vê um buraco negro, aliás: pelo que ele faz com a luz e a matéria ao redor.
Na página de erro o mesmo buraco negro deixa de ser ferramenta e vira o assunto. O anel em volta é o disco de acreção: matéria presa em órbita, esquentando por atrito e brilhando na descida. Chamam de lixão do universo. Nada que atravessa o horizonte de eventos volta, e isso inclui endereço digitado errado.
Christofer Ramos
O tecido atrás dos projetos
Debaixo da pilha de projetos da home existe uma malha. Ela não é enfeite: o espaço-tempo como os diagramas de física desenham, um tecido de coordenadas que a massa deforma. O link de saída daquela seção mora dentro de um poço de gravidade, e a malha se curva na direção dele. A regra por trás de todo fundo deste site: o campo se ancora em conteúdo, nunca flutua solto.
Puxe o poço fundo o bastante e ele abre num buraco de minhoca. É desenhado com polilinhas e uma fórmula de perspectiva de duas linhas, s = f / (f + z). Sem biblioteca 3D: buraco de minhoca é mais barato que a fama.
E o salto entre páginas é a mesma fórmula pela terceira vez: um campo de estrelas convergindo no ponto de fuga enquanto a rota troca no meio do voo. Três efeitos, uma projeção. A transição que trouxe você até aqui era este capítulo o tempo todo.
A API de transição de página do próprio navegador faria isso de graça, e chegou a ser testada. Ela tira um snapshot da tela, e snapshot congela todo canvas. Num site onde tudo que importa se move, a versão feita à mão ganhou.
Este é o campo de verdade, não um desenho dele: o mesmo componente que a home roda, com o mesmo poço abrindo debaixo do link.
Onde o vidro vive, e onde ele morre
Vidro não está aqui por moda. Num site de tema único não existe modo claro para contrastar, então a hierarquia tem que vir de profundidade em vez de cor. E profundidade é exatamente o que o material compra: o controle recua, o conteúdo avança. Mesma linhagem Apple da tab bar do celular, e o mesmo motivo pelo qual ele morre dentro de uma tela de produto.
O material da moldura refrata o que passa por baixo, e o brilho especular segue o cursor. Quando um painel expande, engrossa. Conteúdo nunca apoia direto no vidro: sempre há uma camada sólida sob o texto.
E dentro de uma tela de produto o vidro morre sozinho, por uma regra de CSS, não por disciplina. A personalidade do site mora na moldura; o trabalho mostrado nunca compete com ela.
Olhe as bordas: verde em cima, azul embaixo. É o capítulo dois aplicado como fio: os dois comprimentos de onda da aurora, um em cada extremidade da peça.
Desenhado por um humano, construído com um agente
Este site foi desenhado pelo Christofer e construído em parceria com o Claude Code. O método é o que faz isso funcionar. Decisão visual vira medição: contraste é calculado, cor renderizada é lida de volta da página, sobreposição é provada com teste de acerto, e as legendas de foto da página Sobre foram conferidas contra os originais por hash perceptual. As decisões moram em arquivos do projeto que toda sessão seguinte lê, então nada é rediscutido do zero.
A lista de dependências aqui embaixo é tudo, também contada do repositório. Tudo que se move neste site (a aurora, as partículas, a malha, o buraco de minhoca) foi escrito à mão, então o que sobra são as peças que seria imprudência reescrever: o framework, a runtime de animação, o globo de 5 KB.
Design porChristofer Ramos
Feito comClaude Code