Video Generation with varg React Engine

Generate AI videos using declarative JSX syntax with automatic caching and parallel generation.

Quick Setup

Initialize a new project:

bunx vargai init

Or just create hello.tsx starter:

bunx vargai hello

Check existing API keys:

cat .env 2>/dev/null | grep -E "^(FAL_KEY|ELEVENLABS_API_KEY)=" || echo "No API keys found"

Required API Keys

FAL_KEY (Required)

Detail	Value
Provider	Fal.ai
Get it	https://fal.ai/dashboard/keys
Free tier	Yes (limited credits)
Used for	Image generation (Flux), Video generation (Wan 2.5, Kling)

If user doesn't have FAL_KEY:

1. Direct them to https://fal.ai/dashboard/keys
2. Create account and generate API key
3. Add to .env file: FAL_KEY=fal_xxxxx

Optional Keys

Feature	Key	Provider	URL
Music/Voice	ELEVENLABS_API_KEY	ElevenLabs	https://elevenlabs.io/app/settings/api-keys
Lipsync	REPLICATE_API_TOKEN	Replicate	https://replicate.com/account/api-tokens
Transcription	GROQ_API_KEY	Groq	https://console.groq.com/keys

Warn user about missing optional keys but continue with available features.

Available Features by API Key

FAL_API_KEY only:

• Image generation (Flux models)
• Image-to-video animation (Wan 2.5, Kling)
• Text-to-video generation
• Slideshows with transitions
• Ken Burns zoom effects

FAL + ELEVENLABS:

• All above, plus:
• AI-generated background music
• Text-to-speech voiceovers
• Talking character videos

All keys:

• Full production pipeline with lipsync and auto-captions

Quick Templates

Simple Slideshow (FAL only)

/** @jsxImportSource vargai */
import { Render, Clip, Image } from "vargai/react";

const SCENES = ["sunset over ocean", "mountain peaks", "city at night"];

export default (
  <Render width={1080} height={1920}>
    {SCENES.map((prompt, i) => (
      <Clip key={i} duration={3} transition={{ name: "fade", duration: 0.5 }}>
        <Image prompt={prompt} zoom="in" />
      </Clip>
    ))}
  </Render>
);

Animated Video (FAL + ElevenLabs)

/** @jsxImportSource vargai */
import { Render, Clip, Image, Video, Music } from "vargai/react";
import { fal, elevenlabs } from "vargai/ai";

const cat = Image({ prompt: "cute cat on windowsill" });

export default (
  <Render width={1080} height={1920}>
    <Music prompt="upbeat electronic" model={elevenlabs.musicModel()} />
    <Clip duration={5}>
      <Video
        prompt={{ text: "cat turns head, blinks slowly", images: [cat] }}
        model={fal.videoModel("wan-2.5")}
      />
    </Clip>
  </Render>
);

Talking Character

/** @jsxImportSource vargai */
import { Render, Clip, Image, Video, Speech, Captions } from "vargai/react";
import { fal, elevenlabs } from "vargai/ai";

const robot = Image({ prompt: "friendly robot, blue metallic", aspectRatio: "9:16" });

const voiceover = Speech({
  model: elevenlabs.speechModel("eleven_multilingual_v2"),
  voice: "adam",
  children: "Hello! I'm your AI assistant. Let's create something amazing!",
});

export default (
  <Render width={1080} height={1920}>
    <Clip duration={5}>
      <Video
        prompt={{ text: "robot talking, subtle head movements", images: [robot] }}
        model={fal.videoModel("wan-2.5")}
      />
    </Clip>
    <Captions src={voiceover} style="tiktok" />
  </Render>
);

Running Videos

bunx vargai render your-video.tsx

Key Components

Component	Purpose	Required Key
<Render>	Root container	-
<Clip>	Sequential segment	-
<Image>	AI image	FAL
<Animate>	Image-to-video	FAL
<Music>	Background music	ElevenLabs
<Speech>	Text-to-speech	ElevenLabs

Common Patterns

Character Consistency

const character = Image({ prompt: "blue robot" });
// Reuse same reference = same generated image
<Animate image={character} motion="waving" />
<Animate image={character} motion="dancing" />

Transitions

<Clip transition={{ name: "fade", duration: 0.5 }}>
// Options: fade, crossfade, wipeleft, cube, slideup, etc.

Aspect Ratios

• 9:16 - TikTok, Reels, Shorts (vertical)
• 16:9 - YouTube (horizontal)
• 1:1 - Instagram (square)

Zoom Effects

<Image prompt="landscape" zoom="in" />   // Zoom in
<Image prompt="landscape" zoom="out" />  // Zoom out
<Image prompt="landscape" zoom="left" /> // Pan left

Troubleshooting

"FAL_KEY not found"

• Check .env file exists in project root
• Ensure no spaces around = sign
• Restart terminal after adding keys

"Rate limit exceeded"

• Free tier has limited credits
• Wait or upgrade plan
• Use caching to avoid regenerating

"Video generation failed"

• Check prompt doesn't violate content policy
• Try simpler motion descriptions
• Reduce video duration

Next Steps

1. Run bunx vargai init to initialize project
2. Add your FAL_KEY to .env
3. Run bunx vargai render hello.tsx
4. Or ask the agent: "create a 10 second tiktok video about cats"