AI Generation Canvas
Prompt-to-dashboard generation composition with morphing input, skeleton shimmer, and card reveals.
CompositionAdvanced
ai-generation-canvas30fps · 960×540
Install
$ npx remotion-ui@latest add ai-generation-canvasFrom prompt to dashboard in one beat: type a prompt, morph the input into a header, shimmer skeleton cards, then flip to live metrics.
Generic AI workflow scene, not a branded product interface. Customize prompt, accentColor, and cardCount for your video.
Responsive prompt-to-dashboard generation beat with safe-area layout, skeleton shimmer, and card flips.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/compositions/ai-generation-canvas- Use when: complete video templates that can be customized as source.
- Customize: prompt, accentColor, cardCount, metrics, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
Example
import { AiGenerationCanvas } from "@/compositions/ai-generation-canvas";
<AiGenerationCanvas
prompt="Generate a revenue dashboard for this launch"
accentColor="#e8b86d"
cardCount={4}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| prompt | string | - | Prompt typed into the input during phase one. |
| accentColor | string | - | Accent for border, shimmer, and chart highlights. |
| cardCount | number | - | Dashboard cards revealed in the grid. Clamped between 1 and 6. |
| metrics | AiGenerationMetric[] | - | Labels, values, and optional deltas for the revealed dashboard cards. |
| eyebrow | string | - | Small label above the generated dashboard headline. |
| statusLabel | string | - | Header status text shown after the prompt morphs. |
| speed | number | - | Timeline multiplier for the composition beat. |