AI Generation Canvas

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

A four-phase composition that tells the story of AI generation in one shot. The prompt types into a centered input, the input springs upward and stretches into a header bar, brand-tinted skeleton cards fade in beneath it, then each card flips on its Y axis to reveal the rendered dashboard content with a staggered cascade.

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.

Notes

Skeletons should not feel like loading spinners

The shimmer is intentionally tinted with the accent color at low alpha rather than the usual neutral gray. That single detail reframes the wait as anticipation — it reads as the model thinking, not as the network stalling.