# Changelog Bite

Short changelog entry animation for product updates.

> 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/changelog-bite
```

<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 { ChangelogBite } from "@/components/framecn/changelog-bite";
```

```tsx
<ChangelogBite />
```

## API Reference

### ChangelogBite

| Prop               | Type                     | Default                    |
| ------------------ | ------------------------ | -------------------------- |
| `label`            | `string`                 | `"New"`                    |
| `title`            | `string`                 | `"Inline diff view"`       |
| `oldContent`       | `ReactNode`              | `-`                        |
| `newContent`       | `ReactNode`              | `-`                        |
| `format`           | `"square" \| "portrait"` | `"square"`                 |
| `background`       | `string`                 | `"#141318"`                |
| `cardBackground`   | `string`                 | `"rgba(20, 19, 24, 0.92)"` |
| `accent`           | `string`                 | `"#FFB38E"`                |
| `speed`            | `number`                 | `1`                        |
| `fps`              | `number`                 | `30`                       |
| `durationInFrames` | `number`                 | `150`                      |
| `width`            | `number`                 | `1080`                     |
| `height`           | `number`                 | `1080`                     |
| `className`        | `string`                 | `-`                        |

## Notes

  A short, punchy animation for product update announcements. Shows version
  number and bullet point changes.