AI Generation Canvas

A prompt input morphs into a dashboard header, then skeletons flip to reveal generated content

Installation

$ pnpm dlx shadcn@latest add @remocn/ai-generation-canvas

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { AIGenerationCanvas } from "@/components/remocn/ai-generation-canvas";

const AIGenerationCanvasScene = () => (
  <AIGenerationCanvas
    prompt="Generate a dashboard"
    accentColor="#7c3aed"
    cardCount={4}
  />
);

export const RemotionRoot = () => (
  <Composition
    id="AIGenerationCanvas"
    component={AIGenerationCanvasScene}
    durationInFrames={180}
    fps={30}
    width={1280}
    height={720}
  />
);

Props

Prop	Type	Default	Description
`prompt`	`string`	`"Generate a dashboard"`	Text typed into the input during the first phase
`accentColor`	`string`	`"#7c3aed"`	Brand color used for the input border, shimmer tint, and chart accents
`cardCount`	`number`	`4`	Number of skeleton cards rendered and revealed in the dashboard grid
`className`	`string`	—	Optional className for the outer container