Voltar para o início

Cena 02 · Interface · 2026

EGI Rental — o cliente monta o container em 3D

O cliente monta o próprio container em 3D e manda o projeto pelo WhatsApp.

Rascunho — texto em revisão

Papel
Autor único — design, 3D, frontend, dados e deploy.
Stack
Next.js 16 · React 19 · TypeScript · Three.js · React Three Fiber · anime.js · Supabase · Playwright · Vercel
Links
Home da EGI Rental com um container 3D azul ao lado do título "Containers para locação em São Luís"

O problema

A EGI Rental aluga containers em São Luís — escritório, almoxarifado, sanitário, cozinha ou sob medida. Explicar por texto como um container de 10 ou 20 pés vira um escritório funciona mal: o cliente precisa ver.

O que eu construí

O site inteiro, sozinho, do zero ao ar em um dia (07/10/2026):

  • a home tem um container que se abre conforme a rolagem;
  • um comparador mostra os tamanhos em escala;
  • o catálogo é lido do banco por uma view pública, só com os campos que o site mostra — e há uma frota de reserva se o banco cair;
  • o montador 3D: o cliente escolhe 10 ou 20 pés (ou dois lado a lado), posiciona 20 tipos de móvel, portas e janelas, troca cores e manda o projeto pelo WhatsApp. O link guarda o projeto inteiro.

Decisões

O 3D só baixa quando alguém pede. A cena carrega quando o visitante toca em “Começar a montar”; quem só quer o telefone não paga pelos megabytes.

Colisão visível. Um móvel que encosta em outro fica vermelho, em vez de travar o arraste.

Aparelho fraco desliga efeitos sozinho. O montador mede o desempenho e reduz a qualidade quando precisa.

Em números

  • 100 no Lighthouse mobile em acessibilidade, boas práticas e SEO nas 5 páginas medidas (desempenho 87–93)
  • recálculo de estilo da animação: de 6,5 s para 0,5 s
  • montador no celular: de 34 para 55 fps; Lighthouse do montador de 69 para 90
  • testes de unidade e de ponta a ponta com Playwright