# Per Word Crossfade

Words exit one by one, then new words enter word by word with a slight stagger.

> 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/per-word-crossfade
```

<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 { PerWordCrossfade } from "@/components/framecn/per-word-crossfade";
```

```tsx
<PerWordCrossfade fromText="Hello world" toText="New world" />
```

## API Reference

### PerWordCrossfade

| Prop               | Type     | Default         |
| ------------------ | -------- | --------------- |
| `fromText`         | `string` | `"Hello world"` |
| `toText`           | `string` | `"New world"`   |
| `fontSize`         | `number` | `72`            |
| `color`            | `string` | `"#171717"`     |
| `fontWeight`       | `number` | `600`           |
| `speed`            | `number` | `1`             |
| `fps`              | `number` | `30`            |
| `durationInFrames` | `number` | `90`            |
| `className`        | `string` | `-`             |

## Notes

  Each word in the exit phrase fades out separately, followed by each word in
  the entry phrase fading in. The enter sequence overlaps slightly with the tail
  end of the exit for a more fluid feel.