# Buril Palavra com uma sombra feita de listras diagonais finas, que deslizam devagar atrás das letras. > Buril é um componente do THM Componentes que coloca atrás de uma palavra uma sombra feita de listras diagonais finas, como a hachura de uma gravura, que deslizam devagar sem parar. Usa só CSS, sem JavaScript de animação, e funciona bem em títulos grandes de sites editoriais, landing pages retrô e chamadas de campanha. - Categoria: Texto e tipografia - 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: Nenhuma: o efeito roda sozinho - URL: https://vibecode.thmtecnologia.com/componentes/buril/ ## 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 ```text 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. ## Componentes relacionados - [Onomatopeia](https://vibecode.thmtecnologia.com/componentes/onomatopeia/): Letras brancas com contorno preto grosso e sombra amarela deslocada, balançando de leve como letreiro de desenho. - [Gralha](https://vibecode.thmtecnologia.com/componentes/gralha/): Faixas do título aparecem deslocadas para os lados com rastros vermelho e ciano, como uma tela com defeito. - [Lustro](https://vibecode.thmtecnologia.com/componentes/lustro/): Texto em cinza suave com uma faixa de brilho que atravessa as letras de tempos em tempos. - [Arlequim](https://vibecode.thmtecnologia.com/componentes/arlequim/): Uma palavra do título em que cada letra ganha uma cor viva e as cores se embaralham a cada cinco segundos. - [Quilate](https://vibecode.thmtecnologia.com/componentes/quilate/): Estrelinhas violeta e rosa piscam e giram por cima da palavra, aparecendo e sumindo sem parar. --- 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.