Transformation Template

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

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

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

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