Produto que precisa ser girado
Peça industrial, equipamento, móvel, embalagem. Se o cliente precisa entender volume e encaixe antes de comprar, foto não resolve — modelo interativo resolve.
Tecnologia · 3D e WebGL
Isto não é vídeo.
É a sua placa de vídeo.
Experiências tridimensionais que rodam direto no navegador — sem plugin, sem download — com fallback automático para quem não pode vê-las.
Three.js · WebGLShaders próprios em GLSL, não biblioteca de efeito pronta.
Fallback garantidoVersão 2D automática sem WebGL ou com movimento reduzido.
Orçamento de performanceTeto de peso e taxa de quadros definidos antes de construir.
O navegador virou plataforma gráfica. A pergunta deixou de ser “dá para fazer?” e passou a ser o que isso precisa provar.
3D não é enfeite.
É argumento.
Efeito bonito sem função vira peso morto no carregamento. Estes são os casos em que a cena interativa realmente paga o custo dela.
Configurador de opções
Cor, acabamento, medida, acessório. Ver a combinação montada na hora encurta a conversa comercial e reduz devolução.
Página de lançamento que precisa impressionar
Quando o objetivo é ser lembrado e compartilhado, uma abertura cinematográfica faz um trabalho que nenhum banner faz.
Explicar algo invisível
Processo industrial, fluxo de dados, funcionamento interno. Animar a explicação costuma ser mais barato que produzir um vídeo — e é interativo.
Diferenciação em setor visualmente igual
Quando todos os concorrentes usam o mesmo template, a experiência vira o argumento de posicionamento mais rápido de perceber.
Site de conteúdo, blog ou serviço local
Se a decisão do cliente é por preço, prazo ou proximidade, 3D é distração cara. A gente diz isso — inclusive quando é para dizer não ao próprio serviço.
Do conceito
ao quadro a quadro.
Cenas com Three.js e WebGL
Geometria, materiais e shaders escritos para o projeto, não biblioteca de efeito pronta aplicada por cima.
Shaders próprios (GLSL)
Ruído procedural, deformação e iluminação calculados na placa de vídeo — como o sólido que gira no topo desta página.
Modelagem e otimização de assets
Redução de malha, compressão de textura e nível de detalhe para o modelo caber num carregamento aceitável.
Integração com scroll e cursor
A cena reage à navegação com GSAP e ScrollTrigger, sincronizada ao scroll suave da página.
Fallback obrigatório
Versão 2D automática para quem não tem WebGL, está com movimento reduzido ativado ou usa aparelho fraco. Nunca uma tela em branco.
Orçamento de performance
Definimos antes o teto de peso e a taxa de quadros mínima aceitável — e a cena é construída dentro desse limite.
A prova está na própria página
A peça que gira no topo desta página não é vídeo nem GIF. É um sólido icosaédrico deformado por ruído procedural, com casca em wireframe e halo de partículas, recalculado a cada quadro na sua placa de vídeo, reagindo ao cursor e ao scroll.
Ela pausa sozinha quando sai da tela, reduz densidade no celular e some por completo se você tiver “reduzir movimento” ligado no sistema.
É o mesmo motor que usamos em vitrine de produto, configurador e página de lançamento. Se ela rodou bem no seu aparelho agora, a resposta técnica para o seu projeto já está dada.
Um projeto 3D
em cinco tempos.
-
Definição do que a cena precisa provar
Antes de qualquer polígono: qual dúvida do cliente essa experiência resolve? Sem resposta clara, o projeto não começa.
-
Prova de conceito rápida
Um protótipo tosco, mas real, rodando no navegador em poucos dias. É mais honesto que qualquer render de apresentação.
-
Direção de arte da cena
Cor, luz, material e ritmo de movimento definidos dentro da identidade da marca — não no padrão azul-neon de biblioteca.
-
Construção e otimização
Implementação com orçamento de performance fechado, testada em aparelho médio e não só na máquina do desenvolvedor.
-
Fallback, acessibilidade e publicação
Versão alternativa, verificação de movimento reduzido, marcação decorativa correta e publicação em CDN.
Sobre 3D
na web.
Isso não deixa o site lento?
Deixa, se for feito mal. A cena é carregada depois do conteúdo, pausada quando sai da tela ou quando a aba perde o foco, e tem densidade reduzida no celular. Em aparelho sem WebGL ou com movimento reduzido ativado, uma versão 2D entra no lugar — e a página continua completa.
Precisa instalar plugin ou baixar alguma coisa?
Não. Roda direto no navegador, com a mesma tecnologia que os jogos usam na sua placa de vídeo. A cena do topo desta página é a prova: não é vídeo, é geometria calculada quadro a quadro.
Funciona no celular?
Funciona, com contagem de partículas e resolução reduzidas para preservar bateria e taxa de quadros. Projetamos a cena já sabendo que ela vai rodar em aparelho médio, não em estação gráfica.
E quem usa leitor de tela?
A cena é puramente decorativa e marcada como tal — leitores de tela a ignoram. Toda informação vive no HTML. Nenhum conteúdo depende do 3D para ser acessado.
Tem um produto
difícil de explicar?
Conte o que precisa ser mostrado e para quem. Se 3D não for o caminho mais eficiente, dizemos isso — e sugerimos o que é.
Quando for, começamos por uma prova de conceito curta, para você ver rodando antes de comprometer orçamento de projeto inteiro.