Text Highlighter
Marker-pen highlight that sweeps behind inline text with a GPU-friendly scaleX animation. Token-based colors, ltr/rtl/center direction, and in-view / hover / manual triggers.
Pro features
What the Pro version adds to this component.
Marker-Pen Sweep
GPU-friendly scaleX highlight that never triggers layout.
Token-Based Colors
Seven semantic colors plus a customColor escape hatch.
In-View Trigger
Single-shot IntersectionObserver for scroll-driven reveals.
Hover & Focus
Hover trigger with full keyboard-focus parity.
Direction Control
Grow the band from left, right or the center outward.
Reduced-Motion Aware
Honors prefers-reduced-motion, applying emphasis without the sweep.
Installation
Install via CLI
npx @moontra/moonui-cli add text-highlighterUsage
Build interfaces your users will love to use.
Examples
In-view sweep
The highlight fires once when the text scrolls into view (IntersectionObserver, single-shot). Respects prefers-reduced-motion — the highlight applies instantly when reduced motion is requested.
Hover trigger
With trigger="hover" the band opens on pointer hover and, thanks to keyboard parity, also on focus — try tabbing to the highlighted word.
Direction variants
The band grows from a configurable origin: ltr (left to right), rtl (right to left) or center (outward from the middle).
Manual control
With trigger="manual" you drive the highlight yourself through the active prop — perfect for step-by-step reveals or feature tours.