Recursos
Passe o mouse nos cards: inclinação 3D, brilho que segue o cursor e ícones animados.
Curvas de easing personalizadas em todos os estados de hover e foco.
Animações contínuas: gradiente em movimento, blobs flutuantes e marquee.
Elementos surgem conforme entram na tela, via IntersectionObserver.
Abas, acordeão, modal, contadores e efeito ripple nos botões.
Números
Os números sobem quando a seção aparece na tela.
Interações
Componentes que dependem de JavaScript para funcionar.
Layout, tipografia e paleta pensados para guiar o olhar. A pílula de fundo desliza entre as abas.
HTML semântico, CSS com variáveis e JavaScript sem dependências externas.
Um único arquivo, pronto para importar em qualquer plataforma que aceite HTML.
CSS no <head>, fontes externas, SVG inline, animações por keyframes, transições, backdrop-filter, máscaras e scripts no fim do <body>.
Role até a seção “Diagnóstico”. Cada item fica verde se o recurso estiver ativo depois da importação.
Sim — o layout é responsivo e respeita a preferência de movimento reduzido do sistema.
Zona do caos
Passe o mouse ou toque nos cards para girar. Clique em qualquer lugar da página para soltar faíscas.
Vire o card
Rotação com perspectiva e backface oculto.
Olhe o título lá em cima
Duas camadas recortadas tremendo fora de sincronia.
Os botões puxam o cursor
Chegue perto dos botões abaixo e veja eles seguirem você.
Lanterna seguindo o cursor + texto embaralhado.
Diagnóstico
Verde = funcionando. Vermelho = a plataforma removeu ou bloqueou. Se tudo estiver vermelho e sem pulsar, o JavaScript não rodou.
Se você está vendo esta animação, o JavaScript e as transições foram preservados.