Pular para o conteúdo
Nicolas PaixãoDesign e desenvolvimento de sites
Falar no WhatsApp (abre em nova aba)

Estúdio Prumo

arquitetura, engenharia e reforma · Aracaju · 2026

Projeto de demonstração: empresa fictícia criada por mim pra mostrar meu trabalho.

Primeira tela do site Estúdio Prumo
  1. 0:00A casa sobe do terreno
  2. 0:07O estúdio e as casas prontas
  3. 0:18Do terreno à chave
  4. 0:23Três frentes, um só estúdio
  5. 0:28Conte do seu terreno

O que o cliente ganha

  1. A obra sobe enquanto a pessoa rola a página: dá pra entender o trabalho sem ler.
  2. O caminho do terreno até a chave explicado em quatro passos.
  3. Contato fácil: um formulário curto e um botão de WhatsApp.

Como foi feito

Decisões

  • A casa sobe conforme a página rola. Um clipe de 8 segundos virou 80 quadros (56 no celular), desenhados numa tela (canvas), com mistura suave entre um quadro e outro.
  • Os quadros carregam em ordem esperta: o primeiro, depois um a cada 8 e só então o resto, 4 por vez. Assim a obra já começa a subir cedo.
  • Um fio de prumo fixo à esquerda desce junto com a página, e o peso balança conforme a velocidade da rolagem.
  • Quem reduz o movimento, economiza dados ou usa um aparelho mais fraco vê a casa pronta, parada, no lugar da animação.
  • O formulário e o botão de WhatsApp são de demonstração: nada é enviado.

No caminho: o que mudou e o que ficou imperfeito

  • Defeito conhecido: no clipe usado, a caixa de cima da casa aparece cedo demais e a mistura entre quadros deixa um “fantasma” curto.

Pilha

  • Next 16
  • GSAP 3.15
  • Lenis
  • canvas + quadros WebP
Falar no WhatsApp (abre em nova aba)