Marker Highlight
Highlighter stroke swept word by word, with marker, knockout, underline and box variants.
Primitive
$ 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 stroke is built the way ink lands rather than as a filled rectangle: feathered top and bottom edges, fibre striations along the fill, and a soft leading edge held off vertical by tilt. The band itself is never rotated: rotating each word's box is what turns a joined phrase into a staircase of offset rectangles. Everything that varies is anchored to the band's own top edge, so the stroke runs through a word join without a seam and a wrapped phrase carries one band height on every line.
The ink flips under the leading edge of the stroke rather than at a threshold, and it turns at the back of that edge, where the band is already at full strength. A half-tone letter on a half-laid band is the one place a covered word is hard to read. 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. Band geometry is stated as top plus height in em against each word's own line box, so a phrase that wraps carries the same band on every line.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/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
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 | -4 | Angle of the nib in degrees off vertical. Slopes the leading edge only; the band is never rotated, so a joined phrase does not step at every word. |
| inkSoftness | number | 0.16 | Softness of the leading edge, as a share of the word. 0 is a hard cut. |
| markerColor | string | "#fbbf24" | Colour of the stroke. |
| markerOpacity | number | per variant | Alpha of the ink. Defaults to 0.62 for marker, 0.95 for underline, 1 for knockout and box. |
| 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. |