A tarefa
Um produto de segurança é difícil de mostrar. Não há o que fotografar, as capturas de tela são painéis iguais aos de todo mundo e as palavras da página são as mesmas de qualquer concorrente. Um site assim é lido como um folheto e fechado.
Por isso a página foi construída em volta de uma coisa que se move, e ela conta a história de um ataque: algo entra, o tempo passa sem que ninguém perceba, o intruso é encontrado, o intruso é contido. Quatro formas, quatro telas, sem legendas explicando.
A mecânica do campo de partículas veio de um site que desmontamos e refizemos com o nosso próprio código — apenas as fórmulas da simulação. O tema, as formas, a paleta, os textos e a interação são nossos.
O que construímos
Uma cena conduz a página inteira
Dez mil partículas vivem em um único campo. Cada uma é o contorno de um cubo, não um ponto, então a figura formada por elas se lê como um corpo com frente e fundo e continua legível quando gira.
O único controle é a rolagem. A página anda, as partículas voam para o próximo alvo e a forma se remonta na frente do leitor. Não há vídeo nem sequência de imagens, então a página não pode ser pega entre dois quadros e nunca roda igual duas vezes.
O problema é um número, e o número tem fonte
Duas semanas é quanto tempo um invasor fica dentro da rede antes de alguém perceber. Esse número sozinho sustenta todo o bloco do problema: aparece grande, em uma tela só dele, com o ano e o relatório de onde veio impressos logo abaixo, e não apenas afirmados.
Ao lado, as partículas formam uma ampulheta, e um grão da areia que cai é vermelho. É a mesma partícula vermelha que atravessa as quatro formas — o evento que ninguém olhou ainda.
A detecção é algo que o leitor faz com o cursor
Um contador no canto conta eventos desde o segundo em que a página abre, e a linha ao lado diz que um deles não pertence ali. O intruso é uma única partícula vermelha entre dez mil.
Aproxime o cursor e o campo se abre em volta dele. Clique e a página responde com a frase que vende o produto: isolado em 3,8 segundos. O que a seção afirma em palavras, o leitor já fez com a própria mão.
Nessa altura a forma virou um olho, e a partícula vermelha está na pupila.
A resposta é um escudo, e a página termina nele
A última forma é um escudo em três quartos, com aro, nervura e espessura própria, então ele se lê como um objeto e não como um ícone. O botão fica de frente para ele, na tela em que o leitor acabou de ver a ameaça ser trancada.
Todas as formas aqui são volumétricas de propósito. Entre as telas o campo gira e se desfaz, e uma imagem plana viraria uma linha assim que ficasse de perfil — a primeira versão do olho foi descartada exatamente por isso.
A página diz o que é e quem a fez
A Nocta é inventada. É um trabalho de portfólio, não um cliente, e o rodapé diz isso em uma linha em vez de deixar o leitor deduzir. Na mesma linha está a assinatura do estúdio.
Abaixo do escudo há um bloco escrito na nossa própria voz: cada tela aqui foi desenhada, medida e animada à mão, e a sua pode ser feita do mesmo jeito. Ele termina com um botão de WhatsApp, e um segundo botão flutua no canto de todas as telas.
O botão flutuante se abre sozinho depois de dez segundos, cumprimenta no idioma do navegador — inglês, russo ou português — e, uma vez fechado, não volta a abrir durante a visita.
Por dentro do projeto
A página inteira é escrita à mão e conferida por medição. Veja o que os números dizem sobre velocidade, cena, celular e peso do arquivo.
Partículas e cena
Dez mil partículas em uma malha
O campo é uma única malha instanciada: dez mil contornos de cubo desenhados a partir de uma geometria só, mais uma segunda camada de partículas maiores à frente.
As formas são calculadas antes de publicar a página
Calcular onde ficam dez mil pontos em quatro formas leva cerca de quarenta segundos, e no começo o navegador fazia isso a cada visita — meio minuto de espera.
O celular é uma engenharia à parte
No primeiro celular de verdade que testamos, o campo simplesmente não existia.
Velocidade e qualidade
93 de velocidade numa página com cena 3D
O Lighthouse mede a versão de desktop em 93 de desempenho: a primeira tela é pintada em 1,1 segundo, o tempo de bloqueio é de 10 milissegundos e o deslocamento de layout é 0,003.
95 de acessibilidade, 96 de boas práticas
O Lighthouse dá 95 de acessibilidade e 96 de boas práticas.
Um arquivo e uma requisição para fora
O site é um único arquivo HTML de 848 KB com o motor 3D, os shaders, as formas e os estilos dentro dele. Abrir a página no ar
Honestidade
O número da página tem fonte
As duas semanas que um invasor passa dentro da rede não são um número inventado para o layout: é a mediana global do relatório Mandiant M-Trends 2026, e a fonte está impressa embaixo do número.
A demonstração diz que é uma demonstração
A Nocta é uma marca que inventamos para o portfólio, e o rodapé diz isso com todas as letras ao lado da assinatura do estúdio.
No celular
O que saiu disso
- Dez mil partículas seguram 61 quadros por segundo em um desktop.
- Lighthouse no desktop: 93 de velocidade, 95 de acessibilidade, 96 de boas práticas.
- A primeira tela aparece em 1,1 segundo, e o deslocamento de layout é 0,003.
- O site inteiro é um arquivo: página, motor e formas juntos.
A página prova o produto do único jeito que um produto de segurança pode ser provado em um site: o leitor encontra sozinho o evento que não pertence ali, entre dez mil, e vê ele ser trancado. Todo o resto da página — o número, a fonte, a oferta — fica em volta desse minuto.
