# Pincelada A band of color fills the background of a word from left to right, like a highlighter pen. > Pincelada is a THM Componentes component that marks part of your text with a band of color growing from left to right, like a highlighter pen drawn in real time. It is pure CSS, accepts gradients and rounded corners, and works well to emphasize key terms in headlines, articles and sales pages. - Category: Text and typography - Origin: Adapted from open source under the MIT license, with a ready THM prompt - Load weight: Light: CSS or light JavaScript, no noticeable cost - Technology: Vue 3, TypeScript, Tailwind CSS v4 - Interaction: None: the effect runs on its own - URL: https://vibecode.thmtecnologia.com/en/components/pincelada/ ## What it looks like It looks like someone running a highlighter over a word the moment the page opens. The highlighted span gets a little breathing room on the sides and bottom, and the background color starts at the left edge and stretches until it covers the whole span, in two seconds by default, easing in and out. The color comes from a gradient you set, and the corners can be rounded. A delay lets the highlight land after people read the start of the sentence, and the text color can change at the end to keep contrast. ## You may be looking for this if you asked for something like - “highlight a word in my headline like a marker pen” - “a colored background that fills in behind a phrase” - “emphasize the key term in the headline with an animated band” - “a highlighter pen effect sweeping over text on my site” - “a word with a gradient background that appears gradually” - “draw attention to the main benefit in the middle of a paragraph” ## Also known as highlighter effect, animated highlighter, marker highlight animation, background fill text, highlighted text, marker pen effect ## When to use - Emphasizing the main benefit in a sales page headline - Marking key terms in articles, guides and blog posts - Punchy lines in presentations and manifesto sections - Hero headlines, with the highlight landing after the opening words ## When to avoid - Spans further down the page, since it runs on load and may already be done - Many highlights in the same text, which dilute each one ## How to ask your AI ```text Create an animated CSS highlighter effect to emphasize a phrase in my sales page headline: my brand color filling the background from left to right when the span enters the screen, with proper contrast and a static version for reduced motion. ``` With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising. ## Questions about Pincelada ### How do I change the highlight color in Pincelada? The highlight color in Pincelada comes from a gradient applied through a class, so you can use a Tailwind class or CSS variables from your design system; for a solid color, use a single-color gradient. The THM Componentes prompt tells your AI to use your project color tokens, and a prop changes the text color when the highlight ends. ### Does Pincelada animate when people scroll to it? Not by default. The animation in Pincelada starts when the element renders, after the delay you set. For a span further down, ask your AI to trigger the highlight when it enters the screen, with IntersectionObserver; at the top of the page, the original behavior already works well. ### Does Pincelada hurt readability or accessibility? Pincelada keeps your text as ordinary text with an animated background, so screen readers read the sentence normally. The thing to watch is contrast: light text on a light highlight is hard to read. The end text color prop helps you keep the contrast WCAG recommends. ## Related components - [Ênfase](https://vibecode.thmtecnologia.com/en/components/enfase/): A band of color grows behind a passage of text, like a highlighter pen moving across the line. - [Filete](https://vibecode.thmtecnologia.com/en/components/filete/): A thin line appears under the word on hover, growing from the center or sweeping from one side to the other. - [Tapume](https://vibecode.thmtecnologia.com/en/components/tapume/): A solid block of color covers the headline and pulls away to the side, letting the text rise gently into view. - [Luneta](https://vibecode.thmtecnologia.com/en/components/luneta/): A sentence with blurred words, where a camera-style frame brings one word into focus at a time. - [Quilate](https://vibecode.thmtecnologia.com/en/components/quilate/): Small violet and pink stars blink and spin over the word, popping in and out without stopping. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).