vargai 0.3.2 → 0.4.0-alpha2

package/src/react/examples/madi.tsx

@@ -0,0 +1,60 @@
+import { elevenlabs } from "../../ai-sdk/providers/elevenlabs";
+import { fal } from "../../ai-sdk/providers/fal";
+import { Animate, Clip, Image, Music, Render } from "..";
+
+const MADI_REF =
+  "https://s3.varg.ai/fellowers/madi/character_shots/madi_shot_03_closeup.png";
+
+const SCENES = [
+  {
+    prompt:
+      "extreme close-up face shot, surprised expression with wide eyes, looking directly at camera, holding peach near lips",
+    motion:
+      "eyes widen in surprise, eyebrows raise slightly, subtle head tilt forward. Static shot, no camera movement.",
+  },
+  {
+    prompt:
+      "45-degree angle medium shot showing face and hands, biting into peach with exaggerated enjoyment, juice on lips, playful expression",
+    motion:
+      "turns head 45 degrees, bites into peach, juice drips down chin, hands move expressively. Slow push-in camera movement.",
+  },
+  {
+    prompt:
+      "low angle shot from below, looking down at camera with confident smirk, holding peach triumphantly, dramatic perspective",
+    motion:
+      "looks down at camera with growing smile, raises peach slightly, confident head tilt. Static camera, slight lens distortion.",
+  },
+  {
+    prompt:
+      "high angle shot from above, looking up at camera with playful smile, arms spread wide, peach in one hand, endearing expression",
+    motion:
+      "looks up at camera, expression shifts from neutral to excited smile, subtle wink, slight forward lean. Gentle camera tilt down.",
+  },
+];
+
+export default (
+  <Render width={1080} height={1920}>
+    <Music
+      prompt="upbeat electronic pop, energetic female vocal chops, modern tiktok vibe, catchy melody"
+      model={elevenlabs.musicModel()}
+      duration={10}
+      volume={0.6}
+    />
+
+    {SCENES.map((scene) => (
+      <Clip key={scene.prompt} duration={2}>
+        <Animate
+          image={Image({
+            prompt: { text: scene.prompt, images: [MADI_REF] },
+            model: fal.imageModel("nano-banana-pro/edit"),
+            aspectRatio: "9:16",
+            resize: "cover",
+          })}
+          motion={scene.motion}
+          model={fal.videoModel("wan-2.5")}
+          duration={5}
+        />
+      </Clip>
+    ))}
+  </Render>
+);

package/src/react/examples/music-test.tsx

@@ -0,0 +1,35 @@
+import { elevenlabs } from "../../ai-sdk/providers/elevenlabs";
+import { Clip, Image, Music, Render, render } from "..";
+
+async function main() {
+  const video = (
+    <Render width={1080} height={1920}>
+      <Music
+        prompt="chill lo-fi hip hop beats, relaxing piano melody"
+        model={elevenlabs.musicModel()}
+      />
+
+      <Clip duration={3}>
+        <Image src="media/cyberpunk-street.png" resize="cover" />
+      </Clip>
+      <Clip duration={3}>
+        <Image src="media/madi-portrait.png" resize="cover" />
+      </Clip>
+      <Clip duration={3}>
+        <Image src="media/replicate-forest.png" resize="cover" />
+      </Clip>
+    </Render>
+  );
+
+  console.log("testing music auto-trim (no duration specified)");
+  console.log("3 clips x 3s = 9s video, music should auto-trim to 9s\n");
+
+  await render(video, {
+    output: "output/music-test.mp4",
+    cache: ".cache/ai",
+  });
+
+  console.log("\ndone! check output/music-test.mp4");
+}
+
+main().catch(console.error);

package/src/react/examples/onlyfans-1m/workflow.tsx

