# Code Diff Wipe

Before/after comparison with a clip-path slider revealing the new code.

> 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/code-diff-wipe
```

<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 { CodeDiffWipe } from "@/components/framecn/code-diff-wipe";
```

```tsx
<CodeDiffWipe />
```

## API Reference

### CodeDiffWipe

| Prop                 | Type      | Default          |
| -------------------- | --------- | ---------------- |
| `before`             | `string`  | `DEFAULT_BEFORE` |
| `after`              | `string`  | `DEFAULT_AFTER`  |
| `language`           | `string`  | `"tsx"`          |
| `background`         | `string`  | `"#0a0a0a"`      |
| `accent`             | `string`  | `"#0ea5e9"`      |
| `transitionStart`    | `number`  | `20`             |
| `transitionDuration` | `number`  | `60`             |
| `showHandle`         | `boolean` | `true`           |
| `speed`              | `number`  | `1`              |
| `fps`                | `number`  | `30`             |
| `durationInFrames`   | `number`  | `120`            |
| `width`              | `number`  | `1280`           |
| `height`             | `number`  | `720`            |
| `className`          | `string`  | `-`              |

## Notes

  A clip-path slider reveals new code over old code. Great for showing code
  changes or refactoring diffs.