Como ele é
Imagine passar uma lanterna fraca sobre um cartão fosco. Enquanto o mouse está em cima, uma mancha de luz circular e suave acompanha a ponta do cursor e se espalha até sumir perto das bordas. Quando o mouse sai, ela desaparece. O cartão tem cantos arredondados, borda fina e fundo cinza muito claro no modo claro ou quase preto no escuro, e o conteúdo fica por cima da luz. Na demo, o holofote é cinza médio no modo claro, onde parece mais uma sombra suave, e cinza aceso no escuro, onde parece luz de verdade.
Você pode estar procurando isto se pediu algo assim
- card que acende uma luz onde o mouse passa
- brilho seguindo o cursor dentro do card de recursos
- efeito de lanterna no card, tipo site de startup no modo escuro
- grade de benefícios com um destaque sutil quando passo o mouse
- card escuro com luz suave acompanhando o ponteiro
- deixar os cards da página com cara de produto de tecnologia
Também chamado de
- card com lanterna
- spotlight card
- card com holofote
- efeito lanterna
- mouse glow card
- hover glow
- brilho que segue o cursor
Quando usar
- Grade de recursos ou benefícios de um SaaS
- Cards de planos ou serviços em fundo escuro
- Seção de integrações ou parceiros com vários cartões
- Painéis de tema escuro que pedem um retorno sutil ao hover
Quando evitar
- Sites usados quase só no celular, onde não há cursor para acender o brilho
- Fundos claros sem ajustar a cor, em que o holofote vira uma mancha cinza
Como pedir para a sua IA
Crie cards com holofote que segue o mouse para a grade de recursos do meu SaaS: brilho radial suave sob o cursor nas cores da minha marca, que some ao sair, conteúdo por cima da luz, bom contraste no claro e no escuro e versão estática para movimento reduzido.
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 Luar
Dá para trocar a cor do holofote de Luar?
Sim. Luar recebe a cor do brilho em gradientColor e a intensidade em gradientOpacity, que vem em 0,8. Na demo, a cor muda com o tema, cinza médio no claro e cinza aceso no escuro. O prompt do THM Componentes orienta a IA a usar os tokens de cor do seu projeto no lugar das cores fixas.
Luar funciona no celular?
O efeito depende do cursor: Luar acompanha o movimento do mouse e apaga o brilho quando ele sai. Em telas de toque não há cursor para seguir, então o brilho não acompanha o dedo, mas o cartão e o conteúdo continuam iguais. Por isso o efeito funciona como detalhe extra no desktop sem atrapalhar o celular.
Luar deixa a página pesada?
Não. Luar é um gradiente radial em CSS cuja posição muda com o mouse, sem canvas nem WebGL, e tem a classificação Leve no THM Componentes. Mesmo numa grade com vários cartões, só o cartão sob o cursor recalcula o brilho.
