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:

bash
1bunx vargai init

Or just create hello.tsx starter:

bash
1bunx vargai hello

Check existing API keys:

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

Required API Keys

FAL_KEY (Required)

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

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)

tsx
1/** @jsxImportSource vargai */
2import { Render, Clip, Image } from "vargai/react";
3
4const SCENES = ["sunset over ocean", "mountain peaks", "city at night"];
5
6export default (
7  <Render width={1080} height={1920}>
8    {SCENES.map((prompt, i) => (
9      <Clip key={i} duration={3} transition={{ name: "fade", duration: 0.5 }}>
10        <Image prompt={prompt} zoom="in" />
11      </Clip>
12    ))}
13  </Render>
14);

Animated Video (FAL + ElevenLabs)

tsx
1/** @jsxImportSource vargai */
2import { Render, Clip, Image, Video, Music } from "vargai/react";
3import { fal, elevenlabs } from "vargai/ai";
4
5const cat = Image({ prompt: "cute cat on windowsill" });
6
7export default (
8  <Render width={1080} height={1920}>
9    <Music prompt="upbeat electronic" model={elevenlabs.musicModel()} />
10    <Clip duration={5}>
11      <Video
12        prompt={{ text: "cat turns head, blinks slowly", images: [cat] }}
13        model={fal.videoModel("wan-2.5")}
14      />
15    </Clip>
16  </Render>
17);

Talking Character

tsx
1/** @jsxImportSource vargai */
2import { Render, Clip, Image, Video, Speech, Captions } from "vargai/react";
3import { fal, elevenlabs } from "vargai/ai";
4
5const robot = Image({ prompt: "friendly robot, blue metallic", aspectRatio: "9:16" });
6
7const voiceover = Speech({
8  model: elevenlabs.speechModel("eleven_multilingual_v2"),
9  voice: "adam",
10  children: "Hello! I'm your AI assistant. Let's create something amazing!",
11});
12
13export default (
14  <Render width={1080} height={1920}>
15    <Clip duration={5}>
16      <Video
17        prompt={{ text: "robot talking, subtle head movements", images: [robot] }}
18        model={fal.videoModel("wan-2.5")}
19      />
20    </Clip>
21    <Captions src={voiceover} style="tiktok" />
22  </Render>
23);

Running Videos

bash
1bunx vargai render your-video.tsx

Key Components

Common Patterns

Character Consistency

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

Transitions

tsx
1<Clip transition={{ name: "fade", duration: 0.5 }}>
2// 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

tsx
1<Image prompt="landscape" zoom="in" />   // Zoom in
2<Image prompt="landscape" zoom="out" />  // Zoom out
3<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"