Faltam dez anos: projetando uma história em quadrinhos interativa para o décimo aniversário do Studio375 | Codrops

Dez anos é uma coisa estranha de se segurar. Você está indo de cabeça baixa, cliente após cliente, prazo após prazo, e então, uma manhã, alguém diz que já se passaram dez anos, e você não tem palavras para definir o que isso significa.

Não queríamos marcá-lo com um novo site de portfólio. O tipo usual: uma grade refinada de estudos de caso, uma página limpa, uma bela animação do herói. Foi como colocar um laço em um arquivo. Um portfólio diz: aqui está o que fizemos. Mas um aniversário é algo diferente. Um aniversário tem personagens. Tem capítulos. Tem pessoas que chegaram e mudaram as coisas e eventualmente seguiram em frente, e uma forma que só se torna visível depois de passado tempo suficiente.

Então fizemos uma história em quadrinhos.

Dez capítulos, um por ano, ilustrados por Davide Grazi, um ilustrador local que conhecemos e amamos, que passou meses trabalhando conosco para dar a cada ano seu próprio visual personagem. Desde o início, sabíamos que não queríamos uma retrospectiva que parecesse um kit de imprensa. O trabalho de Davide foi o que tornou isso possível. Ele desenhou as pessoas. As pessoas reais que apareceram, que deixaram a sua marca, que fizeram de cada ano o que ele foi. Cada capítulo captura o que aconteceu: quem entrou no estúdio, quem saiu, como era o trabalho, como era o clima naqueles meses.

O tom é engraçado e um pouco hiperbólico. Dez anos de pessoas reais, com todo o carinho e constrangimento que isso acarreta.

Também queríamos que ele existisse como um objeto físico. Antes de uma única linha de WebGL ser escrita, havia uma versão impressa: projetada, disposta e impressa em papel. Parecia que algo nessa história precisava de peso, não do tipo que fica em uma aba do navegador e desaparece no momento em que você a fecha, mas do tipo que fica em uma mesa ou em uma gaveta.

A experiência interativa veio depois, como forma de compartilhar a mesma história com o resto do mundo.

Um ano depois

Há uma linha no site: um ano depois…

Não é decorativo.

O projeto começou em 2025. Tivemos testes iniciais de rolagem, nossos primeiros experimentos WebGL, layouts preliminares de painel. E então, como costuma acontecer, o trabalho do cliente se acumulou, as prioridades mudaram e tudo foi para a gaveta.

Retomamos em 2026. Começar de novo depois de um ano é desconfortável de uma maneira específica: você não pode fingir as escolhas que você feitas pela primeira vez eram inevitáveis. Você os vê como escolhas. Você para de justificar as decisões iniciais e começa a perguntar se elas estavam realmente certas, e às vezes a resposta é não.

Então colocamos na cópia. “Um ano depois” está no site porque aconteceu, porque antes tarde do que nunca e porque cumprir uma promessa feita a si mesmo ainda conta, mesmo quando demora um ano a mais do que o planejado.

Como funciona a experiência

O site é uma história em quadrinhos horizontal com rolagem. Conforme você rola, a câmera percorre os painéis de cada capítulo, acompanhando seu progresso ao longo do ano. Tudo o que é visual é executado dentro de uma tela WebGL fixa construída com React Three Fiber . Lenis cuida da rolagem suave, inserindo dados de posição em tempo real na cena. O GSAP conduz as animações, junto com a camada que fica acima da tela: legendas, títulos de capítulos e outros elementos de texto que vivem fora dela.

O conteúdo vem de um back-end WordPress sem cabeça, onde cada ano é seu próprio tipo de postagem personalizado. No lado do Three.js, as posições dos quadros e os alvos da câmera são codificados por ano em um arquivo de dados. Isso foi em parte para nos dar um controle espacial preciso sobre como cada capítulo é lido como uma composição, e em parte porque nunca construímos as cenas no Blender primeiro. Tudo foi colocado diretamente no Three.js, por toque, iterando no navegador. Codificar as coordenadas foi menos uma decisão de design do que uma consequência natural de como trabalhamos.

O plano de fundo é um plano de shader GLSL que responde à velocidade de rolagem. As próprias sombras são geradas no fragment shader usando ruído fBm, oitavas em camadas de ruído Perlin que dão aos patches sua qualidade orgânica e irregular.

Em repouso, ou enquanto rola lentamente, eles se espalham pelo avião em aglomerados soltos, como fumaça. Role mais rápido e eles se estendem em faixas finas, direcionais e alongadas que confundem a sensação de lugar e empurram a sensação para a velocidade, para a passagem do tempo. É sutil, mas ganha seu lugar.

Quando você passa de um ano para o outro, as sombras suaves do fundo se dissolvem primeiro. Em seguida, os painéis individuais do novo capítulo aparecem separadamente, dispersos, ainda não posicionados, e deslizam para um alinhamento antes de se fundirem na página inteira. O ano se monta diante de você.

O objetivo é parecer menos com o carregamento de uma página e mais com algo chegando.

