Compositions
Core Primitives
Transitions
Typography
Customize
40
20
20
110
1
Installation
$ pnpm dlx shadcn@latest add @framecn/ai-generate-overlay
Usage
import { AIGenerateOverlay } from "@/components/framecn/ai-generate-overlay";<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
State-driven generation UI
The overlay shows prompt input with generating state. Great for AI product demos showing the generation workflow.