varg-video-generation

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Video Generation with varg React Engine

使用varg React Engine生成视频

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

使用声明式JSX语法生成AI视频，支持自动缓存和并行生成。

Quick Setup

快速设置

Initialize a new project:

bash

bunx vargai init

Or just create hello.tsx starter:

bash

bunx vargai hello

Check existing API keys:

bash

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

初始化新项目：

bash

bunx vargai init

或者直接创建hello.tsx启动项目：

bash

bunx vargai hello

查看现有API密钥：

bash

cat .env 2>/dev/null | grep -E "^(FAL_KEY|ELEVENLABS_API_KEY)=" || echo "未找到API密钥"

Required API Keys

所需API密钥

FAL_KEY (Required)

FAL_KEY（必填）

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

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

详情	值
提供商	Fal.ai
获取地址	https://fal.ai/dashboard/keys
免费额度	有（额度有限）
用途	图像生成（Flux）、视频生成（Wan 2.5、Kling）

如果用户没有

FAL_KEY

：

引导至https://fal.ai/dashboard/keys
创建账户并生成API密钥
添加到
```
.env
```
文件：
```
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.

功能	密钥	提供商	地址
音乐/语音	`ELEVENLABS_API_KEY`	ElevenLabs	https://elevenlabs.io/app/settings/api-keys
唇形同步	`REPLICATE_API_TOKEN`	Replicate	https://replicate.com/account/api-tokens
转录	`GROQ_API_KEY`	Groq	https://console.groq.com/keys

提醒用户缺少可选密钥的情况，但可继续使用已有的功能。

Available Features by API Key

按API密钥划分的可用功能

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

仅使用FAL_API_KEY：

图像生成（Flux模型）
图像转视频动画（Wan 2.5、Kling）
文本转视频生成
带转场效果的幻灯片
Ken Burns缩放效果

FAL + ELEVENLABS：

包含以上所有功能，新增：
AI生成背景音乐
文本转语音旁白
拟人角色视频

使用所有密钥：

包含唇形同步和自动字幕的完整生产流程

Quick Templates

快速模板

Simple Slideshow (FAL only)

简单幻灯片（仅需FAL）

tsx

/** @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>
);

tsx

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

const SCENES = ["海上日落", "山峰", "城市夜景"];

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)

动画视频（FAL + ElevenLabs）

tsx

/** @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>
);

tsx

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

const cat = Image({ prompt: "窗台上的可爱猫咪" });

export default (
  <Render width={1080} height={1920}>
    <Music prompt="欢快的电子音乐" model={elevenlabs.musicModel()} />
    <Clip duration={5}>
      <Video
        prompt={{ text: "猫咪转头，慢慢眨眼", images: [cat] }}
        model={fal.videoModel("wan-2.5")}
      />
    </Clip>
  </Render>
);

Talking Character

拟人角色

tsx

/** @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>
);

tsx

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

const robot = Image({ prompt: "友好的蓝色金属质感机器人", aspectRatio: "9:16" });

const voiceover = Speech({
  model: elevenlabs.speechModel("eleven_multilingual_v2"),
  voice: "adam",
  children: "你好！我是你的AI助手。让我们一起创造精彩内容吧！",
});

export default (
  <Render width={1080} height={1920}>
    <Clip duration={5}>
      <Video
        prompt={{ text: "机器人说话，头部轻微晃动", images: [robot] }}
        model={fal.videoModel("wan-2.5")}
      />
    </Clip>
    <Captions src={voiceover} style="tiktok" />
  </Render>
);

Running Videos

运行视频

bash

bunx vargai render your-video.tsx

bash

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

组件	用途	必填密钥
`<Render>`	根容器	-
`<Clip>`	连续片段	-
`<Image>`	AI图像	FAL
`<Animate>`	图像转视频	FAL
`<Music>`	背景音乐	ElevenLabs
`<Speech>`	文本转语音	ElevenLabs

Common Patterns

常见模式

Character Consistency

角色一致性

tsx

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

tsx

const character = Image({ prompt: "蓝色机器人" });
// 复用相同引用 = 生成相同图像
<Animate image={character} motion="挥手" />
<Animate image={character} motion="跳舞" />

Transitions

转场效果

tsx

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

tsx

<Clip transition={{ name: "fade", duration: 0.5 }}>
// 选项：fade（淡入淡出）、crossfade（交叉淡入淡出）、wipeleft（左擦除）、cube（立方体转场）、slideup（向上滑动）等

Aspect Ratios

宽高比

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

```
9:16
```
- TikTok、Reels、Shorts（竖屏）
```
16:9
```
- YouTube（横屏）
```
1:1
```
- Instagram（方形）

Zoom Effects

缩放效果

tsx

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

tsx

<Image prompt="风景" zoom="in" />   // 放大
<Image prompt="风景" zoom="out" />  // 缩小
<Image prompt="风景" zoom="left" /> // 向左平移

Troubleshooting

故障排除

"FAL_KEY not found"

"FAL_KEY not found"（未找到FAL_KEY）

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

检查项目根目录是否存在
```
.env
```
文件
确保
```
=
```
符号前后没有空格
添加密钥后重启终端

"Rate limit exceeded"

"Rate limit exceeded"（超出速率限制）

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

免费额度有使用限制
等待或升级套餐
使用缓存避免重复生成

"Video generation failed"

"Video generation failed"（视频生成失败）

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

检查提示词是否违反内容政策
尝试更简单的动作描述
缩短视频时长

Next Steps

后续步骤

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

运行
```
bunx vargai init
```
初始化项目
将你的FAL_KEY添加到
```
.env
```
文件中
运行
```
bunx vargai render hello.tsx
```
或者向agent提问："创建一个10秒的猫咪主题TikTok视频"