@@ -0,0 +1,88 @@
+/**
+ * OnlyFans-style selfie video workflow (React DSL)
+ *
+ * 1. Generate base girl image using Higgsfield Soul
+ * 2. Edit bra color using nano-banana-pro/edit
+ * 3. Generate 5 photos with different angles using nano-banana
+ * 4. Animate all with prompts (step back, turn left/right)
+ * 5. Concatenate into ~10 second video
+ *
+ * Run: bun run src/ai-sdk/react/cli.ts src/ai-sdk/examples/onlyfans-1m/workflow.tsx -o output/onlyfans-1m.mp4
+ *
+ * Required env: HIGGSFIELD_API_KEY, HIGGSFIELD_SECRET, FAL_KEY
+ */
+
+import { fal, higgsfield } from "../../../ai-sdk";
+import { Clip, Image, Render, Video } from "../..";
+
+// ============================================================================
+// CHARACTER DEFINITION
+// ============================================================================
+
+const NEW_BRA_COLOR = "deep purple";
+
+// Base character prompt for Higgsfield
+const baseCharacter = Image({
+  prompt:
+    "A beautiful Slavic woman in her late 20s with platinum blonde hair, icy blue eyes, and perfect skin. She bends very close to the phone lens, her chest framed by a white sports bra with a bold neckline, and she is wearing high-waisted athletic shorts in pale grey that accentuate her figure. Her expression is confident and slightly teasing. The background shows a modern apartment with soft daylight through large windows, reinforcing the natural homemade vibe",
+  model: higgsfield.imageModel("soul", {
+    quality: "1080p",
+    styleId: higgsfield.styles.CAM_360,
+  }),
+  aspectRatio: "9:16",
+});
+
+// Recolor the bra using nano-banana
+const background = Image({
+  prompt: {
+    text: `Remove character from the image`,
+    images: [baseCharacter],
+  },
+  model: fal.imageModel("nano-banana-pro/edit"),
+  aspectRatio: "9:16",
+});
+
+const newBraCharacter = Image({
+  prompt: {
+    text: `Change the sports bra colour to ${NEW_BRA_COLOR}. Keep everything else exactly the same - same woman, same pose, same lighting, same background.`,
+    images: [baseCharacter, background],
+  },
+  model: fal.imageModel("seedream-v4.5/edit"),
+  aspectRatio: "9:16",
+});
+
+const newAngleCharacter = Image({
+  prompt: {
+    text: `Slightly change the pose of the character, keeping the same pose, lighting, and background. Put the character two steps aways from the`,
+    images: [newBraCharacter, background],
+  },
+  model: fal.imageModel("nano-banana-pro/edit"),
+  aspectRatio: "9:16",
+});
+
+const motionLeft = `A woman in stylish ${NEW_BRA_COLOR} sportswear takes a selfie. She starts very close to camera showing face and decolletage, then steps back to reveal more of her body. She turns slightly to the LEFT to show her figure in profile. Warm daylight, authentic homemade video feel. Camera static.`;
+
+export default (
+  <Render width={1080} height={1920}>
+    {/* Clip 1: Left angle, turns left */}
+    <Clip duration={3}>
+      <Video
+        prompt={{
+          images: [newBraCharacter],
+          text: motionLeft,
+        }}
+        model={fal.videoModel("kling-v2.5")}
+      />
+    </Clip>
+
+    <Clip duration={3}>
+      <Video
+        prompt={{
+          images: [newAngleCharacter],
+          text: motionLeft,
+        }}
+        model={fal.videoModel("kling-v2.5")}
+      />
+    </Clip>
+  </Render>
+);

package/src/react/examples/orange-portrait.tsx

@@ -0,0 +1,41 @@
+import { fal } from "../../ai-sdk/providers/fal";
+import { Clip, Image, Render, Video } from "..";
+
+// character: young woman, short dark brown bob with wispy bangs, oval face, fair skin,
+// large dark brown eyes, full lips, silver hoop earrings
+// style: deep black bg, dramatic orange rim lighting, noir/premium aesthetic
+
+export default (
+  <Render width={1080} height={1920}>
+    <Clip duration={5}>
+      <Video
+        prompt={{
+          text: "She steps back, camera reveals more of her body until she appears fully in frame. Studio lighting, authentic confident slightly playful atmosphere. Camera static. She poses naturally, first looking straight at camera, then turning slightly to the side to show her figure in profile. Intense orange lighting.",
+          images: [
+            Image({
+              prompt: {
+                text: `Using the attached reference images, generate a photorealistic Three-quarter editorial portrait of the exact same character — maintain identical face, hairstyle, and proportions from Image 1.
+
+                Framing: Head and shoulders, cropped at upper chest. Direct eye contact with camera.
+
+                Natural confident expression, relaxed shoulders.
+                Preserve the outfit neckline and visible clothing details from reference.
+
+                Background: Deep black with two contrasting orange gradient accents matching Reference 2. Soft gradient bleed, no hard edges.
+
+                Shot on 85mm f/1.4 lens, shallow depth of field. Clean studio lighting — soft key light on face, subtle rim light on hair and shoulders for separation. High-end fashion editorial aesthetic.`,
+                images: [
+                  "https://s3.varg.ai/uploads/images/1_0475e227.png",
+                  "https://s3.varg.ai/uploads/images/xyearp51qvve-zi3nrcve-zbno2hfgt5gergjrof_995f553d.png",
+                ],
+              },
+              model: fal.imageModel("nano-banana-pro/edit"),
+            }),
+          ],
+        }}
+        model={fal.videoModel("kling-v2.5")}
+        duration={5}
+      />
+    </Clip>
+  </Render>
+);

package/src/react/examples/split-element-demo.tsx

