> ## Documentation Index
> Fetch the complete documentation index at: https://docs.varg.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Templates

> Copy-paste templates for common video types

Ready-to-use templates for common video formats. Copy, customize, and run.

All templates use the gateway pattern — only `VARG_API_KEY` needed.

## Quick Links

<CardGroup cols={2}>
  <Card title="Image Slideshow" icon="images" href="/templates/slideshow">
    Multiple images with transitions and music
  </Card>

  <Card title="Talking Character" icon="comment" href="/templates/talking-character">
    AI avatar with lipsync and captions
  </Card>

  <Card title="Before/After" icon="arrows-left-right" href="/templates/transformation">
    Side-by-side transformation video
  </Card>
</CardGroup>

***

## Minimal Template

The simplest possible video — single animated image:

```tsx theme={null}
/** @jsxImportSource vargai */
import { Render, Clip, Image, Video } from "vargai/react"
import { createVarg } from "vargai/ai"

const varg = createVarg({ apiKey: process.env.VARG_API_KEY! })

const image = Image({
  model: varg.imageModel("nano-banana-pro"),
  prompt: "cute cat character, big eyes, Pixar style",
  aspectRatio: "9:16",
})

export default (
  <Render width={1080} height={1920}>
    <Clip duration={5}>
      <Video
        prompt={{ text: "cat waves hello, bounces happily", images: [image] }}
        model={varg.videoModel("kling-v3")}
      />
    </Clip>
  </Render>
)
```

```bash theme={null}
bunx vargai render minimal.tsx --verbose
```

Cost: \~\$1.55 (5 credits image + 150 credits video)

***

## Slideshow with Music

```tsx theme={null}
/** @jsxImportSource vargai */
import { Render, Clip, Image, Music } from "vargai/react"
import { createVarg } from "vargai/ai"

const varg = createVarg({ apiKey: process.env.VARG_API_KEY! })

const SCENES = [
  "tropical beach at sunset, golden light",
  "mountain peaks at dawn, misty valleys",
  "city skyline at night, neon reflections",
  "autumn forest trail, golden leaves falling",
]

export default (
  <Render width={1080} height={1920}>
    <Music prompt="chill ambient lofi, relaxing" model={varg.musicModel()} volume={0.3} duration={16} />
    {SCENES.map((prompt, i) => (
      <Clip key={i} duration={4} transition={{ name: "fade", duration: 0.5 }}>
        <Image prompt={prompt} model={varg.imageModel("nano-banana-pro")} aspectRatio="9:16" zoom="in" />
      </Clip>
    ))}
  </Render>
)
```

Cost: \~\$0.45 (4 images + music)

***

## Product Showcase

```tsx theme={null}
/** @jsxImportSource vargai */
import { Render, Clip, Image, Video, Music, Title, Packshot } from "vargai/react"
import { createVarg } from "vargai/ai"

const varg = createVarg({ apiKey: process.env.VARG_API_KEY! })

const product = Image({
  model: varg.imageModel("nano-banana-pro"),
  prompt: "sleek wireless headphones, matte black, floating on dark background, studio lighting",
  aspectRatio: "9:16",
})

const hero = Video({
  model: varg.videoModel("kling-v3"),
  prompt: { text: "product slowly rotates, dramatic lighting shifts", images: [product] },
  duration: 5,
})

export default (
  <Render width={1080} height={1920}>
    <Music prompt="premium brand, minimal electronic, sophisticated" model={varg.musicModel()} volume={0.25} duration={10} />
    <Clip duration={5}>
      {hero}
      <Title position="bottom" color="#ffffff">Premium Sound</Title>
    </Clip>
    <Clip duration={3} transition={{ name: "fade", duration: 0.5 }}>
      <Packshot background="#000000" cta="Shop Now" blinkCta />
    </Clip>
  </Render>
)
```

***

## Social Media Formats

| Platform                | Resolution | Aspect Ratio | `<Render>`                   |
| ----------------------- | ---------- | ------------ | ---------------------------- |
| TikTok / Reels / Shorts | 1080x1920  | 9:16         | `width={1080} height={1920}` |
| YouTube                 | 1920x1080  | 16:9         | `width={1920} height={1080}` |
| Instagram Feed          | 1080x1080  | 1:1          | `width={1080} height={1080}` |
| Instagram Story         | 1080x1920  | 9:16         | `width={1080} height={1920}` |
| YouTube Shorts          | 1080x1920  | 9:16         | `width={1080} height={1920}` |

## Rendering

```bash theme={null}
bunx vargai render template.tsx --preview   # Free preview (placeholders)
bunx vargai render template.tsx --verbose   # Full render (costs credits)

# Background rendering
nohup bunx vargai render template.tsx --verbose > output/render.log 2>&1 &
```