Marker Highlight
Highlighter-pen-style wipe animation behind the target word.
PrimitivePrimitives
marker-highlight30fps · 960×540
Install
$ npx remotion-ui@latest add marker-highlightFinds highlightWord in text and animates a highlighter-pen-style wipe behind it using spring(). Use markerColor and invertOnHighlight for highlighter-style emphasis.
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, highlightWord, markerColor, invertOnHighlight, 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="Ship faster with RemotionUI"
highlightWord="RemotionUI"
markerColor="#f97316"
invertOnHighlight
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | - | Full sentence to render. |
| highlightWord* | string | - | Substring to highlight with an animated wipe. |
| markerColor | string | - | Fill color for the marker wipe. |
| invertOnHighlight | boolean | - | Switch highlighted word to dark text once the marker covers it. |
| durationInFrames | number | 18 | Highlight wipe duration in frames. |
| delayInFrames | number | 0 | Frames to delay before the wipe begins. |
| color | string | "#f8fafc" | Base text color. |
| fontSize | number | - | Text size in pixels. |
| fontWeight | number | 600 | Text weight. |