O site pesado que voa: assim fizemos a Ára, um portfólio de arquitetura com planta interativa, maquete 3D e o sol real de Assunção

Um escritório de arquitetura vende algo que ainda não existe. O cliente não pode entrar na casa, tocar o tijolo nem ficar no pátio às quatro da tarde para ver se ali bate sombra. Ele precisa imaginar. E quase sempre imagina a partir de um PDF com renders, de um perfil no Instagram ou de um site com fotos bonitas e um formulário.

Quisemos ver até onde dá para levar essa imaginação num site sem que ele fique lento. O resultado é a Ára Arquitectura, um escritório fictício de Assunção e a demonstração mais ambiciosa que fizemos até hoje: capa em vídeo, uma planta interativa de verdade, uma maquete 3D que se monta sozinha e um simulador de insolação com o sol real de Assunção. É um site pesado e, mesmo assim, tira 96 no PageSpeed no celular.

Uma página que dura um dia

A ideia que organiza tudo é simples: a página é um dia. No topo, ao lado do logo, há um relógio que começa às 6h e avança conforme você desce. Cada seção tem a cor da sua hora: a capa é o amanhecer, os projetos são a manhã, a planta é o meio-dia, a maquete é a tarde e o rodapé já é noite e diz "Buenas noches".

Não é enfeite. Um escritório que projeta pensando na luz precisa mostrar como a luz muda ao longo do dia, e a página conta isso enquanto você navega.

O que o cliente vive, seção por seção

A capa: a casa em vídeo

A capa é um vídeo da Casa Celosía, a obra principal do escritório. Há duas versões: uma horizontal para o computador e outra vertical para o celular, assim no telefone não aparece um recorte estranho do meio da imagem. O texto fica embaixo, sobre uma faixa escura, para a parte de cima do vídeo ficar limpa e a arquitetura ser a primeira coisa que se vê.

Projetos que passam de lado

Os seis projetos passam de lado enquanto você desce, como um portfólio de arquitetura que se folheia. Ao tocar num deles, a foto cresce até ocupar a tela e abre a ficha: localização, ano, metros quadrados, uma segunda foto e o texto do projeto.

A prancha: uma planta de verdade sobre a mesa

Esta foi a parte que mais deu trabalho e a que mais gostamos. Sobre uma mesa de desenho aparece uma prancha completa, como as que um escritório prepara para apresentar um projeto: planta térrea, planta alta, um corte, o quadro de áreas, as legendas, a localização e o carimbo. Não é uma imagem: a planta é desenhada com código, linha por linha, a partir das medidas da casa. Por isso fica nítida com qualquer zoom.

E dá para usar:

• Vistas: a prancha inteira, a planta térrea, a planta alta ou o corte.
• Camadas: móveis, cotas, ventilação cruzada (setas animadas que mostram por onde o ar circula) e sol.
• Ambientes: você toca na sala, na cozinha ou numa suíte e abre a ficha, com os metros quadrados, uma foto e para que lado está voltada.

O corte com o sol: a insolação, explicada

No corte você escolhe o dia e a hora, e o desenho mostra por onde o sol entra, com que ângulo e até onde chega. Em 21 de junho às 9h30, por exemplo, o sol está baixo e a demonstração avisa que ele passa por baixo do beiral e entra 3,5 metros na sala. Em dezembro, ao meio-dia, o sol está a 88° e o beiral de 1,20 metro não o deixa entrar.

Isso tem nome em arquitetura: estudo de insolação. No Paraguai é uma busca que cresce: no Google Trends, "asoleamiento en arquitectura" aparece entre as consultas relacionadas a "arquitectura" que mais subiram nos últimos cinco anos (+200%), junto com "portafolio arquitectura" (+250%) e "render arquitectura" (+150%). São porcentagens de interesse relativo, não volume de buscas, mas mostram para onde olha quem procura arquitetura.

A maquete que se monta na ordem da obra

