--- title: "Um portfólio sem páginas: como o site da FREITAG é feito" url: "https://leal.st/pt/artigos/portfolio-sem-paginas" answer: "A Leal construiu o portfólio da FREITAG como um documento só: uma cena WebGL, quatro sobreposições e nenhum carregamento de página. Projetos são lugares dentro de um domo que se atravessa. Cada estado empurra a própria URL, então dá para mandar um projeto a um cliente e o voltar funciona." author: "Leonardo Leal" publisher: "Leal" published: "2026-08-12T06:30:00.000Z" modified: "2026-08-12T06:30:00.000Z" language: "pt-BR" topic: "Engenharia" --- # Um portfólio sem páginas: como o site da FREITAG é feito A Leal construiu o portfólio da FREITAG como um documento só: uma cena WebGL, quatro sobreposições e nenhum carregamento de página. Projetos são lugares dentro de um domo que se atravessa. Cada estado empurra a própria URL, então dá para mandar um projeto a um cliente e o voltar funciona. ## Em resumo - A cena monta uma vez e nunca é descarregada. As quatro seções são sobreposições por cima dela, e é por isso que o movimento entre elas parece contínuo. - Não ter carregamento de página não obriga a não ter endereço. pushState e popstate dão URL real a cada estado, então link, refresh e botão voltar continuam funcionando. - Cada efeito de superfície usa uma ferramenta diferente por um motivo: um canvas de 132 por 165 pixels para o dither ordenado, um shader GLSL na GPU para o halftone sobre imagem em movimento. - O site não tem etapa de build. Os módulos carregam por importmap, então o que você escreve é o que roda. - A abertura parecia lenta por causa de um atraso que nós escrevemos, e não por peso. Medir encontrou três segundos que não carregavam nada. A FREITAG é um braço de produção audiovisual AI-driven, e o portfólio deles não tem home. Tem um domo. O estúdio inteiro é um espaço navegável. Projetos são lugares dentro dele, e você atravessa de um para o outro. Não existe transição entre páginas porque o site não tem páginas: são quatro sobreposições sobre uma cena que nunca é descarregada. É assim que ele é montado. ## Um documento, quatro sobreposições A cena é um canvas WebGL feito com three.js. Ela monta uma vez e fica montada. Studio, Index e Contact são camadas desenhadas por cima, e um projeto abre como mais uma, então o domo continua lá embaixo, guardando posição e inércia. É isso que faz o movimento parecer contínuo. Nada é destruído e reconstruído, então nada precisa ser reencontrado. O custo de uma troca de página normal, que é jogar tudo fora e começar de novo, simplesmente não acontece. E ela sustenta 60 fps enquanto você atravessa, sem perder quadro, numa passagem contínua que abre um projeto atrás do outro. É o número que decide uma cena dessas: portfólio que se atravessa só é agradável enquanto continua fluido. ## URL sem página Site sem carregamento de página costuma perder justamente aquilo para que serve um link. Este não perde. Cada estado empurra o próprio endereço com a History API, e o lê de volta no popstate: const target = "/" + routeForState() + location.search; if (location.pathname !== target) history.pushState({}, "", target); Então um projeto tem uma URL que dá para mandar a um cliente específico, atualizar a página devolve você ao mesmo lugar, e o botão voltar do navegador funciona como as pessoas esperam. A experiência é contínua e os endereços continuam reais. ## A superfície é calculada, e não filtrada A linguagem visual se apoia em efeitos calculados em tempo de execução, e cada um usa a ferramenta certa por um motivo diferente. A tela de entrada é um dither ordenado de Bayer desenhado num canvas 2D. O buffer é minúsculo de propósito, 132 por 165 pixels, e depois é ampliado: a grossura do ponto é o efeito, e calcular pequeno é o que deixa isso barato. A página About usa um halftone escrito como shader GLSL, rodando na GPU, porque ele precisa aguentar imagem em movimento e não um still. A tipografia embaralha antes de assentar, e a quebra de linha passa pelo SplitType para cada linha poder ser animada sozinha. O GSAP conduz as timelines que amarram tudo isso. ## Sem etapa de build Não há bundler nem package.json. O navegador carrega módulos ES por um importmap, direto de um CDN: three.js, GSAP, SplitType. Para um site desse tamanho isso é simplificação de verdade, e não pirotecnia. São 2.420 linhas de JavaScript e 1.149 de CSS em 122 arquivos. O que você escreve é o que roda, e não existe etapa de compilação entre mudar e ver. ## O gate é escolha O site abre numa soleira: um retrato em dither, os logos dos clientes e um botão escrito Enter. Você chega em algum lugar antes de chegar ao trabalho. Isso é deliberado. Um portfólio que todo mundo alcança por um link que a agência manda pode se dar ao luxo de ter porta de entrada, e a porta faz uma coisa que grid nenhum faz: ela ajusta o registro antes do primeiro projeto aparecer. O que ela não custa é a parte de baixo. A cena é legível para máquina mesmo sendo pixel, porque o canvas declara o que carrega e a linha da marca existe na marcação além de existir em 3D. Acessibilidade, boas práticas e SEO voltam todas em 100. ## Quem publica é o time Cases, imagens, o filme de abertura e os logos de cliente saem do Sanity. Acrescentar projeto é preencher um formulário, e não fazer deploy. É essa parte que decide se um site assim sobrevive ao primeiro ano. Portfólio que ninguém consegue atualizar vira a captura de tela do dia em que foi lançado. ## O que medimos - **Fluidez ao atravessar a cena 3D, sem queda de quadro**: 60 fps. Sustentado numa passagem contínua pelo domo, abrindo projetos no caminho, em navegador de desktop. (2026-08-12) - **Notas do Lighthouse em acessibilidade, boas práticas e SEO**: 100 out of 100, on all three. Lighthouse no site publicado. Três auditorias distintas, todas com nota cheia, num portfólio cuja superfície principal é uma cena WebGL. (2026-08-12) - **Tamanho do site, sem etapa de build**: 2420 lines of JavaScript, plus 1,149 of CSS across 122 files. Contado no repositório, sem as dependências, que carregam de um CDN e nunca são copiadas para dentro. (2026-08-12) ## Perguntas ### Por que não usar um framework? O site é uma cena e quatro sobreposições, sem estado compartilhado relevante e sem transição de página para orquestrar. Um framework acrescentaria etapa de build e árvore de dependências para resolver problemas que este site não tem. ### Um site de documento único ainda funciona com link e botão voltar? Sim, quando ele empurra o próprio estado. Este escreve o endereço a cada mudança e o lê de volta no popstate, então a URL de um projeto pode ser compartilhada, o refresh volta ao mesmo lugar e o voltar faz o que parece que faz. ### Por que calcular o dither num canvas minúsculo em vez de usar uma imagem? Porque a grossura do ponto é o efeito. Trabalhar em 132 por 165 e ampliar dá pontos grandes e regulares, custa quase nada para calcular, e continua nítido em qualquer tamanho de tela, em vez de ser um arquivo fixo que precisa ser exportado de novo a cada recorte. --- Publicado por Leal (LEAL DESIGN OFFICE LTDA.), Curitiba, Brasil. Versao canonica: https://leal.st/pt/artigos/portfolio-sem-paginas