# Pincelada Uma faixa de cor preenche o fundo da palavra da esquerda para a direita, como uma caneta marca-texto. > Pincelada é um componente do THM Componentes que grifa um trecho do texto com uma faixa de cor que cresce da esquerda para a direita, como uma caneta marca-texto passando na hora. Usa só CSS, aceita gradiente e cantos arredondados e funciona bem para destacar termos-chave em títulos, artigos e páginas de venda. - 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/pincelada/ ## Como ele é Parece alguém passando uma caneta marca-texto sobre a palavra no momento em que a página abre. O trecho destacado ganha um pequeno respiro nas laterais e embaixo, e a cor de fundo nasce na borda esquerda e se estende até cobrir o trecho inteiro em dois segundos por padrão, com aceleração suave no começo e no fim. A cor vem de um gradiente que você define, e os cantos podem ser arredondados. Um atraso permite que o grifo aconteça depois de a pessoa ler o começo da frase, e a cor do texto pode mudar ao final para manter o contraste. ## Você pode estar procurando isto se pediu algo assim - “grifar uma palavra do título como se fosse marca-texto” - “fundo colorido que vai preenchendo atrás de uma frase” - “destacar o termo principal da manchete com uma faixa animada” - “efeito de caneta marca-texto passando no texto do site” - “palavra com fundo em gradiente que aparece aos poucos” - “chamar atenção para o benefício principal no meio do parágrafo” ## Também chamado de marca-texto animado, highlighter effect, highlight animation, grifo animado, background fill text, texto grifado, efeito caneta marca-texto ## Quando usar - Destacar o benefício principal no título de uma página de vendas - Grifar termos-chave em artigos, guias e posts de blog - Frases de impacto em apresentações e seções de manifesto - Chamadas no topo da página, com o grifo entrando após a leitura do começo ## Quando evitar - Trechos mais abaixo na página, porque o grifo acontece ao carregar e pode já ter terminado - Muitos destaques no mesmo texto, que tiram o peso de cada um ## Como pedir para a sua IA ```text Crie um efeito de marca-texto animado em CSS para destacar uma expressão no título da minha página de vendas: a cor da marca preenchendo o fundo da esquerda para a direita quando o trecho entra na tela, com contraste adequado 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 Pincelada ### Como trocar a cor do grifo de Pincelada? A cor de Pincelada vem de um gradiente aplicado por classe, então dá para usar uma classe do Tailwind ou variáveis CSS do seu design system; para cor sólida, use um gradiente de uma cor só. O prompt do THM Componentes orienta a IA a usar os tokens de cor do projeto, e uma prop muda a cor do texto ao fim do grifo. ### Pincelada anima quando a pessoa rola até o trecho? Não por padrão. A animação de Pincelada começa quando o elemento é renderizado, depois do atraso definido. Para um trecho mais abaixo, peça à IA para disparar o grifo quando ele entrar na tela, com IntersectionObserver; no topo da página, o comportamento original já funciona bem. ### Pincelada prejudica a leitura ou a acessibilidade? Pincelada mantém o texto como texto comum, só com um fundo animado, então leitores de tela leem a frase normalmente. O cuidado é o contraste: texto claro sobre um grifo claro fica difícil de ler. A prop de cor final do texto ajuda a manter o contraste recomendado pelo WCAG. ## Componentes relacionados - [Ênfase](https://vibecode.thmtecnologia.com/componentes/enfase/): Uma faixa de cor cresce atrás de um trecho do texto, como um marca-texto passando sobre a frase. - [Filete](https://vibecode.thmtecnologia.com/componentes/filete/): Uma linha fina surge embaixo da palavra quando o mouse passa, crescendo do centro ou atravessando de um lado ao outro. - [Tapume](https://vibecode.thmtecnologia.com/componentes/tapume/): Um bloco de cor cobre o título e recolhe para o lado, deixando o texto aparecer subindo de leve. - [Luneta](https://vibecode.thmtecnologia.com/componentes/luneta/): Frase com as palavras borradas, em que uma moldura de câmera deixa nítida uma palavra de cada vez. - [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.