# Marker Highlight

Marker bar sweeps in behind a phrase, optionally inverting the text color.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).

## Installation

<TabsTrigger value="cli">Command</TabsTrigger>
<TabsTrigger value="manual">Manual</TabsTrigger>

```bash
npx shadcn@latest add @framecn/marker-highlight
```

<Step>Copy and paste the following code into your project.</Step>

<Step>Update the import paths to match your project setup.</Step>

## Usage

```tsx
import { MarkerHighlight } from "@/components/framecn/marker-highlight";
```

```tsx
<MarkerHighlight />
```

## API Reference

### MarkerHighlight

| Prop                   | Type     | Default      |
| ---------------------- | -------- | ------------ |
| `before`               | `string` | `""`         |
| `highlight`            | `string` | `"builders"` |
| `after`                | `string` | `"."`        |
| `markerColor`          | `string` | `"#facc15"`  |
| `baseColor`            | `string` | `"#171717"`  |
| `highlightedTextColor` | `string` | `"#171717"`  |
| `fontSize`             | `number` | `72`         |
| `fontWeight`           | `number` | `600`        |
| `speed`                | `number` | `1`          |
| `fps`                  | `number` | `30`         |
| `durationInFrames`     | `number` | `90`         |
| `width`                | `number` | `1280`       |
| `height`               | `number` | `720`        |
| `className`            | `string` | `-`          |

## Notes

  The marker bar is positioned absolutely behind the text. Ensure the parent has
  `position: relative` for correct placement.

  When `invertText` is true, the text color inverts. Ensure your marker color
  has sufficient contrast with the background.