Video Generator Card

AI chats 100

About

This file contains the reusable VideoGeneratorCard component. It's built with shadcn/ui primitives and is fully typed with TypeScript. Props like storyboardImages, initialPrompt, onGenerate, and isLoading make it flexible for various use cases.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Video Generator Card to your project and fits it to your theme.

Code

How Video Generator Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import * as React from "react"

import { VideoGeneratorCard } from "@/components/ui/video-generator-card"

export default function VideoGeneratorCardDemo() {
  const [isLoading, setIsLoading] = React.useState(false);

  // Sample data for the storyboard images
  const storyboardImages = [
    {
      src: 'https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-7265ae2FvvY1NECu1e4sxmOs1Q6s7h.png&w=1000&q=75',
      alt: 'A person in green pants sitting with knees to chest.',
    },
    {
      src: 'https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-hhPaKmoyd4nBebxrwYPSULnJ8GUjow.png&w=320&q=75',
      alt: 'A person in a white dress standing against an orange background.',
    },
    {
      src: 'https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-faPseNwO03Gngr7lQUwgpQcs4z52Yw.png&w=1000&q=75',
      alt: 'A person in a red and white skirt stretching on an orange couch.',
    },
  ];

  const initialPrompt = "Use the storyboard uploaded to create an advertising retro short video in 30 seconds.";

  // Handler for the generate action
  const handleGenerate = (prompt: string) => {
    console.log("Generating video with prompt:", prompt);
    setIsLoading(true);

    // Simulate an API call
    setTimeout(() => {
      setIsLoading(false);
      alert("Video generation started!");
    }, 2000);
  };
  
  // Handler for the close action
  const handleClose = () => {
    alert("Close button clicked!");
  };

  return (
    <div className="flex items-center justify-center w-full h-[600px] bg-background"
      style={{
        backgroundImage: 'radial-gradient(circle at top left, hsl(var(--primary)/0.1), transparent 40%), radial-gradient(circle at bottom right, hsl(var(--primary)/0.1), transparent 40%)',
      }}>
      <VideoGeneratorCard
        storyboardImages={storyboardImages}
        initialPrompt={initialPrompt}
        isLoading={isLoading}
        onGenerate={handleGenerate}
        onClose={handleClose}
      />
    </div>
  )
}