Motion

Referências e o que já está no ar

A Nexum não é uma marca lúdica: é um torneio de tênis pra público de alto padrão (patrocinador, não criança jogando). Toda referência aqui é filtrada por dois eixos ao mesmo tempo, precisa ser geométrica (falar a língua do logotipo, da malha, do leão) e sóbria (o ritmo de uma marca de luxo, não de um parque de diversões). A combinação exata das duas coisas é rara no mercado, por isso boa parte das referências abaixo contribui só um dos dois eixos, com a ressalva explícita.

Referências de tom

Sóbrio, não lúdico

Rolex × Wimbledon / Grand Slams

Não é low poly, é a referência de tom: patrocinador de luxo de torneio de elite (Wimbledon, os quatro Slams, Ryder Cup). Sóbrio, pouco movimento, nunca lúdico. É esse o público, alto padrão de tênis.

Joffrey Spitzer, portfólio (Codrops)

GSAP minimalista de verdade: revelação de conteúdo, transição flip, tudo contido e discreto. É o ritmo certo pra Nexum, restrito, não é vitrine de efeito.

Bruno Simon (com ressalva)

Referência só de execução técnica em Three.js (física, câmera, acabamento), o tom é lúdico, carrinho de brinquedo, e isso não serve pra Nexum. Usar a técnica, descartar o tom.

Tutoriais replicáveis

Técnica, não tom

The Aviator (Codrops)

Cena 3D em low poly montada só com primitivas do Three.js, sem precisar de Blender. Referência de técnica pra uma peça 3D leve e geométrica, não de tom (o resultado do tutorial também é lúdico, precisaria de outra paleta e ritmo pra ficar sóbrio).

Cinematic 3D Scroll Experiences with GSAP (Codrops, 2025)

GSAP como diretor de cena: liga o scroll da página a caminho de câmera, luz e shader dentro de uma cena Three.js.

Bibliotecas

Avaliadas

GSAP

Desde maio de 2025 é 100% grátis, incluindo os plugins que eram pagos (MorphSVG, DrawSVG, SplitText, ScrollSmoother). Já em uso no projeto (ver abaixo).

Vanta.js, efeito NET

Fundo animado plug-and-play (three.js por baixo): conecta pontos com linhas trianguladas, reage ao mouse. Cogitado pra malha viva, mas descartado por enquanto: reage rápido demais ao cursor pra ficar sóbrio sem ajuste fino. O que foi implementado é mais discreto (ver abaixo).

Já implementado

Malha de fundo em low poly: a textura de losango (textura/malha-tile-lowpoly.svg) foi refeita como diamante facetado (4 triângulos por losango, cada um com uma opacidade diferente, luz vindo de cima-esquerda), no lugar do losango arredondado de fill único. Mesma grade, mesma leitura de rede, agora falando a língua do resto da marca.
Malha viva (src/app/malha-viva.tsx): um brilho dourado muito sutil (7% de opacidade) desliza devagar sobre o fundo, 22 segundos por passagem, como luz ambiente se movendo sobre uma superfície facetada. Desliga sozinho se o usuário tiver prefers-reduced-motion ativado.
Revelação de seção (Secao): todo bloco do manual entra com um fade e uma leve subida ao aparecer na tela pela primeira vez (GSAP ScrollTrigger, uma vez só, sem repetir ao rolar pra cima e pra baixo). Mesmo respeito a prefers-reduced-motion.

Durante esse trabalho foi corrigido um bug real: a malha de fundo tinha ficado invisível em toda página do manual desde que a navegação lateral (sidebar) foi adicionada, o painel de conteúdo tinha fundo opaco cobrindo a textura do body sem ninguém notar. Corrigido em nav-lateral.tsx (SidebarInset agora é transparente).

Próximos passos

1. Micro-interação nos componentes: hover e transição de página, mesmo princípio de restrição já usado na malha viva e na revelação de seção.
2. Peça de assinatura: uma cena 3D em low poly (técnica de "The Aviator", tom sóbrio, não o do tutorial original) reservada pra um momento único, tipo a home do site público, não espalhada pelo painel inteiro.