Case de cliente
Site institucional com uma cena 3D que acompanha a rolagem
Site institucional da AS Serviços com uma cena 3D criada em código: uma casa e uma placa-mãe desenhadas em linhas que reagem à rolagem da página.
O cliente e o contexto
A AS Serviços reúne engenharia física e software. O site precisava mostrar as duas frentes na mesma história.
Minha participação: Desenvolvimento da primeira landing page do site, com animações 3D, e de um painel para controle de projetos.
O problema
A empresa reúne duas frentes bem diferentes: a engenharia física, de um lado, e o software, do outro. Em um site comum, as duas podem virar uma lista de serviços sem relação entre si. O desafio era mostrar as duas na mesma história, de um jeito que prenda a atenção de quem rola a página e que continue leve em celulares e conexões mais simples.
O que foi feito
- As duas frentes da empresa, a física e a digital, aparecem na mesma história visual.
- Uma cena 3D que acompanha a rolagem: casa, instalação elétrica e placa-mãe aparecem desenhadas em linhas.
- A qualidade da cena se ajusta ao aparelho: celulares, conexões mais simples e quem prefere menos movimento recebem uma versão mais leve.
- Um painel para controle de projetos, desenvolvido junto com a primeira página do site.
Detalhes técnicos
Tecnologias
Decisões técnicas
- A cena é gerada em código, sem arquivo 3D pronto: o motor monta casa, instalação elétrica e placa-mãe com geometrias e linhas do Three.js.
- O canvas converte a rolagem em um progresso de 0 a 1 e o entrega ao motor da cena.
- A qualidade tem quatro níveis (estático, baixo, médio e alto), escolhidos conforme o WebGL, a preferência por menos movimento, a economia de dados, a conexão e a capacidade do dispositivo.
Como ficou
O que o cliente passou a poder fazer
- A empresa conta a engenharia física e o software na mesma história, em vez de duas listas de serviços sem relação.
- Quem visita no celular ou com conexão mais simples recebe uma versão mais leve da cena.
- A empresa passou a ter um painel para controle de projetos.
Quer um projeto parecido com este?
Conte o que você precisa. A conversa começa pelo WhatsApp, sem formulário.
Serviços ligados a este projeto
Site que traz pedidos pelo WhatsApp
Apresente seu negócio na internet com um site profissional: serviços, produtos, portfólio e caminhos claros para entrar em contato.
Ver o serviço: Site que traz pedidos pelo WhatsApp