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

// 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}
  />
);

Props

PropTypeDefaultDescription
before
string""Text that appears before the highlighted phrase
highlightrequired
stringThe 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
number72Font size in pixels
fontWeight
number600CSS font-weight
speed
number1Multiplier for animation speed
className
stringOptional className passed to the outer text span