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
Unlock advanced capabilities with the Pro version
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.
Documentation that is actually helpful and a joy to read.
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.
Hover or focus this interactive highlight.
Direction variants
The band grows from a configurable origin: ltr (left to right), rtl (right to left) or center (outward from the middle).
Sweep left to right
Sweep right to left
Sweep from the center
Manual control
With trigger="manual" you drive the highlight yourself through the active prop — perfect for step-by-step reveals or feature tours.
Ship your next idea with confidence.