# AI Generate Overlay

Overlay UI for AI content generation with prompt input and result display.

> 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/ai-generate-overlay
```

<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 { AIGenerateOverlay } from "@/components/framecn/ai-generate-overlay";
```

```tsx
<AIGenerateOverlay />
```

## API Reference

### AIGenerateOverlay

| Prop               | Type     | Default                |
| ------------------ | -------- | ---------------------- |
| `maxBlur`          | `number` | `20`                   |
| `blurStartFrame`   | `number` | `20`                   |
| `blurPeakFrame`    | `number` | `40`                   |
| `revealStartFrame` | `number` | `110`                  |
| `pillText`         | `string` | `"Generating…"`        |
| `accent`           | `string` | `"#a78bfa"`            |
| `background`       | `string` | `"#050505"`            |
| `sourceImageBg`    | `string` | `DEFAULT_SOURCE_BG`    |
| `generatedImageBg` | `string` | `DEFAULT_GENERATED_BG` |
| `dotColor`         | `string` | `"#ffffff"`            |
| `dotSize`          | `number` | `1.2`                  |
| `dotSpacing`       | `number` | `20`                   |
| `speed`            | `number` | `1`                    |
| `fps`              | `number` | `30`                   |
| `durationInFrames` | `number` | `150`                  |
| `className`        | `string` | `-`                    |

## Notes

  The overlay shows prompt input with generating state. Great for AI product
  demos showing the generation workflow.