@@ -0,0 +1,60 @@
+/**
+ * Split Element Demo - uses the Split renderer (creates separate video composition)
+ *
+ * The Split element renders children into a side-by-side video using editly.
+ * Good for: when you need a self-contained split-screen video layer
+ */
+import {
+  Clip,
+  Image,
+  Packshot,
+  Render,
+  render,
+  Slider,
+  Split,
+  Swipe,
+  Title,
+} from "..";
+
+async function main() {
+  console.log("Split Element Demo (uses renderer)\n");
+
+  const img1 = Image({ src: "media/cyberpunk-street.png" });
+  const img2 = Image({ src: "media/fal-coffee-shop.png" });
+  const img3 = Image({ src: "media/kirill.png" });
+
+  const video = (
+    <Render width={1280} height={720}>
+      <Clip duration={3}>
+        <Split direction="horizontal">{[img1, img2]}</Split>
+        <Title position="bottom">Split Element (renderer)</Title>
+      </Clip>
+
+      <Clip duration={4} transition={{ name: "fade", duration: 0.5 }}>
+        <Slider direction="horizontal">{[img1, img2, img3]}</Slider>
+      </Clip>
+
+      <Clip duration={4} transition={{ name: "fade", duration: 0.5 }}>
+        <Swipe direction="left" interval={1.5}>
+          {[img1, img2, img3]}
+        </Swipe>
+      </Clip>
+
+      <Clip duration={3} transition={{ name: "fade", duration: 0.5 }}>
+        <Packshot
+          background="#1a1a2e"
+          logo="media/cyberpunk-street.png"
+          logoPosition="center"
+          logoSize="50%"
+          cta="Subscribe for more!"
+          ctaColor="#FFD700"
+        />
+      </Clip>
+    </Render>
+  );
+
+  await render(video, { output: "output/split-element-demo.mp4" });
+  console.log("\ndone! check output/split-element-demo.mp4");
+}
+
+main().catch(console.error);

package/src/react/examples/split-layout-demo.tsx

@@ -0,0 +1,60 @@
+/**
+ * SplitLayout Demo - uses the layout helper (positions children in clip)
+ *
+ * SplitLayout just adds position props to children, letting the clip handle rendering.
+ * Good for: when you want positioned images/videos within a clip alongside other layers
+ */
+import {
+  Clip,
+  Image,
+  Packshot,
+  Render,
+  render,
+  Slider,
+  SplitLayout,
+  Swipe,
+  Title,
+} from "..";
+
+async function main() {
+  console.log("SplitLayout Demo (uses layout helper)\n");
+
+  const img1 = Image({ src: "media/cyberpunk-street.png" });
+  const img2 = Image({ src: "media/fal-coffee-shop.png" });
+  const img3 = Image({ src: "media/kirill.png" });
+
+  const video = (
+    <Render width={1280} height={720}>
+      <Clip duration={3}>
+        <SplitLayout direction="horizontal" left={img1} right={img2} />
+        <Title position="bottom">SplitLayout (layout helper)</Title>
+      </Clip>
+
+      <Clip duration={4} transition={{ name: "fade", duration: 0.5 }}>
+        <Slider direction="horizontal">{[img1, img2, img3]}</Slider>
+      </Clip>
+
+      <Clip duration={4} transition={{ name: "fade", duration: 0.5 }}>
+        <Swipe direction="left" interval={1.5}>
+          {[img1, img2, img3]}
+        </Swipe>
+      </Clip>
+
+      <Clip duration={3} transition={{ name: "fade", duration: 0.5 }}>
+        <Packshot
+          background="#1a1a2e"
+          logo="media/cyberpunk-street.png"
+          logoPosition="center"
+          logoSize="50%"
+          cta="Subscribe for more!"
+          ctaColor="#FFD700"
+        />
+      </Clip>
+    </Render>
+  );
+
+  await render(video, { output: "output/split-layout-demo.mp4" });
+  console.log("\ndone! check output/split-layout-demo.mp4");
+}
+
+main().catch(console.error);

package/src/react/examples/split.tsx

@@ -0,0 +1,41 @@
+import { fal } from "../../ai-sdk/providers/fal";
+import { Clip, Image, Render, render, SplitLayout as Split, Title } from "..";
+
+async function main() {
+  console.log("creating before/after split screen...\n");
+
+  const before = Image({
+    prompt:
+      "overweight man sitting on couch, tired expression, pale skin, messy hair, wearing stained t-shirt",
+    model: fal.imageModel("flux-schnell"),
+  });
+
+  const after = Image({
+    prompt:
+      "fit muscular man standing confidently, tanned skin, bright smile, wearing fitted athletic shirt",
+    model: fal.imageModel("flux-schnell"),
+  });
+
+  const video = (
+    <Render width={1920} height={1080}>
+      <Clip duration={5}>
+        <Split left={before} right={after} />
+        <Title position="bottom" color="#ffffff">
+          30 Day Transformation
+        </Title>
+      </Clip>
+    </Render>
+  );
+
+  console.log("video tree:", JSON.stringify(video, null, 2));
+
+  const buffer = await render(video, {
+    output: "output/react-split.mp4",
+    cache: ".cache/ai",
+  });
+
+  console.log(`\ndone! ${buffer.byteLength} bytes`);
+  console.log("output: output/react-split.mp4");
+}
+
+main().catch(console.error);

