Atomic
Um site de marketing orientado a movimento para um produto SaaS de analytics, construído para que a página conte uma história conforme você rola.
React 19
Vite
Tailwind CSS 4
GSAP
Locomotive Scroll
Framer Motion
Swiper
Visão geral
O Atomic é a landing page de um produto SaaS de analytics construído em torno de uma promessa: você sempre sabe o que está acontecendo no seu negócio. A página tem uma missão única e exigente: convencer o visitante, em uma única rolagem, de que o produto é moderno e vale a inscrição. Desenvolvi o projeto como uma experiência contínua em que cada seção ganha vida conforme o usuário desce, culminando em prova social.
O Problema
Uma landing page é julgada em seus primeiros segundos. A maioria dos modelos de marketing parece estática e intercambiável e, no momento em que uma equipe tenta aplicar animações "premium", a rolagem perde fluidez e o tempo de carregamento dispara. O desafio era acertar exatamente onde a maioria falha: movimento com impacto cinematográfico genuíno sem disputar a atenção do visitante nem ofuscar a mensagem.
Meu Papel e Abordagem
Assumi este projeto de ponta a ponta: layout, design visual, estrutura de copy e animações. Em vez de espalhar efeitos pela página, tratei toda a rolagem como uma sequência coreografada única e estruturei cada seção para se revelar no momento exato. A regra constante foi garantir que o movimento atendesse ao objetivo da proposta. Ele deve direcionar o olhar primeiro para o título, depois para o produto e, em seguida, para a prova social, sem ornamentação vazia.
Stack Tecnológica
Principais Funcionalidades
Galeria
Desafios e Soluções
O timing da animação de texto foi a parte mais complexa. O SplitText mede um título e o divide em linhas, mas se ele for executado antes do carregamento completo das fontes web, o layout se desloca e a quebra falha. Isolei cada animação de texto após o document.fonts.ready, de modo que a separação só ocorra quando as fontes reais já estiverem carregadas. Isso eliminou a oscilação visual e o reflow.
Coordenar três sistemas de animação foi o outro desafio. O motor de rolagem suave do GSAP, a barra de progresso do Framer Motion e o Locomotive disputam o controle da posição de rolagem. Defini o GSAP ScrollSmoother como a única fonte da verdade e estruturei os demais sobre os valores gerados por ele, o que manteve tudo sincronizado. Em dispositivos móveis com tela sensível ao toque, reduzi deliberadamente a rolagem suave para garantir que os aparelhos continuassem responsivos, sem sensação de lentidão.
Resultado
O resultado é uma landing page rápida com coreografia de rolagem de nível profissional — o tipo de movimento que muitos sites de marketing tentam implementar e poucos executam com perfeição. Funciona como uma página de produto real e como referência para animações front-end avançadas que não comprometem o desempenho.
Tem um problema de produto semelhante?
Compartilhe o produto atual, o resultado que você precisa e as restrições que já estão no caminho. Usarei isso para definir um primeiro marco sensato.
Serviços de desenvolvimento de aplicações web