# Girassol Quando o mouse chega perto de um card, um arco de luz colorida acende na borda e gira para apontar o cursor. > Girassol é um componente do THM Componentes que acende um arco de luz colorida na borda de um card quando o cursor se aproxima e gira esse arco para apontar o ponteiro, inclusive durante a rolagem. Em grades de recursos e cards de preço, a luz passa de um card para outro conforme o mouse anda. - Categoria: Efeitos especiais - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, Motion for Vue - Interação: Mouse, Rolagem - URL: https://vibecode.thmtecnologia.com/componentes/girassol/ ## 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 ```text 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. ## Componentes relacionados - [Luar](https://vibecode.thmtecnologia.com/componentes/luar/): Um cartão com um brilho circular suave que acompanha o cursor e some quando o mouse sai. - [Escaninho](https://vibecode.thmtecnologia.com/componentes/escaninho/): Seção dividida em blocos de tamanhos diferentes, como uma marmita japonesa, para apresentar recursos ou serviços. - [Fogo-fátuo](https://vibecode.thmtecnologia.com/componentes/fogo-fatuo/): Um brilho colorido passeia devagar pela borda de um card ou campo, acendendo um trecho e depois outro. - [Paetê](https://vibecode.thmtecnologia.com/componentes/paete/): Card escuro que ganha um reflexo de luz e um brilho de holograma que seguem o mouse, com leve inclinação. - [Pavio](https://vibecode.thmtecnologia.com/componentes/pavio/): Cartão com um feixe de luz que dá voltas pela borda e um brilho suave que acompanha o mouse por dentro. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.