This component no longer exists. It was in remotionui’s manifest when we first indexed it and is not there now — the registry served its inventory on 2026-08-11 and this item was not on it. The install command below will fail. It is kept here because a tutorial somewhere still tells people to run it.

marker-highlight

remotionui/marker-highlight

RemovedComponent

Highlighter stroke swept word by word across a phrase, with marker, knockout, underline and box variants

Live preview

live · rendered by the registry

Rendered by remotionui on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://remotionui.com/r/marker-highlight.json

Source

registry/bases/default/primitives/marker-highlight.tsxremotionui.com/r/marker-highlight.json

1import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";
2import { scaleFont } from "@/remotion/lib/layout";
3import { EASING } from "@/remotion/lib/motion-tokens";
4import { markEmphasis, markerEdges } from "@/remotion/lib/text-emphasis";
5 
6export type MarkerVariant = "marker" | "knockout" | "underline" | "box";
7 
8export type MarkerHighlightProps = {
9  text: string;
10  /** Phrase to sweep. Matched case-insensitively, may span several words. */
11  phrase?: string;
12  /** Single-word form of `phrase`. */
13  highlightWord?: string;
14  /** How the emphasis is drawn. */
15  variant?: MarkerVariant;
16  /** Length of the sweep across one word. */
17  durationInFrames?: number;
18  delayInFrames?: number;
19  /** Frames between one word being struck and the next. */
20  staggerInFrames?: number;
21  /** Tilt of the stroke in degrees — a hand does not draw level. */
22  tilt?: number;
23  color?: string;
24  markerColor?: string;
25  /** Ink over a covered word. Defaults on for `knockout`. */
26  invertOnHighlight?: boolean;
27  inkColor?: string;
28  fontSize?: number;
29  fontWeight?: number;
30  fontFamily?: string;
31  textAlign?: "left" | "center" | "right";
32  style?: React.CSSProperties;
33};
34 
35const WORD_GAP = "0.28em";
36 
37/** Band opacity per variant — a real marker is translucent, a knockout is not. */
38const BAND_OPACITY: Record<MarkerVariant, number> = {
39  marker: 0.42,
40  knockout: 1,
41  underline: 1,
42  box: 1,
43};
44 
45const clamp = {
46  extrapolateLeft: "clamp",
47  extrapolateRight: "clamp",
48} as const;
49 
50/**
51 * Strikes emphasis across a phrase, word by word.
52 *
53 * Word by word matters: one band appearing behind the whole phrase reads as a
54 * background, while a stroke that crosses each word in turn reads as a hand
55 * moving. The ink flips under the leading edge of the stroke rather than at a
56 * threshold, so the covered text is never briefly unreadable.
57 */
58export const MarkerHighlight: React.FC<MarkerHighlightProps> = ({
59  text,
60  phrase,
61  highlightWord,
62  variant = "marker",
63  durationInFrames = 12,
64  delayInFrames = 0,
65  staggerInFrames = 4,
66  tilt = -0.7,
67  color = "#f8fafc",
68  markerColor = "#fbbf24",
69  invertOnHighlight,
70  inkColor = "#080810",
71  fontSize: fontSizeProp,
72  fontWeight = 600,
73  fontFamily,
74  textAlign = "left",
75  style,
76}) => {
77  const frame = useCurrentFrame();
78  const { width } = useVideoConfig();
79  const fontSize = fontSizeProp ?? scaleFont(84, width);
80  const words = markEmphasis(text, phrase ?? highlightWord);
81// … truncated