Como ele é
Imagine um farol girando dentro de cada card, aceso só quando você chega perto. Quando o cursor alcança o card, ou uma distância configurável dele, um trecho da borda se ilumina em rosa, dourado, verde e azul, como um arco-íris discreto, e desliza ao redor do card até ficar voltado para o ponteiro, numa curva suave de cerca de dois segundos. Ao se afastar, o arco esmaece. Se a página rola com o mouse parado, a posição é recalculada e a luz se reposiciona. Desfoque, largura do arco e uma borda fixa por baixo são opcionais.
Você pode estar procurando isto se pediu algo assim
- card que acende a borda quando o mouse chega perto
- brilho colorido na borda que segue o cursor numa grade de cards
- efeito de luz passando de um card para outro com o mouse
- grade de funcionalidades com borda iluminada, tipo site de IA
- cards de preço que brilham na direção do ponteiro
- borda que reage ao mouse sem mexer no conteúdo do card
Também chamado de
- borda que acende perto do mouse
- proximity glow
- borda reativa ao cursor
- cursor follow border glow
- brilho por proximidade
- spotlight border
Quando usar
- Grades de recursos em layout bento numa landing page
- Cards de preço que devem reagir à intenção da pessoa
- Listas de projetos ou de integrações em interfaces escuras
- Seções de produto em que o cursor guia a leitura de card em card
Quando evitar
- Sites acessados principalmente pelo celular, onde não há cursor para seguir
- Páginas com dezenas de cards, porque cada um escuta o movimento do ponteiro na página toda
Como pedir para a sua IA
Adicione um brilho por proximidade na borda dos cards da grade de recursos: um arco de luz nas cores da minha marca acende quando o cursor se aproxima e gira para seguir o ponteiro, sem efeito no celular e estático 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 Girassol
Por que Girassol não aparece no meu card?
Por padrão, Girassol vem com o efeito desligado: a opção disabled começa verdadeira e o brilho não é calculado. Passe disabled como falso, como faz a demo, e coloque o componente dentro de um card com posição relativa. Aumente a distância de alcance para o brilho acender antes de o cursor entrar.
Girassol funciona no celular?
O componente Girassol foi feito para mouse: acompanha o movimento do ponteiro e confere a posição de novo na rolagem. Em telas de toque não existe cursor parado sobre os cards, então o efeito perde o papel de guia; vale desligar com a opção disabled em telas pequenas.
Girassol pesa na página?
Tem peso Leve no THM Componentes: o brilho de Girassol é feito com gradientes e máscara em CSS, e o JavaScript só recalcula o ângulo uma vez por quadro, quando o ponteiro se mexe ou a página rola. Com muitos cards, cada um tem seu próprio ouvinte de movimento, então compare o INP antes e depois.
