# Luar

Um cartão com um brilho circular suave que acompanha o cursor e some quando o mouse sai.

> Luar é um componente do THM Componentes que coloca um holofote dentro do card: um brilho circular acompanha o cursor enquanto o mouse está em cima e desaparece quando ele sai. Usa um gradiente radial em CSS, sem canvas nem WebGL, e funciona bem em grades de recursos, planos e integrações, principalmente em fundo escuro.

- Categoria: Cartões e superfícies
- 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
- Interação: Mouse
- URL: https://vibecode.thmtecnologia.com/componentes/luar/

## 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

```text
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.

## Componentes relacionados

- [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.
- [Girassol](https://vibecode.thmtecnologia.com/componentes/girassol/): Quando o mouse chega perto de um card, um arco de luz colorida acende na borda e gira para apontar o cursor.
- [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.
- [Camafeu](https://vibecode.thmtecnologia.com/componentes/camafeu/): Um cartão que inclina seguindo o mouse e faz imagem, título e botões saltarem em camadas de profundidade.
- [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.

---
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.