package/src/react/examples/video-grid.tsx

@@ -0,0 +1,46 @@
+import { fal } from "../../ai-sdk/providers/fal";
+import { Clip, Grid, Render, render, Title, Video } from "..";
+
+async function main() {
+  console.log("creating 2x2 video grid...\n");
+
+  const video = (
+    <Render width={1920} height={1080}>
+      <Clip duration={5}>
+        <Grid columns={2}>
+          <Video
+            prompt="ocean waves crashing on rocks, slow motion, cinematic"
+            model={fal.videoModel("wan-2.5")}
+          />
+          <Video
+            prompt="fire burning in fireplace, cozy, warm light"
+            model={fal.videoModel("wan-2.5")}
+          />
+          <Video
+            prompt="rain falling on window glass, close up, moody"
+            model={fal.videoModel("wan-2.5")}
+          />
+          <Video
+            prompt="clouds moving across blue sky, timelapse, peaceful"
+            model={fal.videoModel("wan-2.5")}
+          />
+        </Grid>
+        <Title position="bottom" color="#ffffff">
+          Elements
+        </Title>
+      </Clip>
+    </Render>
+  );
+
+  console.log("video tree:", JSON.stringify(video, null, 2));
+
+  const buffer = await render(video, {
+    output: "output/react-video-grid.mp4",
+    cache: ".cache/ai",
+  });
+
+  console.log(`\ndone! ${buffer.byteLength} bytes`);
+  console.log("output: output/react-video-grid.mp4");
+}
+
+main().catch(console.error);

package/src/react/index.ts

@@ -0,0 +1,43 @@
+export type { SizeValue } from "../ai-sdk/providers/editly/types";
+export {
+  Animate,
+  Captions,
+  Clip,
+  Image,
+  Music,
+  Overlay,
+  Packshot,
+  Render,
+  Slider,
+  Speech,
+  Split,
+  Subtitle,
+  Swipe,
+  TalkingHead,
+  Title,
+  Video,
+} from "./elements";
+export { Grid, SplitLayout } from "./layouts";
+export { render, renderStream } from "./render";
+export type {
+  AnimateProps,
+  CaptionsProps,
+  ClipProps,
+  ImageProps,
+  MusicProps,
+  OverlayProps,
+  PackshotProps,
+  PositionProps,
+  RenderOptions,
+  RenderProps,
+  SliderProps,
+  SpeechProps,
+  SplitProps,
+  SubtitleProps,
+  SwipeProps,
+  TalkingHeadProps,
+  TitleProps,
+  VargElement,
+  VargNode,
+  VideoProps,
+} from "./types";

package/src/react/layouts/grid.tsx

@@ -0,0 +1,28 @@
+import type { VargElement } from "../types";
+
+export const Grid = ({
+  columns,
+  rows,
+  children,
+  resize = "contain",
+}: {
+  columns?: number;
+  rows?: number;
+  children: VargElement[];
+  resize?: "cover" | "contain" | "stretch";
+}) => {
+  const cols = columns ?? children.length;
+  const rowCount = rows ?? Math.ceil(children.length / cols);
+  const positioned = children.map((el, i) => ({
+    ...el,
+    props: {
+      ...el.props,
+      left: `${((i % cols) / cols) * 100}%`,
+      top: `${(Math.floor(i / cols) / rowCount) * 100}%`,
+      width: `${(1 / cols) * 100}%`,
+      height: `${(1 / rowCount) * 100}%`,
+      resize,
+    },
+  }));
+  return <>{positioned}</>;
+};

package/src/react/layouts/index.ts

@@ -0,0 +1,2 @@
+export { Grid } from "./grid";
+export { SplitLayout } from "./split";

package/src/react/layouts/split.tsx

@@ -0,0 +1,20 @@
+import type { VargElement } from "../types";
+import { Grid } from "./grid";
+
+export const SplitLayout = ({
+  left,
+  right,
+  direction = "horizontal",
+}: {
+  left: VargElement;
+  right: VargElement;
+  direction?: "horizontal" | "vertical";
+}) => (
+  <Grid
+    columns={direction === "horizontal" ? 2 : 1}
+    rows={direction === "vertical" ? 2 : 1}
+  >
+    {left}
+    {right}
+  </Grid>
+);