# Inline Highlight
URL: https://remocn.dev/docs/typography/inline-highlight

Animate one word inside a sentence from a base color to a brand color

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

## Installation

```bash
npx shadcn@latest add @remocn/inline-highlight
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { InlineHighlight } from "@/components/remocn/inline-highlight";

const InlineHighlightScene = () => (
  <InlineHighlight
    before="Ship faster with "
    highlight="remocn"
    highlightColor="#ff5e3a"
    fontSize={72}
  />
);

export const RemotionRoot = () => (
  <Composition
    id="InlineHighlight"
    component={InlineHighlightScene}
    durationInFrames={90}
    fps={30}
    width={1280}
    height={720}
  />
);
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `before` (required) | `string` | — | Text rendered before the highlighted word |
| `highlight` (required) | `string` | — | The word that animates color |
| `after` | `string` | `""` | Text rendered after the highlighted word |
| `baseColor` | `string` | `"#171717"` | Starting color of the highlighted word and color of the surrounding text |
| `highlightColor` | `string` | `"#ff5e3a"` | Final color of the highlighted word |
| `fontSize` | `number` | `48` | Font size in pixels |
| `fontWeight` | `number` | `600` | CSS font-weight |
| `className` | `string` | — | Optional className passed to the underlying span |

## Use when
- One keyword inside a sentence needs to draw attention through a color shift without any background decoration.
- The text is already visible and a subtle emphasis beat is needed mid-scene, not a full entrance.
- Clean, minimal brand-color callout is required — no physical marker, no underline, just the color pop.

## Don't use when
- You want a physical drawn marker or filled background behind the word — use `marker-highlight` for a visible paint-stroke effect instead.
- The entire sentence is new and needs to enter — this component is for emphasis within existing text, not a reveal; use `mask-reveal-up` or `per-word-crossfade` for full entrances.
- Multiple words across the sentence need to highlight in sequence — this highlights one span; compose multiple `Sequence`-wrapped instances or use `kinetic-center-build` for a word-by-word build.