Ícones que se Afastam Ultra

Hero com ícones em cartões flutuando em três profundidades em volta do título: andam com o mouse, fogem do cursor numa mola e se inclinam pro lado do empurrão.

Ver na loja e baixar

Sobre este efeito

Um hero com ícones em cartõezinhos espalhados em volta do título, em três profundidades: os de longe menores e apagados, os de perto maiores. Todos flutuam de leve, cada um no seu ritmo; com o mouse, andam na medida da profundidade, e perto do cursor fogem numa mola e se inclinam pro lado do empurrão, voltando pro lugar quando ele sai. O cartão sob o mouse acende na cor do acento, e na primeira vez que a seção aparece os ícones saem de trás do título e se espalham. Vem com 18 ícones prontos e aceita os seus, com posição e profundidade escolhidas por você. Funciona com o dedo no celular e fica parado pra quem pede menos movimento. Cores, tamanho dos cartões, força da fuga, paralaxe, flutuação e velocidade ajustáveis. CSS e JavaScript puros, sem biblioteca.

Ficha

Categoria: Cursor
Onde combina: topo (hero), recursos
Alcance: Área: vive dentro de um bloco da página.
Plano: Exclusivo do Ultra (R$ 39,90/mês) até 30/10/2026; depois entra no Plus.
Peso: 5,9 KB de código comprimido. Sem biblioteca externa.
No celular: Leve: usa 16% do processador de um celular intermediário enquanto anima.
Na loja desde: 30/09/2026

Como colocar no seu site

Criando o site com IA (Claude Code, Codex e parecidas): baixe o kit, extraia na pasta do projeto e cole o pedido pronto que a loja entrega. Não precisa saber programar.
Usando um construtor (Elementor, Shopify, Webflow e outros): a loja mostra o passo a passo de cada um.
Programando: importe o efeito.css e o efeito.js e marque o elemento com a classe fx-icones-que-se-afastam.

Assuntos

ícones
icons
hero
flutuante
floating
cursor
paralaxe
parallax
repelir
mola
integrações
apps