Components

/** @jsxImportSource vargai */
import { 
  Render, Clip, 
  Image, Video, Speech, Music,
  Title, Subtitle, Captions,
  Overlay, Split, Slider, Swipe, Grid,
  TalkingHead, Packshot
} from "vargai/react"
import { createVarg } from "vargai/ai"

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

<Render width={1080} height={1920} fps={30}>
  {/* clips and media */}
</Render>

<Clip duration={3} transition={{ name: "fade", duration: 0.5 }}>
  <Video src="scene.mp4" />
</Clip>

transition={{ name: "fade", duration: 0.5 }}
transition={{ name: "crossfade", duration: 0.5 }}
transition={{ name: "wipeleft", duration: 0.5 }}
transition={{ name: "wiperight", duration: 0.5 }}
transition={{ name: "slideup", duration: 0.5 }}
transition={{ name: "slidedown", duration: 0.5 }}
transition={{ name: "cube", duration: 0.8 }}
transition={{ name: "pixelize", duration: 0.5 }}

// AI generation
const cat = Image({
  prompt: "cute orange cat, Pixar style",
  model: varg.imageModel("nano-banana-pro"),
  aspectRatio: "9:16",
})

// In composition with zoom
<Clip duration={3}>
  <Image src={cat} zoom="in" />
</Clip>

// Static image
<Clip duration={3}>
  <Image src="media/photo.jpg" zoom="out" />
</Clip>

// Image-to-video
const character = Image({ prompt: "robot character" })

<Clip duration={5}>
  <Video
    prompt={{ text: "robot waves hello", images: [character] }}
    model={varg.videoModel("kling-v3")}
  />
</Clip>

// Text-to-video
<Clip duration={5}>
  <Video
    prompt="ocean waves crashing on beach"
    model={varg.videoModel("kling-v3")}
  />
</Clip>

// Source video
<Clip duration={5}>
  <Video src="media/clip.mp4" volume={0.5} />
</Clip>

// Lipsync (video + audio)
const animatedVideo = Video({ prompt: { ... } });
const voiceover = Speech({ ... });

<Video
  prompt={{ video: animatedVideo, audio: voiceover }}
  model={varg.videoModel("sync-v2-pro")}
/>

// Text only
prompt="waves on beach"

// Image-to-video
prompt={{ text: "waves crash", images: [imageRef] }}

// Lipsync
prompt={{ video: videoRef, audio: speechRef }}

const voiceover = Speech({
  model: varg.speechModel("eleven_v3"),
  voice: "rachel",
  children: "Hello everyone! Welcome to my video.",
})

// Use in composition
<Captions src={voiceover} style="tiktok" />

<Render>
  <Music 
    prompt="upbeat electronic pop, energetic" 
    model={varg.musicModel()} 
    volume={0.2}
    loop
  />
  
  <Clip duration={5}>...</Clip>
  <Clip duration={5}>...</Clip>
</Render>

<Clip duration={5}>
  <Video src="scene.mp4" />
  <Title position="top" color="#ffffff">My Video Title</Title>
</Clip>

const voiceover = Speech({ children: "Hello everyone!" });

<Render>
  <Clip duration={5}>
    <Video src="talking.mp4" />
  </Clip>
  <Captions src={voiceover} style="tiktok" color="#ffffff" />
</Render>

<Clip duration={5}>
  <Video src="background.mp4" />
  <Overlay left={50} top={100} width={200} height={200}>
    <Image src="logo.png" />
  </Overlay>
</Clip>

<Clip duration={5}>
  <Split direction="horizontal">
    <Video src="left.mp4" />
    <Video src="right.mp4" />
  </Split>
</Clip>

<Clip duration={5}>
  <SplitLayout 
    direction="horizontal" 
    left={beforeVideo} 
    right={afterVideo} 
  />
</Clip>

<Clip duration={5}>
  <Grid columns={2}>
    <Video src="1.mp4" />
    <Video src="2.mp4" />
    <Video src="3.mp4" />
    <Video src="4.mp4" />
  </Grid>
</Clip>

<Clip duration={5}>
  <Slider direction="horizontal">
    <Image src="before.jpg" />
    <Image src="after.jpg" />
  </Slider>
</Clip>

<Clip duration={10}>
  <Swipe direction="horizontal" interval={2}>
    <Image src="card1.jpg" />
    <Image src="card2.jpg" />
    <Image src="card3.jpg" />
  </Swipe>
</Clip>

const character = Image({ prompt: "friendly presenter" });

<Clip duration={10}>
  <TalkingHead
    character={character}
    voice="rachel"
    model={varg.videoModel("kling-v3")}
    lipsyncModel={varg.videoModel("sync-v2-pro")}
  >
    Hello everyone! Welcome to my channel.
  </TalkingHead>
</Clip>

<Clip duration={3}>
  <Packshot
    background="#000000"
    logo="media/logo.png"
    cta="Subscribe Now!"
    blinkCta
  />
</Clip>