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