Cardume de Luz Ultra

Sobre este efeito

Um cardume de centenas de pontos de luz coloridos nada pela seção. Passando o mouse, ele vai atrás do cursor com atraso, como peixes de verdade: se estica nas curvas, forma uma cauda e se junta de novo em volta do cursor quando ele para, sempre girando devagar, sem ficar grudado nele. Um clique no escuro espalha o cardume, que se reagrupa sozinho em seguida; clicar em links e botões não espalha. Sem ninguém mexendo, o cardume passeia sozinho pela seção num laço que se repete, então o fundo continua vivo na vitrine; se preferir, ele pode parar e descansar. No celular, tocar leva o cardume até o dedo e arrastar na horizontal faz ele seguir, enquanto a página continua rolando na vertical. Uma onda de cor corre da frente pra cauda. O título, o texto e os botões ficam legíveis: embaixo deles o cardume passa quase apagado. Vem com botão de pausa opcional. Desenha no máximo 60 vezes por segundo, e pausado, fora da tela ou com a aba escondida não desenha nada; o movimento é o mesmo em telas de 60 e de 120 Hz. Com a preferência de menos movimento, o cardume aparece inteiro e parado. Quantidade, tamanho, brilho, largura do cardume, comprimento da cauda, atraso, velocidade da onda de cor, passeio, força do clique, transparência sob o texto e até quatro cores ajustáveis. Sem biblioteca.

Ficha

Categoria

Cursor

Onde combina

topo (hero), fundo, chamada pra ação

Alcance

Área: vive dentro de um bloco da página.

Plano

Exclusivo de quem assina o Ultra (R$ 39,90/mês).

Peso

11 KB de código comprimido. Sem biblioteca externa.

No celular

Leve: usa 19% do processador de um celular intermediário enquanto anima.

Na loja desde

25/09/2026

Como colocar no seu site

1. 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.
2. Usando um construtor (Elementor, Shopify, Webflow e outros): a loja mostra o passo a passo de cada um.
3. Programando: importe o efeito.css e o efeito.js e marque o elemento com a classe fx-cardume-de-luz.

Assuntos

• cursor
• mouse
• partículas
• cardume
• seguir
• luz
• colorido
• fundo
• hero
• toque
• canvas