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.
- 23.368
- linhas de código
- 125
- arquivos
- 114
- tokens de design
- 11
- 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 nome feito de partículas
O nome da home é rasterizado da fonte real e amostrado numa grade; cada célula de tinta vira uma partícula presa por uma mola. O cursor é um buraco negro, e a física é a parte divertida:
Gravidade com giro
A atração tem componente tangencial: o giro é o que separa um buraco negro de um ímã.
Horizonte de eventos
Partícula que cruza é projetada de volta para a superfície dele. Nada escapa; 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.
Christofer Ramos
E o anel lê diferente aqui e na home. A diferença é real, não é impressão. A tinta é sempre a mesma: a linha de emissão verde, um degradê só. Quem pinta de azul é o cursor. A lupa que ele carrega amostra cada canal de cor numa escala diferente, de propósito (34 pixels no vermelho, 28 no verde, 22 no azul), e onde os três deixam de coincidir sobra franja. Na home esse mesmo anel está sobre a aurora, que já é verde e de baixa frequência, então a franja não tem contra o que aparecer. Aqui ele está sobre o preto, e o azul vem inteiro: aberração cromática, do tipo que vidro de verdade tem, na borda de um buraco negro.
O mesmo buraco negro virou objeto próprio na página de erro. Lá ele não é ferramenta, é o assunto. O anel em volta tem nome: disco de acreção, a matéria que ficou presa em órbita, esquenta por atrito e brilha na descida. Chamam de lixão do universo, e nada que atravessa o horizonte de eventos volta: nem matéria, nem luz, nem endereço digitado errado.
O objeto da 404, rodando aqui. São dois canvas empilhados com o horizonte de eventos desenhado ENTRE eles: partícula atrás da esfera vai no de baixo, partícula na frente vai no de cima. A esfera é o único pixel opaco da peça inteira, e é isso que faz o disco passar por trás dela e sair do outro lado.
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.
E esta é a outra ponta. Atravesse o poço aí em cima e a página de projetos recebe você por aqui: a garganta do túnel, desenhada com o mesmo s = f / (f + z) do poço, do campo de estrelas e da transição de página. Uma projeção, quatro lugares.
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.
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.
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.
.glass
.glass
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