Como ele é
Imagine um cometa pequeno dando voltas na moldura de um quadro. A borda do card continua discreta, e só um trecho curto dela se acende: laranja na frente, roxo no meio e um rastro que se apaga, com as cores padrão. Esse trecho corre pelo contorno em velocidade constante e recomeça a volta sem pausa; na demo, cada volta leva 12 segundos. O feixe segue os cantos arredondados do elemento, não bloqueia cliques e fica por cima do conteúdo, que continua igual. Tamanho do feixe, espessura da borda, cores, duração e atraso são ajustáveis.
Você pode estar procurando isto se pediu algo assim
- uma luz passando pela borda do card do plano mais vendido
- borda com brilho correndo em volta, tipo cometa
- destacar o card principal com um contorno animado
- efeito de linha de luz girando na borda do formulário
- aquele contorno brilhante que dá a volta no card, de site de startup
- deixar o plano recomendado da tabela de preços chamando atenção
Também chamado de
- border beam
- borda animada
- feixe na borda
- animated border light
- glowing border animation
- contorno animado
Quando usar
- Plano recomendado numa tabela de preços
- Card de destaque numa vitrine de recursos
- Caixa de login, de cadastro ou de busca que deve chamar o olhar
- Mockups e prints de produto apresentados num hero
Quando evitar
- Vários cards na mesma tela, porque o destaque perde o sentido
- Interfaces sérias, como painéis financeiros, em que o movimento contínuo distrai
Como pedir para a sua IA
Adicione um feixe de luz animado percorrendo a borda do card do plano recomendado, só com CSS, nas cores da minha marca, sem bloquear cliques e parado para quem prefere menos movimento.
Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Border Beam
O Border Beam deixa a página lenta?
Dificilmente. O Border Beam é uma camada de CSS com uma única animação de trajeto, sem JavaScript rodando a cada quadro, e é classificado como Leve no THM Componentes. Use em um ou poucos cards por tela e confira LCP e INP antes e depois, como o prompt pede.
Como usar o Border Beam dentro de um card?
O Border Beam ocupa toda a área do elemento pai e herda o arredondamento dele, então o card precisa ter posição relativa e, de preferência, cantos arredondados. Coloque o componente dentro do card, ajuste tamanho, espessura e duração, e o conteúdo continua clicável, porque a camada ignora o ponteiro.
O Border Beam respeita quem prefere menos movimento?
O componente original anima sempre. O prompt do THM Componentes pede à IA uma versão estática para quem ativa a preferência de reduzir movimento, o que no Border Beam é simples: pausar a animação CSS e deixar a borda com uma cor fixa ou com o feixe parado.
