> ## 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.

# Transformation Template

> Create before/after comparison videos for fitness, makeover, and product content

Create compelling before/after transformation videos with side-by-side comparisons, perfect for fitness content, makeovers, product demos, and UGC ads.

## Basic Before/After

Side-by-side still images:

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

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

const CHARACTER = "woman in her 30s, brown hair, green eyes"

const before = Image({
  model: varg.imageModel("nano-banana-pro"),
  prompt: `${CHARACTER}, tired expression, loose grey t-shirt, bathroom mirror selfie`,
  aspectRatio: "9:16",
})

const after = Image({
  model: varg.imageModel("nano-banana-pro/edit"),
  prompt: { text: `${CHARACTER}, fit and confident, athletic wear, same bathroom, energetic smile`, images: [before] },
  aspectRatio: "9:16",
})

export default (
  <Render width={2160} height={1920}>
    <Clip duration={5}>
      <Split direction="horizontal">
        {before}
        {after}
      </Split>
      <Title position="top" color="#ffffff">My 3-Month Transformation</Title>
    </Clip>
  </Render>
)
```

## Animated Transformation

Before and after with motion:

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

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

const CHARACTER = "woman in her 30s, brown hair"

const before = Image({
  model: varg.imageModel("nano-banana-pro"),
  prompt: `${CHARACTER}, tired expression, loose clothing`,
  aspectRatio: "9:16",
})

const after = Image({
  model: varg.imageModel("nano-banana-pro/edit"),
  prompt: { text: `${CHARACTER}, fit and confident, athletic wear, same person transformed`, images: [before] },
  aspectRatio: "9:16",
})

const beforeVid = Video({
  model: varg.videoModel("kling-v3"),
  prompt: { text: "person sighs, looks down sadly", images: [before] },
  duration: 5,
})

const afterVid = Video({
  model: varg.videoModel("kling-v3"),
  prompt: { text: "person smiles confidently, proud posture, flexes", images: [after] },
  duration: 5,
})

export default (
  <Render width={2160} height={1920}>
    <Music prompt="motivational upbeat, inspiring transformation" model={varg.musicModel()} volume={0.3} duration={10} />
    <Clip duration={5}>
      <Split direction="horizontal">
        {beforeVid}
        {afterVid}
      </Split>
      <Title position="top" color="#ffffff">My 3-Month Transformation</Title>
    </Clip>
  </Render>
)
```

## With Voiceover

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

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

const CHARACTER = "man in his 20s, short dark hair"

const before = Image({
  model: varg.imageModel("nano-banana-pro"),
  prompt: `${CHARACTER}, out of shape, baggy clothes, living room`,
  aspectRatio: "9:16",
})

const after = Image({
  model: varg.imageModel("nano-banana-pro/edit"),
  prompt: { text: `${CHARACTER}, muscular, fitted tank top, confident smile, same person`, images: [before] },
  aspectRatio: "9:16",
})

const voiceover = Speech({
  model: varg.speechModel("eleven_v3"),
  voice: "josh",
  children: "90 days ago I made a decision that changed my life. Here's what happened when I committed to working out every single day.",
})

export default (
  <Render width={1080} height={1920}>
    <Music prompt="motivational epic, inspiring" model={varg.musicModel()} volume={0.15} duration={10} />
    <Clip duration={3}>
      <Title position="center" color="#ffffff">Day 1</Title>
      <Image src={before} zoom="in" />
    </Clip>
    <Clip duration={3} transition={{ name: "fade", duration: 0.5 }}>
      <Title position="center" color="#ffffff">Day 90</Title>
      <Image src={after} zoom="in" />
    </Clip>
    <Captions src={voiceover} style="tiktok" color="#ffffff" withAudio />
  </Render>
)
```

## Slider Reveal Effect

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

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

const before = Image({
  model: varg.imageModel("nano-banana-pro"),
  prompt: "run-down kitchen, old appliances, dim lighting",
  aspectRatio: "16:9",
})

const after = Image({
  model: varg.imageModel("nano-banana-pro/edit"),
  prompt: { text: "modern renovated kitchen, marble countertops, bright lighting, same layout", images: [before] },
  aspectRatio: "16:9",
})

export default (
  <Render width={1920} height={1080}>
    <Clip duration={5}>
      <Slider direction="horizontal">
        {before}
        {after}
      </Slider>
    </Clip>
  </Render>
)
```

## Use Cases

| Use Case            | Before Prompt                   | After Prompt                            |
| ------------------- | ------------------------------- | --------------------------------------- |
| **Fitness**         | "person, out of shape, tired"   | "same person, fit, confident, athletic" |
| **Skincare**        | "person, acne, uneven skin"     | "same person, clear glowing skin"       |
| **Home Renovation** | "old kitchen, dated appliances" | "modern kitchen, same layout"           |
| **Product**         | "messy desk, cluttered"         | "organized desk, clean, with product"   |
| **Fashion**         | "person in casual clothes"      | "same person in elegant outfit"         |

## Tips

* **Character consistency**: Use `nano-banana-pro/edit` with the before image as input to maintain the same person/space
* **Prompt strategy**: Include "same person" or "same layout" in the after prompt to maintain consistency
* **Motion**: For animated versions, use contrasting emotions — "looks down sadly" vs "smiles confidently"
* **Music**: Motivational/inspiring music works best for transformation content
* **Duration**: 3-5 seconds per state (before/after) keeps the video punchy