Marker Highlight
A colored marker block draws behind a phrase while the text color shifts
Installation
$ pnpm dlx shadcn@latest add @remocn/marker-highlightUsage
// 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
| Prop | Type | Default | Description |
|---|---|---|---|
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 | number | 72 | Font size in pixels |
fontWeight | number | 600 | CSS font-weight |
speed | number | 1 | Multiplier for animation speed |
className | string | — | Optional className passed to the outer text span |