Como ele é
Imagine um cartão branco de cantos arredondados com uma borda fina por onde corre um risco de luz, como os LEDs que dão a volta num letreiro. O feixe vai do índigo na cauda ao ciano na ponta, tem cerca de 70 graus de comprimento e completa uma volta a cada 6 segundos, com um halo desfocado logo por fora e por dentro da borda. Quando o mouse passa por cima, uma luz suave na cor do feixe acompanha o ponteiro dentro do cartão. O conteúdo padrão é um plano de preço de exemplo, que você troca pelo seu.
Você pode estar procurando isto se pediu algo assim
- uma luz passando pela borda do card do plano mais vendido
- card de preço com a borda brilhando e girando
- contorno de luz andando em volta de um cartão, meio neon
- destacar o plano recomendado na página de preços sem exagerar
- card que acende onde o mouse passa por cima
- borda animada em gradiente para chamar atenção para uma oferta
- aquele efeito de borda iluminada que aparece em sites de SaaS
Também chamado de
- borda animada
- feixe na borda
- animated border
- glowing border card
- conic gradient border
- luz correndo na borda
- brilho que segue o mouse
Quando usar
- Plano recomendado numa tabela de preços, ao lado de cartões sem efeito
- Cartão de oferta ou de cupom que precisa se destacar na página
- Chamada para um recurso novo dentro de um painel ou de uma landing page
- Convite para teste grátis no fim de uma página de vendas
Quando evitar
- Grades com muitos cartões iguais, em que o feixe perde a função de destaque
- Sites de fundo escuro, sem antes trocar o fundo branco fixo do cartão
Como pedir para a sua IA
Crie um card com borda animada para o plano recomendado da minha página de preços: um feixe de luz em gradiente nas cores da minha marca percorrendo a borda e um brilho suave seguindo o cursor, com pausa fora da tela e borda parada para quem prefere menos movimento.
Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Pavio
Pavio deixa a página pesada?
Não. Pavio tem peso Leve no THM Componentes: o feixe é um gradiente cônico animado em CSS, e o JavaScript só acompanha o cursor e pausa a animação quando o cartão sai da tela. Mesmo assim, use em um ou dois cartões por página, para que o destaque continue valendo.
Dá para trocar as cores e o conteúdo de Pavio?
Sim. Pavio recebe por props as cores da cauda e da ponta do feixe, a duração da volta, o comprimento do feixe, a espessura da borda, o raio dos cantos e a largura, e o prompt orienta a IA a usar os tokens de cor do projeto. O seu conteúdo vai no slot, no lugar do plano de exemplo.
Pavio respeita quem prefere menos movimento?
Sim. Com a preferência de movimento reduzido ativa no sistema, Pavio desliga a animação e deixa o feixe parado num ponto fixo da borda, mantendo o destaque. O brilho que segue o cursor continua funcionando, porque só aparece enquanto a pessoa move o mouse sobre o cartão.
