OralPrime Odontologia
Landing page para clínica odontológica com animação 3D de partículas, GSAP ScrollTrigger e design branco premium.
Objetivo
Criar uma landing page para clínica odontológica que transmitisse confiança, tecnologia e cuidado ao mesmo tempo. O setor odontológico é altamente competitivo: clínicas brigam por atenção no Google e nas redes sociais, e a primeira impressão do site é muitas vezes decisiva para o agendamento.
O desafio era se diferenciar dos templates genéricos de WordPress que dominam o segmento — criar algo visualmente único, com uma animação memorável que comunicasse inovação sem sacrificar performance.
Desafio Técnico
Animação 3D no hero sem comprometer o PageSpeed. Three.js é uma biblioteca pesada (700KB+). Carregá-la via CDN no <head> bloquearia o render e destruiria as métricas de LCP e TBT no mobile.
GSAP + ScrollTrigger em paralelo. Duas bibliotecas de animação grandes precisavam ser carregadas sem bloquear o conteúdo principal. A ordem de inicialização importa — ScrollTrigger depende do GSAP core e ambos dependem do DOM estar pronto.
Canvas 3D consumindo bateria em mobile. Um loop de animação sem controle de FPS drena bateria e esquenta o dispositivo. Em tabelas dobradas para fora do viewport, o canvas continuaria consumindo recursos sem necessidade.
Soluções Aplicadas
Carregamento lazy via injeção dinâmica de script: Three.js só é carregado após o evento window.load, garantindo que o LCP (conteúdo principal) seja pintado antes de qualquer biblioteca de animação ser solicitada. GSAP e ScrollTrigger são carregados sequencialmente 300ms depois.
Sistema de partículas procedural para o dente: em vez de carregar um modelo 3D (arquivo .glb/obj pesado), o formato do dente é gerado matematicamente com JavaScript — curva da coroa via elipse parametrizada e três raízes com coordenadas calculadas. Zero assets externos para a animação.
FPS cap e DPR adaptativo: no mobile, o canvas roda a 30 FPS com Device Pixel Ratio limitado a 1.5; no desktop, 60 FPS com DPR máximo de 2. Isso reduz o número de pixels renderizados em ~55% em telas Retina sem diferença visual perceptível.
IntersectionObserver pausando o RAF: quando o canvas sai do viewport (usuário scrollou além do hero), o requestAnimationFrame é cancelado. O loop só retoma quando o canvas volta a ser visível — economizando CPU e bateria durante toda a navegação.
Scroll parallax via JavaScript puro: a partícula reage ao scroll do usuário (rotação, escala, posição X, opacidade) sem ScrollTrigger — evitando uma segunda biblioteca só para o efeito do hero.
Resultado
Animação Three.js + GSAP em execução com PageSpeed acima de 90 no mobile — prova de que é possível ter efeitos visuais premium sem comprometer performance.
Cada projeto recebe o mesmo nível de atenção técnica e estratégica. Entre em contato para conversarmos sobre o seu site.
💬 Quero um site assim