Como ele é
Lembra a sombra feita com traços finos de uma gravura antiga ou de um cartaz retrô. Atrás de cada letra aparece uma cópia deslocada um pouco para a direita e para baixo, preenchida com linhas diagonais bem finas, como hachura, em vez de uma cor sólida. Essas linhas deslizam devagar na diagonal, num ciclo de 15 segundos que se repete sem parar, o que dá à sombra uma vibração discreta. A letra da frente continua com a cor e a fonte do texto ao redor. A sombra é preta no padrão; na demo, fica branca no modo escuro. O efeito aparece mais em títulos grandes e em negrito.
Você pode estar procurando isto se pediu algo assim
- título com sombra de listrinhas diagonais
- sombra retrô feita de linhas atrás da palavra
- efeito de texto estilo cartaz antigo para o título
- palavra com sombra hachurada que se mexe devagar
- destacar uma palavra do título com estilo editorial
- aquela sombra listrada de revista em letras grandes
Também chamado de
- sombra em linhas
- sombra hachurada
- sombra listrada
- sombra de cartaz retrô
- striped text shadow
- hatched shadow
- retro text shadow
Quando usar
- Uma palavra de destaque dentro de um título grande, como na demo
- Sites editoriais, revistas digitais e blogs com estética retrô
- Landing pages de marcas com identidade gráfica ou vintage
- Capas de seção e chamadas de campanha com tipografia em negrito
Quando evitar
- Textos pequenos ou finos, em que as linhas da sombra quase não aparecem
- Conteúdo que muda depois de carregar, porque o componente lê o texto uma vez e só aceita texto puro
Como pedir para a sua IA
Crie um efeito de sombra em linhas diagonais atrás de uma palavra do título do hero: as listras deslizam devagar, na cor da minha marca, com contraste adequado no modo escuro e sombra parada 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 Buril
Posso colocar ícones ou HTML dentro de Buril?
Não. Buril aceita só texto puro no conteúdo e gera um erro se receber outro elemento, porque usa esse texto para desenhar a sombra. O conteúdo também é lido uma vez, ao montar, então, para trocar a frase depois, a IA pode recriar o componente com uma key nova.
Como fica Buril no modo escuro?
Buril tem uma cor de sombra só, definida na prop shadowColor, preta no padrão. A troca de cor não é automática; na demo, a sombra fica branca quando o tema escuro está ativo. O prompt do THM Componentes orienta a IA a usar os tokens de cor do projeto nos dois temas.
Buril pesa no site?
Quase nada. Buril usa só CSS: um pseudo-elemento repete o texto atrás da letra e uma animação move o padrão de listras em 15 segundos, sem JavaScript de animação. Por isso tem peso Leve no THM Componentes. Para quem prefere menos movimento, o prompt pede uma versão parada.
