AI Prompt Flow

import { AiPromptFlow } from "@/components/remocn/ai-prompt-flow";export const Scene = () => <AiPromptFlow />;

A composition scene that plays the full lifecycle of an AI generation: the prompt types into the field, the Generate button runs hover → press → loading, a skeleton shimmer stands in for the response, then crossfades into the generated answer, and a ready toast slides in. It is a pure orchestrator — every channel comes from a composed primitive's transition hook, so nothing is hand-timed.

Installation

$ pnpm dlx shadcn@latest add @remocn/ai-prompt-flow

Composed primitives

• Input — the prompt field; the prompt reveals character by character while the field sits in its active state
• Button — the Generate action, driven through hover, press, and loading states
• Skeleton and SkeletonBlock — the shimmer placeholder standing in for the pending response
• Toast — the confirmation that slides in once the answer has landed

Timeline narrative

The scene opens with the prompt field active and empty. The prompt types itself in, the Generate button picks up hover then press, and drops into its loading state. The answer area swaps to a skeleton shimmer while generation is pending, then crossfades from shimmer to the real answer lines. A toast slides in to confirm the response is ready and dismisses near frame 220, leaving a short settle before the scene ends at 230.

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { AiPromptFlow } from "@/components/remocn/ai-prompt-flow";
 
const PromptScene = () => (
  <AiPromptFlow
    prompt="Summarize this thread"
    buttonLabel="Generate"
    toastTitle="Response ready"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="AiPromptFlow"
    component={PromptScene}
    durationInFrames={230}
    fps={30}
    width={1280}
    height={720}
  />
);

Props