Exat é um sistema tipográfico de 1.715 glifos de estilo 21 inspirado no modernismo croata e no coletivo de arte EXAT 51. O site precisava refletir a lógica, a estrutura e a energia daquele contexto.
O resultado é uma experiência baseada em rolagem onde a tipografia reage, muda e se transforma por meio da interação. Este estudo de caso enfoca a intenção do projeto por trás dessas decisões e como o movimento e a interação foram usados para comunicar o sistema de tipos.
Master GSAP Web Animation
Aumente suas habilidades em GSAP com Mais de 300 lições que abrangem recursos e técnicas essenciais para criar e controlar animações de maneira mais eficaz.
Design Task
A tarefa principal era apresentar o Exat como um sistema em vez de uma coleção de estilos. A fonte carrega referências históricas e culturais, mas também é uma fonte variável contemporânea construída para uso flexível.
O microsite precisava:
- Mostrar toda a gama do tipo de letra sem sobrecarregar o visualizador
- Torne a variação legível por meio da interação, não da explicação
- Equilibre momentos expressivos com clareza e moderação
- Funciona tanto como um site promocional quanto como um espécime funcional
Em vez de separando “conteúdo” e “interação”, tratamos a própria tipografia como o principal elemento da interface.
Estrutura e Fluxo
O site está estruturado como uma experiência vertical contínua. Cada seção apresenta um aspecto do sistema de tipos e segue em frente antes que se torne repetitivo.
Seções mais calmas e focadas na leitura e comparação são seguidas por outras mais densas e expressivas. Esse ritmo foi importante para evitar fadiga visual e ao mesmo tempo demonstrar o alcance da fonte.
Scroll é usado como uma ferramenta estrutural em vez de um gatilho. O progresso no site está diretamente ligado ao movimento, permitindo que a experiência pareça controlada e previsível, mesmo quando o visual se torna mais complexo.
A grade de glifos
A grade de glifos de abertura apresenta Exat por meio de interação baseada em proximidade. Um campo de caracteres minúsculos responde à posição do cursor, mudando o peso e a cor com base na distância.
Esta interação foi projetada para comunicar várias coisas ao mesmo tempo:
- A continuidade do eixo de peso variável
- A precisão da interpolação entre extremos
- O caractere da fonte sob estresse
Não há instruções. O comportamento é imediato e legível. Em dispositivos sensíveis ao toque, onde essa interação perderia clareza, a grade é substituída por um substituto estático para evitar comportamento forçado ou ambíguo.
Como funciona
Calculamos a distância euclidiana do cursor ao centro de cada letra e, em seguida, aplicamos estilos com base nos limites de distância:
const frames = el.querySelectorAll(".frame"); const radius = remToPx(6); // Base influence radius const distances = new Array(frames.length).fill(0); // Define concentric "rings" of influence const rules = { ring1: { distance: radius * 1.00, weight: 200, color: "#0000cb" }, ring2: { distance: radius * 0.75, weight: 300, color: "#2546FF" }, ring3: { distance: radius * 0.55, weight: 400, color: "#5C92FF" }, ring4: { distance: radius * 0.45, weight: 500, color: "#FFCE2E" }, ring5: { distance: radius * 0.35, weight: 700, color: "#FFAE00" }, ring6: { distance: radius * 0.25, weight: 800, color: "#FF6200" }, ring7: { distance: radius * 0.125, weight: 900, color: "#FF0B00" }, };A cada movimento do mouse, recalculamos as distâncias:
function processMouseMove(e) { for (let i = 0; i < frames.length; i++) { const rect = frames[i].getBoundingClientRect(); const centerX = rect.left + rect.width / 2; const centerY = rect.top + rect.height / 2; distances[i] = Math.sqrt( (e.clientX - centerX) ** 2 + (e.clientY - centerY) ** 2 ); } }O loop de animação aplica estilos por meio de propriedades personalizadas CSS:
function animate() { for (let i = 0; i < frames.length; i++) { const dist = distances[i] / modifier.val; const fr = frames[i]; // Find which ring this letter falls into if (dist > rules.ring1.distance) { fr.style.setProperty("--fw", 200); fr.style.setProperty("--color", "#0000cb"); // Fade out letters far from cursor const opacity = normalize(dist, rules.ring1.distance * 2.5, rules.ring1.distance); fr.style.setProperty("--opacity", isHovering ? opacity : 1); } else if (dist < rules.ring7.distance) { fr.style.setProperty("--fw", 900); fr.style.setProperty("--color", "#FF0B00"); } // ... check other rings } if (isReady) requestAnimationFrame(animate); }Movimento sutil como contexto
Nem todo movimento se destina a ser notado. Em diversas seções, números grandes se movem em padrões lentos de ondas senoidais que reagem à velocidade de rolagem.
Esses movimentos não carregam informações por si próprios. Seu objetivo é adicionar profundidade temporal e evitar que a página fique estática durante as pausas. Quando a rolagem para, o movimento se estabiliza. Quando a rolagem acelera, o mesmo acontece com a oscilação.
Essa abordagem mantém a página ativa sem competir com a tipografia.
Exploração de fontes variáveis
A seção Design Space concentra-se na comparação controlada. Passar o mouse sobre os nomes dos estilos transforma o texto da amostra entre pesos e larguras em tempo real.
As transições são suaves e contínuas, evitando saltos bruscos entre estilos. Isso permite que os usuários entendam a relação entre os extremos, em vez de tratar os estilos como predefinições isoladas.
A interação é intencionalmente limitada em escopo. Um bloco de texto, um eixo de cada vez. O objetivo era clareza, não abundância.
Painéis controlados por rolagem
Para apresentar pesos de fonte e características principais, usamos painéis empilhados dentro de uma seção de rolagem fixada. À medida que o usuário rola, os painéis se substituem verticalmente, criando uma clara sensação de progressão.
Cada painel aciona suas próprias animações de texto internas somente quando se torna visível. Isso mantém a atenção focada e evita que vários elementos concorram pela ênfase.
A direção de rolagem é totalmente reversível. Mover-se para trás restaura os estados anteriores, reforçando a ideia de que a posição da rolagem é igual ao estado, não à sequência.
Momentos de tipografia expressiva
Certas declarações são tratadas de forma diferente. Grandes linhas tipográficas giram no espaço tridimensional à medida que entram na janela de visualização, usando uma rotação completa do eixo X antes de se posicionarem no lugar.
Esses momentos são usados com moderação. Seu papel é pontuar a experiência e referenciar o espírito experimental do material de origem, sem transformar todo o site em uma exibição de efeitos.
Colaboração e Restrições
O projeto foi desenvolvido em estreita colaboração com RISE2 Studio , com design e desenvolvimento evoluindo em paralelo. As considerações de desempenho informaram as decisões de design antecipadamente, especialmente em seções com muitas animações simultâneas.
The Tech Stack:
- WordPress com um tema personalizado e ACF para gerenciamento de conteúdo
- GSAP + ScrollTrigger + SplitText para todas as animações
- Lenis para rolagem suave
- Splide.js para letreiros infinitos
- Fontes variáveis para peso/largura em tempo real transformação
Os loops de movimento e as interações são pausados quando fora da tela e a rolagem suave é aplicada seletivamente. Em dispositivos móveis, as interações são simplificadas em vez de replicadas.
O desempenho foi tratado como parte do sistema de design, não como uma reflexão técnica tardia.
Resultado
O microsite Exat apresenta a tipografia como um sistema ativo em vez de um artefato estático. A interação é usada para revelar estrutura, alcance e comportamento, não para decorar a página.
O resultado é uma amostra que comunica como o tipo de letra funciona, permitindo que os usuários o experimentem diretamente.
