# Ênfase A band of color grows behind a passage of text, like a highlighter pen moving across the line. > Ênfase is a THM Componentes component that marks a passage with a band of color growing behind the words, like a highlighter pen. It can fire when the passage enters the screen, on hover, on load or from code, in four directions. It is light and suits articles, sales proposals and long 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, Motion for Vue - Interaction: Mouse, Scroll - URL: https://vibecode.thmtecnologia.com/en/components/enfase/ ## What it looks like It looks like someone running a highlighter over the sentence while you read. The passage starts with a transparent background and, when it enters the screen, a band of color grows from left to right until it covers the words, in about one second, with no bounce. The default color is a light peach, and the text keeps the page color on top. If the passage wraps onto several lines, each line gets its own highlight. The sweep can also run right to left, top to bottom or bottom to top, and it can fire on hover, on page load or from code. ## You may be looking for this if you asked for something like - “a highlighter pen effect across part of the text” - “highlight key sentences in my article as if someone marked them” - “a colored background that fills in behind the sentence when it appears” - “mark the important parts of my proposal as people read” - “that yellow highlight that grows behind the words” - “an animated highlight for key lines in a blog post” - “a word that gets a colored background when I hover over it” ## Also known as highlighter pen effect, text highlighter, animated highlighter, marker highlight animation, background sweep, highlight on scroll ## When to use - Blog posts and case studies with sentences that deserve emphasis - Sales proposals and long sales pages, to guide the reading - Testimonials where one passage sums up the customer result - Docs and guides where a warning needs to stand out ## When to avoid - Many highlighted passages in the same paragraph, which weakens the emphasis - Dark mode with light text unless you change the default light peach color, which lowers contrast ## How to ask your AI ```text Create an animated highlighter effect on key passages of my article: a band in my brand highlight color grows from left to right when the sentence enters the screen, with proper contrast in dark mode 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 Ênfase ### How do I choose when Ênfase fires? Ênfase has four triggers in the triggerType prop: inView, the default, which highlights when the passage enters the screen; hover, which highlights while the mouse is over it; auto, which highlights as soon as the page loads; and ref, which lets your code call animate and reset, handy for highlighting on a button click. ### Can I change the color and direction of Ênfase? Yes. Ênfase accepts any CSS color in the highlightColor prop and four directions in the direction prop: left to right, right to left, top to bottom and bottom to top. Speed comes from the transition prop, a one-second spring by default, and the THM Componentes prompt asks for your project color tokens. ### Does Ênfase work on text that wraps onto several lines? Yes. Ênfase uses box-decoration-break set to clone, so each line of the passage gets its own highlight instead of one block covering the paragraph. Since the text stays in the HTML and the highlight is only a background, screen readers and search engines read the sentence normally. ## Related components - [Pincelada](https://vibecode.thmtecnologia.com/en/components/pincelada/): A band of color fills the background of a word from left to right, like a highlighter pen. - [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. - [Iluminura](https://vibecode.thmtecnologia.com/en/components/iluminura/): The sentence stays pinned on screen and each word goes from faded gray to full color as you scroll. - [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. --- 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).