Como ele é
Lembra o reflexo que corre sobre uma placa de metal, ou o texto de deslizar para desbloquear dos celulares antigos. As letras ficam num cinza meio transparente, e uma faixa de brilho de 100 pixels atravessa o texto da esquerda para a direita; no tema claro, ela deixa as letras bem mais escuras por onde passa, e no escuro, bem mais claras. No ciclo padrão de 10 segundos, a faixa leva 3 segundos para atravessar, espera, volta da direita para a esquerda e espera de novo. No resto do tempo, o texto fica parado e discreto.
Você pode estar procurando isto se pediu algo assim
- brilho passando pelas letras do texto
- aquele reflexo do deslize para desbloquear do iPhone antigo
- selo de novidade com uma luz correndo no texto
- texto cinza com um brilho que atravessa de vez em quando
- efeito de luz no anúncio curto do topo da página
- rótulo de lançamento que chama atenção sem piscar
- texto com brilho correndo para mostrar que está carregando
Também chamado de
- texto com brilho
- brilho no texto
- reflexo no texto
- shimmer text
- text shine effect
- glare text
- animated shiny text
Quando usar
- Selos de novidade e anúncios curtos acima do título, como lançamento ou versão nova
- Rótulos de status, como carregando ou pensando, em apps de IA
- Chamadas discretas em páginas de produto que não podem piscar
- Rótulos de plano ou de preço que pedem um destaque discreto
Quando evitar
- Texto pequeno ou longo, já que o cinza meio transparente do padrão tem contraste baixo para leitura
- Telas com outros brilhos e animações em loop no mesmo campo de visão
Como pedir para a sua IA
Crie um efeito de brilho que atravessa o texto no selo de novidade acima do título: uma faixa de luz corre pelas letras de tempos em tempos, nas cores da minha marca, com contraste suficiente para leitura e texto parado 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 Lustro
Dá para mudar a velocidade e o tamanho do brilho de Lustro?
Dá. Em Lustro, a prop duration define em segundos o ciclo completo, 10 no padrão, em que a faixa atravessa, espera, volta e espera de novo. A prop radiantWidth define a largura da faixa em pixels, 100 no padrão. Em textos maiores, uma faixa mais larga deixa o brilho mais visível.
Lustro funciona no modo escuro?
Sim. Lustro já tem as duas versões: no tema claro, as letras ficam em cinza meio transparente e a faixa as escurece por onde passa; no escuro, o cinza é mais claro e a faixa as clareia. O prompt do THM Componentes orienta a IA a trocar esses tons pelos tokens de cor do projeto.
Posso usar Lustro num título h1?
Lustro renderiza um parágrafo, a tag p, centralizado e com largura máxima de 28rem, pensado para selos e frases curtas. Para aplicar o brilho num título principal, peça à IA para trocar a tag por h1 e ajustar a largura; o texto continua no HTML, legível por buscadores e leitores de tela.
