Primitives
Word Highlight
Spring-animated highlighter wipe on a word in a sentence.
Primitiveatoms
Install
npx remotion-ui@latest add word-highlightFinds highlightWord in text and wipes a highlight behind it using spring() — the pattern from Remotion's text-animation guidance. Uses springSmooth from springs.ts.
Live preview
AI usage
Install first, then import the copied source component locally.
Install
npx remotion-ui@latest add word-highlightImport after install
@/remotion/primitives/word-highlight- Use when: frame-level motion primitives and reusable animation wrappers.
- Customize: text, highlightWord, durationInFrames, highlightColor, 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 { WordHighlight } from "@/remotion/primitives/word-highlight";
<WordHighlight
text="Ship faster with RemotionUI"
highlightWord="RemotionUI"
highlightColor="#f97316"
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | — | Full sentence to render. |
| highlightWord* | string | — | Substring to highlight with an animated wipe. |
| durationInFrames | number | 30 | Highlight wipe duration. |
| highlightColor | string | — | Background color behind the highlighted word. |
| fontSize | number | — | Text size in pixels. |