Site Ion
Página única em WebGL para a Ion, comunidade para construir com IA e vender com método. Um robô desenhado em pontos prateados acompanha o scroll, a cena congela para mostrar depoimentos, oferta e dúvidas, e a logo se monta em partículas no manifesto.
Role a página: o site é uma experiência 3D guiada pelo scroll.
- Cliente
- Ion
- Entrega
- Site 3D
- Ano
- 2026
O desafio
A Ion chega num mercado cheio de cursos que prometem criar qualquer coisa com IA, e precisava se diferenciar por duas coisas que quase ninguém junta: usar IA com base de desenvolvedor, com qualidade e segurança, e vender o que se constrói com método. O site também não podia parecer template: uma comunidade que ensina a construir precisa provar, na própria página, que sabe construir.
O que construímos
Fizemos em duas etapas. A primeira fechou a copy e o sistema visual: o monocromático do brand book, vidro fosco e o chanfro de 45 graus da logo em botões, cards e painéis. A versão no ar leva esse sistema para uma página única em three.js, com shaders recoloridos em preto e prata, partículas que formam a logo da Ion e uma linha do tempo que congela a cena em três pausas. Todo "Quero entrar" leva direto ao checkout, e a qualidade do 3D cai sozinha em aparelho mais fraco.
Como foi feito
- 01
Experiência 3D em three.js guiada pelo scroll, com um robô desenhado em pontos prateados
- 02
Linha do tempo própria com pausas: a cena congela e depoimentos, oferta e dúvidas aparecem por cima
- 03
Logo da Ion montada em partículas no manifesto
- 04
Mural de prints reais de alunos, em colunas que andam sozinhas e aceleram com o scroll
- 05
Chanfro de 45 graus da logo como sistema de forma em botões, cards e painéis de vidro
- 06
Chamadas que levam direto ao checkout da Hubla
- 07
Render adaptativo: a resolução da cena cai sozinha quando o aparelho não aguenta
- 08
SEO estruturado, imagem própria de compartilhamento e página 404 real
Tecnologias
- Vite
- Three.js (WebGL)
- Shaders GLSL
- Lenis
- JavaScript
- Cloudflare Workers
Outras soluções
Ver todo o portfólio-
Landing page
Site Falow
Landing de lançamento que, em vez de mostrar print, monta o produto na frente de quem lê. -
Site e área de membros
MaternaForte
Site de venda e área de membros com acesso separado para médicos, personais, psicólogos e alunas. -
Plataforma SaaS
Falow Plataforma
Responde DM e comentário do Instagram sozinha, conduz a conversa por fluxos visuais e entrega o lead pronto num CRM.
