Marker Highlight

A colored marker block draws behind a phrase while the text color shifts

Installation

$ pnpm dlx shadcn@latest add @remocn/marker-highlight

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { MarkerHighlight } from "@/components/remocn/marker-highlight";
 
const MarkerHighlightScene = () => (
  <MarkerHighlight
    before="Ship it "
    highlight="fast"
    after="."
    markerColor="#facc15"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="MarkerHighlight"
    component={MarkerHighlightScene}
    durationInFrames={90}
    fps={30}
    width={1280}
    height={720}
  />
);

Props10

Prop	Type	Default
before	string"" Text that appears before the highlighted phrase
highlightrequired	string— The phrase the marker draws behind
after	string"" Text that appears after the highlighted phrase
markerColor	string"#facc15" Color of the marker block
baseColor	string"#171717" Color of the surrounding text
highlightedTextColor	string"#171717" Final color of the highlighted phrase once the marker is drawn
fontSize	number72 Font size in pixels
fontWeight	number600 CSS font-weight
speed	number1 Multiplier for animation speed
className	string— Optional className passed to the outer text span

beforestring
Text that appears before the highlighted phrase
Default""
highlightrequiredstring
The phrase the marker draws behind
afterstring
Text that appears after the highlighted phrase
Default""
markerColorstring
Color of the marker block
Default"#facc15"
baseColorstring
Color of the surrounding text
Default"#171717"
highlightedTextColorstring
Final color of the highlighted phrase once the marker is drawn
Default"#171717"
fontSizenumber
Font size in pixels
Default72
fontWeightnumber
CSS font-weight
Default600
speednumber
Multiplier for animation speed
Default1
classNamestring
Optional className passed to the outer text span