Slideshow Template

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

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

const SCENES = [
  "tropical beach at sunset",
  "mountain peaks at dawn",
  "city skyline 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} model={varg.imageModel("nano-banana-pro")} aspectRatio="9:16" zoom="in" />
      </Clip>
    ))}
  </Render>
)

/** @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 hour",
  "mountain peaks at dawn, misty",
  "city skyline at night, neon lights",
  "autumn forest, golden leaves falling",
]

export default (
  <Render width={1080} height={1920}>
    <Music prompt="chill ambient lofi, relaxing study vibes" 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>
)

/** @jsxImportSource vargai */
import { Render, Clip, Image, Speech, Music, Captions } from "vargai/react"
import { createVarg } from "vargai/ai"

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

const voiceover = Speech({
  model: varg.speechModel("eleven_v3"),
  voice: "rachel",
  children: "Let me take you on a journey through the most beautiful places on Earth. From tropical paradises to mountain peaks, nature never fails to amaze.",
})

const SCENES = [
  "tropical beach, crystal clear water, palm trees",
  "mountain peaks, snow-capped, golden sunrise",
  "deep forest, rays of light through canopy",
]

export default (
  <Render width={1080} height={1920}>
    <Music prompt="ambient nature documentary, peaceful" model={varg.musicModel()} volume={0.15} duration={15} />
    {SCENES.map((prompt, i) => (
      <Clip key={i} duration={5} transition={{ name: "crossfade", duration: 0.5 }}>
        <Image prompt={prompt} model={varg.imageModel("nano-banana-pro")} aspectRatio="9:16" zoom="in" />
      </Clip>
    ))}
    <Captions src={voiceover} style="tiktok" color="#ffffff" withAudio />
  </Render>
)

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

<Clip transition={{ name: "fade", duration: 0.5 }}>
<Clip transition={{ name: "crossfade", duration: 0.5 }}>
<Clip transition={{ name: "wipeleft", duration: 0.5 }}>
<Clip transition={{ name: "cube", duration: 0.8 }}>
<Clip transition={{ name: "pixelize", duration: 0.5 }}>
<Clip transition={{ name: "dissolve", duration: 0.5 }}>

// TikTok / Reels / Shorts
<Render width={1080} height={1920}>
  <Image aspectRatio="9:16" />

// YouTube
<Render width={1920} height={1080}>
  <Image aspectRatio="16:9" />

// Instagram
<Render width={1080} height={1080}>
  <Image aspectRatio="1:1" />

"chill lofi hip hop, relaxing study vibes"
"epic orchestral cinematic trailer"
"upbeat pop, energetic, catchy melody"
"ambient nature sounds, peaceful"
"corporate upbeat, motivational"