Marker highlight

A highlighter swipes behind the words.

Good tools get out of the way. Great ones make the work feel lighter than it is.

Installation

$ npx shadcn@latest add @textlab/marker-highlight

Needs @textlab in your components.json. Setup takes a minute.

Usage

usage.tsx

import { MarkerHighlight } from "@/components/textlab/marker-highlight/marker-highlight";

<p>Textlab is <MarkerHighlight>free and open source</MarkerHighlight>.</p>

Variants

markerunderlinebox

Props

Prop	Type	Default	Description
children*	ReactNode	–	The words to highlight.
variant	"marker" \| "underline" \| "box"	"marker"	Full highlighter stroke, thick low band, or soft block.
color	string	var(--tl-fx-highlight)	Highlight color.
as	ElementType	"mark"	Rendered element.
trigger	"mount" \| "inView" \| "hover" \| "manual"	"inView"	What starts the animation. manual follows `active`.
active	boolean	false	Drives trigger="manual".
once	boolean	true	In view: play once instead of on every entry.
delay	number	0	Seconds before the first part moves.
duration	number	0.7	Seconds each part takes.
ease	EaseName \| [number, number, number, number]	"standard"	Easing token or cubic bezier.
reducedMotion	"user" \| "always" \| "never"	"user"	user follows the OS setting; always shows the still version.
className	string	–	Merged onto the root.

When to use it

Reach for it

Key phrases inside paragraphs and testimonials.
Phrases that wrap across lines.

Skip it

Whole paragraphs.
As the only way to convey meaning; color alone is not enough.

Accessibility

Renders <mark>, which assistive tech can announce as highlighted.
Text color is inherited and stays on top of the band.

Motion

The band grows left to right with the standard ease, like a real marker stroke.

Reduced motion. The highlight is already there.

Performance

One CSS transition on background-size; no JavaScript animation.