Cartão com Aura Plus

Sobre este efeito

Um cartão com uma luz colorida girando atrás dele. A luz vaza em volta do cartão como uma aura que dá a volta e acende o trecho da borda por onde passa, trocando de cor pelo arco-íris ou ficando nas duas cores da sua marca. Com o mouse em cima, o cartão acende inteiro: a borda toda fica na cor da luz, os textos marcados pegam a cor dela e um brilho branco treme em volta antes de firmar, como neon ligando. No celular, um toque acende e outro apaga. Vários cartões na mesma página, cada um com a sua luz. Tudo é rotação e opacidade de camadas prontas, sem JavaScript por quadro, e as animações param fora da tela. Com a preferência de menos movimento, a luz fica parada num canto. Cores, quanto a cor gira, tempo da volta e do ciclo de cor, força e alcance do halo, espessura da borda e fundo ajustáveis. CSS e JavaScript puros, sem biblioteca.

Ficha

Categoria

Luzes

Onde combina

recursos, chamada pra ação

Alcance

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

Plano

Incluso no Plus (R$ 19,90/mês) e no Ultra (R$ 39,90/mês).

Peso

4,2 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

28/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-cartao-com-aura.

Assuntos

• card
• cartão
• brilho
• glow
• aura
• halo
• neon
• borda
• hover
• luz
• preço