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