Marker Highlight
Highlighter stroke swept word by word, with marker, knockout, underline and box variants.
PrimitivePrimitives
marker-highlight30fps · 960×540
Install
$ npx remotion-ui@latest add marker-highlightStrikes emphasis across phrase, one word at a time. Word by word matters: one band appearing behind the whole phrase reads as a background, while a stroke crossing each word in turn reads as a hand moving.
The ink flips under the leading edge of the stroke rather than at a threshold, so covered text is never briefly unreadable. variant switches between a translucent marker, a solid knockout, an underline and a box.
The stroke crosses each marked word in turn, so it reads as a hand moving rather than a background appearing.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/primitives/marker-highlight- Use when: frame-level motion primitives and reusable animation wrappers.
- Customize: text, phrase, highlightWord, variant, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
Example
import { MarkerHighlight } from "@/remotion/primitives/marker-highlight";
<MarkerHighlight
text="The best motion is code you can read and change."
phrase="code you can read and change"
markerColor="#f97316"
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | - | Full sentence to render. |
| phrase | string | - | Phrase to sweep. Matched case-insensitively and may span several words. |
| highlightWord | string | - | Single-word form of phrase. |
| variant | "marker" | "knockout" | "underline" | "box" | "marker" | How the emphasis is drawn. |
| durationInFrames | number | 12 | Length of the sweep across one word. |
| delayInFrames | number | 0 | Frames before the first word is struck. |
| staggerInFrames | number | 4 | Frames between one word being struck and the next. |
| tilt | number | -0.7 | Tilt of the stroke in degrees — a hand does not draw level. |
| markerColor | string | "#fbbf24" | Colour of the stroke. |
| invertOnHighlight | boolean | knockout only | Flip the ink under the leading edge of the stroke as it passes. |
| inkColor | string | "#080810" | Ink used over a covered word. |
| color | string | "#f8fafc" | Base text colour. |
| textAlign | "left" | "center" | "right" | "left" | Alignment of the wrapped words. |
| fontSize | number | scaled 84px | Text size in pixels. |
| fontWeight | number | 600 | Text weight. |
| fontFamily | string | - | Font family for the text. |
| style | CSSProperties | - | Styles merged onto the wrapper. |