Depois da planta, a mesma casa aparece em 3D e vai sendo construída enquanto você desce, na ordem em que uma obra sobe: a planta no chão, as paredes, a laje, o pavimento superior, o telhado e os beirais, o cobogó e o pátio. A maquete sai dos mesmos dados da planta, então as duas nunca se contradizem.

O simulador de insolação

No fim do percurso da maquete há um painel para testar o sol na casa. Você escolhe uma data (21 de dezembro, 21 de março, 21 de junho ou o dia de hoje), move a hora e a maquete projeta a sombra real. A posição do sol é calculada com as fórmulas públicas da NOAA para a latitude de Assunção e no horário oficial do Paraguai: em 21 de junho ao meio-dia, o sol fica a uns 41° acima do horizonte, ao norte. Com o mouse, também dá para girar a maquete.

E tudo o que um escritório precisa

O resto da página é o que qualquer escritório precisa ter, contado com o mesmo cuidado: os materiais com que trabalham, os serviços (projeto, aprovação na prefeitura, direção de obra, reformas, design de interiores e visualização 3D), o processo de trabalho com um sol que percorre as etapas, a equipe, os depoimentos e um contato em quatro passos que monta sozinho a mensagem de WhatsApp com o tipo de obra, o terreno, os metros e a data.

A engenharia: um site pesado que tira 96 no PageSpeed

Vídeo, 3D, uma planta com mais de mil elementos e animações em cada seção. Na teoria, tudo isso deixa um site lento. Por isso medimos no PageSpeed Insights, a ferramenta do Google, na versão para celulares (em 29 de setembro de 2026):

• Desempenho: 96 de 100. Acessibilidade: 97. Práticas recomendadas: 100.
• O conteúdo principal aparece em 2,0 segundos com a conexão lenta que o teste simula.
• Bloqueio do navegador: 0 ms. A página responde ao primeiro toque.
• Movimento inesperado do layout: 0. Nada pula enquanto carrega.

Tudo isso com uns 3,6 MB de página no celular. No computador, o conteúdo principal aparece em meio segundo. O resultado no celular é o que mais importa, porque é a versão que o Google usa para indexar e posicionar um site. O número pode variar um pouco a cada medição, então vale testar você mesmo.

O que fizemos para um site assim carregar rápido:

1. O 3D é baixado depois. A maquete não é baixada ao abrir a página: ela é pedida só quando você chega perto da planta. Quem só olha a capa não paga por ela.
2. Vídeos feitos sob medida. Comprimimos cada vídeo nós mesmos: 1,9 MB o horizontal e 1,2 MB o vertical, sem áudio. Enquanto chegam, aparece o primeiro quadro como imagem.
3. Primeiro pinta, depois monta. A capa aparece antes de qualquer animação. O resto da página é preparado por partes, seção por seção, para o navegador nunca travar.
4. A planta é código, não foto. Pesa pouco, fica perfeita em qualquer tela e dá para tocar.
5. Animações que não travam. Só movem e deixam elementos transparentes, que é o que o navegador resolve mais rápido. Nos nossos testes, a rolagem se manteve em 60 quadros por segundo.
6. Quase nada de fora. Fontes, bibliotecas, vídeos e imagens são servidos do nosso próprio servidor. A única coisa externa é a medição de visitas, que carrega depois de todo o resto.
7. Uma versão para cada pessoa. Se alguém ativou o movimento reduzido no telefone, vê a página parada. Se o navegador não mostra 3D, vê a página completa sem a maquete.

Se quiser ver como o seu site atual se sai nessas mesmas medições, teste o nosso diagnóstico grátis.

Para quem serve essa experiência

A Ára é um escritório de arquitetura, mas a mesma base serve para qualquer negócio que venda espaços, obras ou projetos que o cliente precisa imaginar:

