# Marker Highlight
URL: https://remocn.dev/docs/typography/marker-highlight

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

- Install: `npx shadcn@latest add @remocn/marker-highlight`
- Vibe: playful
- Natural length: 90f @ 30fps

## Installation

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `before` | `string` | `""` | Text that appears before the highlighted phrase |
| `highlight` (required) | `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 |

## Use when
- A key phrase inside a sentence needs a physical, hand-drawn-feeling highlight that visually underscores the word.
- A playful or educational tone is appropriate and the visible paint stroke adds expressive energy.
- The brand color should appear as a background fill rather than a text color shift.

## Don't use when
- You want a subtle color-only emphasis with no visible background — use `inline-highlight` for a clean color-shift with no marker block.
- The entire sentence is new text that needs to enter the scene — both highlight components are emphasis tools, not entrances; use `mask-reveal-up` or `per-word-crossfade` for full reveals.
- The scene tone is minimal or premium and a bold painted marker would clash — use `inline-highlight` for a quieter callout.
- The emphasis should land the moment a speaker says the word — use `caption-marker`, which swipes keywords from a timed transcript.