A navegação do livro

Esta página mostra uma experiência diferente: um flipbook 3D, renderizado inteiramente em Three.js. Cada folha do livro é uma BoxGeometry. Arraste para a esquerda e a página avança; arraste para a direita e ele volta. O tratamento de gestos é executado em @use-gesture/react, enquanto o GSAP conduz as animações de inversão reais. As viradas de página são acompanhadas por som. O livro desliza para fora da tela ao entrar, gira no lugar e sai da mesma maneira quando você navega para um ano diferente.

Mouse Trail

Ficamos nos perguntando: como fazer uma página da web parecer uma história em quadrinhos sem depender apenas da ilustração?

Quando você move o mouse, ele deixa um rastro. Nos bastidores, há um efeito WebGL de duas passagens: a primeira passagem acumula o movimento em uma textura de renderização que desaparece lentamente e a segunda o converte em um padrão de pontos de meio-tom. Mas a razão pela qual o construímos não é técnica. É que o ponto benday, a grade de pequenos círculos que dá textura à impressão offset, é uma das marcas mais reconhecíveis do meio.

Queríamos que essa referência vivesse na interação em si, não apenas nas ilustrações. Os pontos seguem você pela página, aparecem nos painéis e encolhem silenciosamente quando você passa o mouse sobre algo clicável. Uma coisa pequena, mas importava para nós que a lógica cômica perpassasse por toda parte, não apenas na arte, mas em como você se move pela experiência.

Otimizações

Para as texturas do painel, usamos a compactação KTX2 via useKTX2 da biblioteca drei do React Three Fiber. O formato é interessante porque ignora totalmente a decodificação da CPU antes do upload: a GPU o lê diretamente, em seu formato nativo compactado. Vimos isso ser usado em projetos que admirávamos e queríamos entender como funcionava na prática.

Pensamos muito em manter as coisas leves. Todos os painéis de quadrinhos compartilham uma única instância PlaneGeometry em vez de alocar nova geometria por malha. Limitamos a proporção de pixels do dispositivo em 1,5 e desabilitamos recursos WebGL que a cena não usa, como buffer de estêncil e mapas de sombra. AdaptiveDpr diminui ainda mais a resolução se a taxa de quadros cair. Os materiais e os cronogramas do GSAP são descartados explicitamente na desmontagem, portanto, nada se acumula durante a navegação. E as texturas para o próximo capítulo são pré-carregadas durante a transição da página, então a espera ao alternar entre os anos é a mais curta possível.

É perfeito? Não, há coisas que faríamos de forma diferente.

Mas é nosso e isso conta para alguma coisa.

Som como um capítulo

Cada ano tem sua própria faixa de áudio, escolhida para combinar com o clima da narrativa daquele capítulo, não para preencher o silêncio. É uma pequena decisão editorial que acaba importando mais do que você esperava: a música certa muda a forma como você lê uma página.

Nos bastidores, o áudio é gerenciado via Howler.js. Acompanha o crossfade conforme você avança entre os anos. No desktop, a velocidade de rolagem aumenta ligeiramente a taxa de reprodução: role mais rápido e a música acelera com você.

Também pulamos totalmente o áudio em conexões lentas. Antes de qualquer coisa ser reproduzida, verificamos a API de informações de rede em busca de sinais saveData, 2G ou 3G. Se a conexão parecer lenta, a música simplesmente não inicia. Não é uma otimização dramática, mas parecia a decisão certa: o áudio era o recurso mais pesado no celular, e forçá-lo em uma conexão fraca teria sido pior do que o silêncio.

Como é construir para você mesmo

Esta é a parte que mais nos surpreendeu.

Construímos coisas para clientes o tempo todo. Sempre há um briefing. Sempre há o julgamento de outra pessoa a ser levado em consideração, alguém a quem recuar se você estiver errado. Construir algo para celebrar a si mesmo, sem nenhum cliente em cena, é um tipo diferente de pressão. A única pessoa que pode dizer se isso é bom o suficiente é você, e acontece que isso não é tão libertador quanto parece.

O que não esperávamos era o quanto aprenderíamos sobre o que o estúdio realmente é ao tentar contar sua história. Você passa dez anos dentro de algo e nem sempre vê isso com clareza. Fazer uma história em quadrinhos sobre esses anos obriga a uma espécie de acerto de contas: pensar realmente em cada um, escolher o que mostrar e o que deixar de fora, descobrir quem realmente são os personagens. Vale a pena.

Para um estúdio pequeno, chegar a dez anos não é nada.

Conseguimos isso com muita ajuda de muitas pessoas, e este projeto foi nossa tentativa de dizer isso em voz alta, em vez de apenas sentir em particular.

Obrigado

Isso não existiria sem nossa equipe, e sem todos, sem exceção, que passaram pelo Studio375 em algum momento do passado dez anos.

Ainda estamos indo.

Se você achou isso útil, ou apenas gostou da leitura, você pode acompanhar nosso trabalho aqui: Instagram ,  LinkedIn , 375.studio