Text Highlight — `<mv-text-highlight>`

Highlights words as they enter the viewport: a marker stroke that sweeps across lines, or a hand-drawn annotation (underline, circle, box, strike-through) drawn stroke by stroke.

Category	Animated text
Type	Web Component (`<mv-text-highlight>`)
Status	stable
Keywords	highlight, marker, underline, annotation, rough, hand-drawn, emphasis

When to use

Key phrases in marketing copy should get a marker stroke as they scroll into view
A hand-drawn underline, circle, box or strike-through should annotate a short phrase
Several annotations should draw in sequence using staggered delays

Avoid when

Circle or box annotations would wrap long multi-line passages; they are meant for short phrases
A whole paragraph should light up progressively with scroll position → use Scroll Text instead

Install

node scripts/add.mjs text-highlight --out ./src/marvelous

AI agent with the Marvelous UI MCP server: install_components({ slugs: ["text-highlight"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Files copied (dependencies included): tokens/tokens.css, core/base.css, core/element.js, core/motion.js, core/observe.js, components/text-highlight/text-highlight.js, components/text-highlight/text-highlight.css.

Usage

Canonical markup — start from it and customize with attributes, data-* and CSS variables:

<div id="th-demo" style="display:grid;gap:1.75rem;max-width:40rem;text-align:center">
  <p style="margin:0;font:700 clamp(1.6rem,3.6vw,2.3rem)/1.35 var(--mv-font-sans);letter-spacing:-.025em">
    Your customers deserve answers <mv-text-highlight>in seconds</mv-text-highlight>,
    not <mv-text-highlight effect="strike" color="var(--mv-danger)" delay="700">in three days</mv-text-highlight>.
  </p>

  <p style="margin:0;font-size:1.125rem;line-height:1.9;color:var(--mv-fg-muted)">
    Centralize your tickets, <mv-text-highlight effect="underline" delay="200" style="color:var(--mv-fg)">automate replies</mv-text-highlight>
    to recurring questions and keep your team <mv-text-highlight effect="circle" color="var(--mv-warning)" delay="600" duration="1100" style="color:var(--mv-fg)">focused</mv-text-highlight>
    on what matters: <mv-text-highlight effect="box" color="var(--mv-info)" delay="1000" style="color:var(--mv-fg)">people</mv-text-highlight>.
  </p>

  <div style="display:flex;gap:1rem;justify-content:center;align-items:center;flex-wrap:wrap">
    <a href="#" style="font-weight:600;color:var(--mv-fg);text-decoration:none">
      <mv-text-highlight effect="underline" trigger="hover" duration="450">See pricing →</mv-text-highlight>
    </a>
    <button class="mv-button" data-variant="ghost" data-size="sm" id="th-replay">Replay</button>
  </div>
</div>
<script type="module">
  document.getElementById("th-replay")?.addEventListener("click", () => {
    document.querySelectorAll("#th-demo mv-text-highlight:not([trigger])").forEach((el) => el.replay());
  });
</script>

API

Attributes

Name	Type	Default	Description
`effect`	marker \| underline \| circle \| box \| strike	`marker`	Annotation style. SVG effects make the element inline-block (short phrases).
`color`	CSS color	`var(--mv-accent)`	Stroke / ink color (tokens accepted).
`trigger`	view \| load \| hover \| manual	`view`	Trigger: entering the viewport (once), on load, on hover (of the parent link/button) or from script.
`duration`	number	`800`	Draw duration (ms).
`delay`	number	`0`	Delay before drawing (ms), to chain several annotations.

Methods

Name	Description
`show()`	Draws the annotation.
`hide()`	Erases the annotation (animated).
`replay()`	Erases instantly, then redraws.

Events

Name	Description
`mv-show`	When drawing starts.

CSS variables

Name	Default	Description
`--mv-text-highlight-color`	`var(--mv-accent)`	Color (same as the color attribute).
`--mv-text-highlight-marker`		Marker ink, if it should differ from the color (default: color at 28% / 45% in dark mode).
`--mv-text-highlight-size`	`78%`	Height of the marker stroke.
`--mv-text-highlight-offset`	`70%`	Vertical position of the marker.
`--mv-text-highlight-stroke`	`0.085em`	SVG stroke width.
`--mv-text-highlight-easing`	`var(--mv-ease-in-out)`	Drawing easing curve.

Accessibility

The text is never modified; the SVG drawing is aria-hidden and ignores the pointer. To convey meaning (emphasis), wrap the content in <strong> or <mark>. Reduced motion: the annotation is shown right away, without drawing.