# Kinetic Slam

One word at a time, uppercase centered, slams in from above and scales down to rest.

> 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/caption-kinetic-slam
```

<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 { CaptionKineticSlam } from "@/components/framecn/caption-kinetic-slam";
import type { CaptionWord } from "@/components/framecn/caption-kinetic-slam";
```

```tsx
const words: CaptionWord[] = [
  { text: "Every", start: 0.0, end: 0.35 },
  { text: "great", start: 0.35, end: 0.65 },
  // ...
];

<CaptionKineticSlam words={words} />;
```

## API Reference

### CaptionKineticSlam

| Prop               | Type            | Default      |
| ------------------ | --------------- | ------------ |
| `words`            | `CaptionWord[]` | (demo words) |
| `color`            | `string`        | `"#ffffff"`  |
| `fontSize`         | `number`        | `120`        |
| `fontWeight`       | `number`        | `900`        |
| `background`       | `string`        | `"#0a0a0a"`  |
| `speed`            | `number`        | `1`          |
| `fps`              | `number`        | `30`         |
| `durationInFrames` | `number`        | `180`        |
| `width`            | `number`        | `1280`       |
| `height`           | `number`        | `720`        |
| `className`        | `string`        | `-`          |

### CaptionWord

| Field   | Type     | Description           |
| ------- | -------- | --------------------- |
| `text`  | `string` | The word text         |
| `start` | `number` | Start time in seconds |
| `end`   | `number` | End time in seconds   |

## Notes

  Kinetic Slam works best for high-energy clips where each word carries weight.
  Words are displayed one at a time, full-width centered. For denser narration,
  use Caption Highlight or Caption Pill Karaoke instead.

  The component prefers Anton (a condensed display face) with Impact and
  system-ui as fallbacks. For best results, load Anton from Google Fonts in your
  project.