Podium: Construindo um Site Onde Correr se Torna Contação de Histórias | Codrops

Podium é um estúdio de produção que cria filmes sobre corrida, trilha e cultura atlética, mas sempre através de lentes narrativas.

O trabalho deles captura o que acontece em torno da performance: o silêncio, o esforço, o ambiente, a presença humana.

A ideia inicial do site veio de uma simples observação: seus filmes já carregam um ritmo forte, mas a maioria dos sites de portfólio quebraria esse ritmo em pedaços desconexos.

Queríamos construir uma experiência que ampliasse sua narrativa em vez de achatá-la.

O projeto tomou forma ao longo de várias semanas, desde os conceitos iniciais até a implementação final. Um dos principais pontos de viragem foi abandonar desde o início uma estrutura baseada em páginas e comprometer-se com uma experiência contínua e orientada por sequências. Essa decisão influenciou tudo, desde a navegação até as transições e a hierarquia de conteúdo.

O principal desafio foi a contenção. Não o que construir, mas o que remover.

Tech Stack & Tools

O site foi construído como uma experiência de front-end personalizada, com a pilha escolhida principalmente para controle de tempo, manipulação de mídia e precisão de animação.

• Zustand lida com o estado de interação compartilhada, como posição do ponteiro, progresso da rolagem, fases de transição e estado da cena.
• Next.js fornece estrutura, roteamento, metadados e pontos de entrada de conteúdo renderizados pelo servidor.
• React é usado para o sistema de componentes e transições de UI orientadas por estado.
• GSAP alimenta a camada de animação, especialmente ScrollTrigger para cenas vinculadas a rolagem e Flip para transições de página.
• Lenis é usado para rolagem suave, sincronizado com o ticker GSAP para que a rolagem e a animação compartilhem o mesmo ritmo.
• Three.js / React Three Fiber conduz as cenas WebGL, incluindo o sombreador de herói, a seção de mosaico e o objeto de rodapé 3D.
• DatoCMS gerencia o conteúdo do projeto e da página inicial, mantendo a estrutura editorial flexível.

Análise de recursos

1. Hero Grain e Mouse Texture

A página inicial começa com uma forma que reage ao cursor. A intenção foi destacar uma das partes essenciais da linguagem visual do Podium: o grão.

O movimento do mouse é escrito em uma pequena textura de trilha. Essa textura é então passada para o shader e usada como mapa de influência. O cursor não move a forma diretamente. Isso perturba o material dentro dele.

Um detalhe importante é o modo de mesclagem: difference. A trilha não é apenas pintada normalmente na textura. A mesclagem de diferenças cria contraste comparando os valores de textura existentes com a nova entrada, o que dá ao traço uma sensação mais nítida e menos polida. Isso é útil aqui porque o efeito precisa estar mais próximo da granulação da imagem do que de um brilho suave.

const [mouseTexture, onMove] = useTrailTexture({
  size: 1024,
  maxAge: 600,
  blend: 'difference',
  radius: 0.095,
  intensity: 0.1,
  minForce: 0.5,
});

useFrame(() => {
  const { uvX, uvY, moveId } = usePointerStore.getState();

  if (moveId !== lastMoveIdRef.current) {
    lastMoveIdRef.current = moveId;
    onMove({ uv: { x: uvX, y: uvY } });
  }
});

No lado do shader, a textura da trilha é misturada com ruído e usada para compensar os UVs.

O resultado é uma distorção local: a imagem parece ter uma superfície e o cursor revela brevemente essa superfície.

2. Linguagem de pixels em microinterações #

A mesma ideia visual aparece em interações menores em todo o site. O texto não desaparece simplesmente. Muitas vezes aparece caractere por caractere, com uma ordem ligeiramente irregular. Os estados de foco também usam pequenos comportamentos semelhantes a pixels em vez de grandes animações decorativas.

const split = SplitText.create(el, {
 type: 'words,chars',
 charsClass: 'char',
 wordsClass: 'word',
});

gsap.to(split.chars, {
 opacity: show ? 1 : 0,
 duration,
 stagger: { amount: staggerAmount, from: 'random' },
});

Isso dá à interface um textura visual coesa. O tratamento de pixels conecta o herói, a tipografia, os controles do projeto e os pequenos momentos de foco sem explicar demais a marca. Está presente o suficiente para ser sentido, mas contido o suficiente para permanecer em segundo plano.

3. Transições de página

As transições do projeto foram projetadas para evitar a sensação de sair de uma página e carregar outra. Quando um usuário clica em um projeto, a mídia selecionada se torna o objeto de transição.

A animação começa na posição atual da mídia na grade. Uma sobreposição temporária é colocada exatamente em cima dela, usando o mesmo recurso visual. Essa sobreposição se expande para o herói do projeto enquanto a rota muda abaixo dele. 

Isso faz com que a transição pareça conectada ao conteúdo em vez de anexada à interface.

Passamos por várias iterações aqui. Uma versão usava um fundo estilo pixel durante a transição da página, mas começou a parecer muito pesado e não refinado o suficiente para a direção final. Foi visualmente interessante, mas desviou a atenção da mídia do projeto.

A versão final é intencionalmente simples e precisa: a imagem ou vídeo em si carrega o transição, sem adicionar um efeito visual separado na parte superior da mídia.

Design visual e de interação

O design é construído em torno de contenção e ritmo.

Evitamos intencionalmente efeitos visuais pesados. Em vez disso, nos concentramos em:

• Andar pela rolagem
• Transições sutis
• Hierarquia tipográfica forte
• Espaçamento generoso

A rolagem se torna o principal modelo de interação, não apenas para navegação, mas para contar histórias.

Há uma lentidão deliberada na experiência. Os elementos não aparecem instantaneamente; eles emergem. Isso reflete a natureza da corrida em si, que é progressiva, contínua e imersiva.

As transições são suaves e direcionais, muitas vezes verticais, reforçando a ideia de movimento através do espaço em vez de saltar entre estados.

Reflexões

Este projeto reforçou algo em que acreditamos fortemente: Nem todo site precisa ser rápido da mesma maneira. Às vezes, desacelerar é o que cria impacto.

Trabalhar no Podium nos levou a pensar em experiências digitais como objetos temporais, não apenas estruturas, mas sequências que se desdobram ao longo do tempo. Desafiou-nos a conceber com moderação, a remover em vez de adicionar, e a confiar no conteúdo o suficiente para lhe dar espaço.

Também destacou a importância do alinhamento. Quando o tema, a narrativa, o design e o desenvolvimento se movem todos na mesma direção, a experiência se torna coesa de uma forma que parece natural.

Podium agora tem um site que não apenas apresenta seu trabalho, mas o amplia. Um espaço onde os filmes podem existir nas condições certas, com o ritmo certo.

Um lembrete de que, às vezes, as melhores experiências digitais são aquelas que não tentam dizer mais, mas dizem melhor.