• Escritórios de arquitetura: um portfólio de arquitetura interativo, com a planta de cada obra, renders, a insolação e o critério bioclimático explicado sem jargão.
• Incorporadoras e imobiliárias com lançamentos na planta: apartamentos com a planta-tipo de cada andar, qual unidade recebe sol no inverno e a maquete do prédio montada antes de ele existir.
• Construtoras de casas prontas: cada modelo de casa com a planta, os metros e a maquete. Mais sobre o setor em site para construtoras no Paraguai.
• Designers de interiores e paisagistas: ambientes com ficha, materiais e o antes e depois de cada projeto.
• Marcas de materiais e esquadrias: tijolo, cobogós, cerâmicas ou esquadrias com ficha técnica, fotos e como ficam aplicados. Para o comércio do setor, veja também o site para lojas de materiais de construção.
• Hotéis boutique, casas de campo e espaços para eventos: lugares onde o espaço é o produto e as pessoas querem percorrê-lo antes de reservar.

Para quem não serve: um site que não é para qualquer setor

É preciso dizer com a mesma clareza: essa experiência não é para todo negócio. Na Ára, a graça é navegar com calma, deixar as coisas se moverem, tocar na planta e testar o sol. Isso funciona quando o cliente vem imaginar alguma coisa.

Mas se o seu cliente vem buscar uma informação rápida (o horário da farmácia, o preço de um produto, um horário na clínica, o cardápio para pedir delivery), cada animação é um obstáculo entre ele e o que ele precisa. Para esses setores fazemos sites diretos e leves, que dão a resposta em dois segundos: como a loja online ou a clínica das nossas demonstrações.

A regra que usamos é esta: se o seu cliente vem buscar uma informação, o site precisa entregá-la em segundos; se ele vem imaginar algo que ainda não existe, o site pode levar o tempo que for preciso para mostrar.

Um site assim também não se faz com qualquer material. Ele precisa das plantas reais das obras, de boas fotos ou renders e de alguém do escritório que explique cada projeto. É um projeto sob medida, orçado conforme quantas obras, plantas e modelos 3D for preciso montar.

O que é de mentira e o que é de verdade

A Ára Arquitectura não existe. O escritório, as pessoas, os projetos, os depoimentos e o endereço são fictícios, e a demonstração está configurada para não aparecer no Google. As fotos dos projetos e dos materiais foram geradas com inteligência artificial, e os vídeos da capa foram feitos a partir dessas fotos.

O que é real é o trabalho: o design, o código, a planta desenhada com as medidas da casa, a maquete que sai dessa mesma planta, o cálculo do sol e tudo o que fizemos para uma página tão pesada carregar rápido. Abra a demonstração no computador e no celular, toque nos ambientes e mova o sol (a demonstração está em espanhol). As outras estão em modelos e designs de sites, e neste artigo contamos o que olhar em cada uma.

Assim pensamos na KapeDev

Não fazemos animações por fazer. Na Ára, cada efeito explica algo que um escritório de arquitetura precisa contar: a planta mostra como a casa é vivida, o corte mostra por onde o sol entra e a maquete mostra como ela é construída. Se um efeito não explica nada, sai.

E a velocidade não se negocia. Um site pode ser tão ambicioso quanto o projeto que mostra, desde que se trabalhe para ele carregar rápido no celular de qualquer pessoa. Se você tem um escritório, uma incorporadora ou uma marca de materiais e imagina as suas obras num site assim, calcule uma primeira ideia no orçamento online ou fale com a gente: contamos como adaptaríamos a Ára aos seus projetos, em Assunção (página em espanhol) ou em qualquer cidade do país.

Seu negócio fica em Assunção ou na Grande Assunção? Ver páginas web em Assunção → (página em espanhol)

Quer calcular o impacto estimado para o seu negócio? Calcular meu impacto →

Quer conhecer o nível de digitalização do seu negócio? Faça seu diagnóstico gratuito →

Redigido e editado por Mathias Verón, Fundador da KapeDev.