# Lampejo

Botão preto em pílula com um feixe de luz que percorre a borda sem parar e um brilho interno que cresce no hover.

> Lampejo é um componente do THM Componentes: um botão em pílula, preto por padrão, com um feixe de luz branca que percorre a borda sem parar, indo e voltando a cada 3 segundos. No hover, um brilho interno na base fica mais forte e, no clique, o botão afunda 1 pixel. Serve para ofertas, assinaturas e agendamentos.

- Categoria: Botões e cursores
- 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, Toque, Teclado
- URL: https://vibecode.thmtecnologia.com/componentes/lampejo/

## Como ele é

Imagine a luz de um farol passando pela borda de uma pedra polida. O botão tem formato de pílula, fundo preto, texto branco e uma borda branca quase transparente. Um feixe de luz branca, desfocado, gira e desliza de um lado a outro, indo e voltando a cada 3 segundos, e só aparece numa faixa fina junto à borda, como um reflexo correndo pelo contorno. Na base interna há um brilho suave que se intensifica ao passar o mouse; ao clicar, o botão desce um pixel, como uma tecla.

## Você pode estar procurando isto se pediu algo assim

- “botão com brilho passando por ele”
- “botão preto com uma luz correndo pela borda”
- “botão de assinar que pareça premium e chame atenção”
- “efeito de reflexo deslizando no botão de agendar”
- “botão em pílula com contorno brilhante animado”
- “aquele botão escuro com luz girando de site de SaaS”
- “chamada para ação que brilhe sem usar cores fortes”

## Também chamado de

botão com feixe de luz, botão com brilho, botão com reflexo, shine button, botão com luz na borda, animated border shine

## Quando usar

- Botão de oferta, assinatura ou teste grátis em landing de SaaS
- Agendamento de demonstração, consulta ou reunião
- Heros escuros que pedem um destaque discreto em preto e branco
- Chamada única por seção, perto do preço

## Quando evitar

- Fundos pretos sem contorno visível, em que o botão quase desaparece
- Modo escuro sem ajuste: o texto padrão fica preto sobre o fundo preto

## Como pedir para a sua IA

```text
Crie um botão em pílula com reflexo de luz: um feixe percorre a borda sem parar e um brilho interno cresce no hover. Use as cores da minha marca no fundo e no brilho, garanta contraste do texto nos modos claro e escuro e pare o feixe 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 Lampejo

### Dá para trocar as cores de Lampejo?

Sim. Lampejo recebe a cor da luz pela propriedade shimmerColor, o fundo por background, os cantos por borderRadius, a espessura do feixe por shimmerSize e a duração por shimmerDuration. O padrão é luz branca sobre fundo preto, em pílula, com ciclo de 3 segundos.

### Lampejo funciona no modo escuro?

Funciona com um ajuste. O fundo de Lampejo vem da propriedade background e não muda com o tema, mas o texto padrão fica preto no modo escuro, o que some sobre o fundo preto. A demo resolve isso com texto branco no conteúdo. O prompt do THM Componentes orienta a IA a usar os tokens de cor do projeto.

### Lampejo respeita quem prefere menos movimento?

Na versão original, Lampejo anima sempre. O prompt do THM Componentes pede à IA uma versão estática para quem ativa movimento reduzido no sistema: basta pausar as duas animações CSS do feixe e manter o contorno e o brilho interno, que já dão acabamento ao botão.

## Componentes relacionados

- [Arrebol](https://vibecode.thmtecnologia.com/componentes/arrebol/): Botão escuro com as cores do arco-íris correndo pela borda inferior e um reflexo colorido desfocado logo abaixo.
- [Cata-vento](https://vibecode.thmtecnologia.com/componentes/cata-vento/): Botão com uma borda fina de arco-íris que gira sem parar em volta do texto, com leve desfoque.
- [Satélite](https://vibecode.thmtecnologia.com/componentes/satelite/): Um pequeno feixe de luz colorida dá voltas pela borda de um card ou seção, como um cometa contornando a moldura.
- [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.
- [Adiante](https://vibecode.thmtecnologia.com/componentes/adiante/): Botão em pílula com um ponto que cresce até preencher tudo no hover, enquanto o texto troca de lugar e ganha uma seta.

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