vargai 0.4.0-alpha74 → 0.4.0-alpha76

package/README.md

@@ -199,7 +199,7 @@ await render(
 | `<Music>` | background music | `prompt`, `src`, `model`, `volume`, `loop`, `ducking` |
 | `<Title>` | text overlay | `position`, `color`, `start`, `end` |
 | `<Subtitle>` | subtitle text | `backgroundColor` |
-| `<Captions>` | auto-generated subs | `src`, `srt`, `style`, `color`, `activeColor` |
+| `<Captions>` | auto-generated subs | `src`, `srt`, `style`, `color`, `activeColor`, `withAudio` |
 | `<Overlay>` | positioned layer | `left`, `top`, `width`, `height`, `keepAudio` |
 | `<Split>` | side-by-side | `direction` |
 | `<Slider>` | before/after reveal | `direction` |
@@ -282,7 +282,7 @@ await render(
       />
     </Clip>
     
-    <Captions src={voiceover} style="tiktok" color="#ffffff" />
+    <Captions src={voiceover} style="tiktok" color="#ffffff" withAudio />
   </Render>,
   { output: "output/talking-head.mp4" }
 );
@@ -337,7 +337,7 @@ await render(
       <Title position="top" color="#ffffff">My 3-Month Transformation</Title>
     </Clip>
     
-    <Captions src={voiceover} style="tiktok" color="#ffffff" />
+    <Captions src={voiceover} style="tiktok" color="#ffffff" withAudio />
   </Render>,
   { output: "output/transformation.mp4" }
 );

package/docs/react.md

@@ -328,10 +328,13 @@ or feed it a speech element directly:
   <Captions 
     src={ralph-speech}
     style="tiktok"
+    withAudio
   />
 </Clip>
 ```
 
+> by default, `<Captions src={speech} />` renders captions only (no audio). add `withAudio` to include the speech audio track in the video.
+
 ### caption styles
 
 ```tsx

package/launch-videos/07-ugc-weight-loss.tsx

@@ -123,6 +123,11 @@ export default (
     </Clip>
 
     {/* TikTok-style captions with voiceover */}
-    <Captions src={voiceover} style={CAPTIONS_STYLE} color={CAPTIONS_COLOR} />
+    <Captions
+      src={voiceover}
+      style={CAPTIONS_STYLE}
+      color={CAPTIONS_COLOR}
+      withAudio
+    />
   </Render>
 );

package/launch-videos/08-talking-head-varg.tsx

@@ -102,6 +102,6 @@ export default (
     </Clip>
 
     {/* TikTok-style captions */}
-    <Captions src={voiceover} style="tiktok" color="#ffffff" />
+    <Captions src={voiceover} style="tiktok" color="#ffffff" withAudio />
   </Render>
 );

package/package.json

@@ -71,7 +71,7 @@
     "zod": "^4.2.1"
   },
   "sideEffects": false,
-  "version": "0.4.0-alpha74",
+  "version": "0.4.0-alpha76",
   "exports": {
     ".": "./src/index.ts",
     "./ai": "./src/ai-sdk/index.ts",

package/skills/varg-video-generation/SKILL.md

@@ -143,7 +143,7 @@ export default (
         model={fal.videoModel("wan-2.5")}
       />
     </Clip>
-    <Captions src={voiceover} style="tiktok" />
+    <Captions src={voiceover} style="tiktok" withAudio />
   </Render>
 );
 ```

package/src/cli/commands/init.tsx

@@ -226,13 +226,13 @@ export default (
        <Clip duration={21}>
          <Image src={character} />
        </Clip>
-       <Captions src={voiceover} style="tiktok" color="#ffffff" activeColor="#FFD700" />
+       <Captions src={voiceover} style="tiktok" color="#ffffff" activeColor="#FFD700" withAudio />
      </Render>
    );
    \`\`\`
    This file can be both rendered directly (\`bunx vargai render file.tsx\`) and imported by other files (\`import { character } from "./file.tsx"\`).
 
-2. **Captions include audio** - \`<Captions src={voiceover} />\` already plays the audio. No need for separate \`<Speech>\` in the clip.
+2. **Captions and audio** - \`<Captions src={voiceover} />\` renders captions only (no audio). Add \`withAudio\` to also play the speech audio: \`<Captions src={voiceover} withAudio />\`.
 
 3. **Clip duration** - Omit \`duration\` to auto-fit content. Set explicit \`duration={N}\` to lock length. If duration is shorter than content, you get black screen while audio continues.
 
@@ -305,7 +305,7 @@ export default (
         aspectRatio="9:16"
       />
     </Clip>
-    <Captions src={voiceover} style="tiktok" color="#ffffff" activeColor="#FFD700" />
+    <Captions src={voiceover} style="tiktok" color="#ffffff" activeColor="#FFD700" withAudio />
   </Render>
 );
 \`\`\`

package/src/cli/commands/storyboard.tsx

@@ -249,6 +249,7 @@ function extractElementInfo(element: VargElement): StoryboardElement {
         color: props.color,
         activeColor: props.activeColor,
         fontSize: props.fontSize,
+        withAudio: props.withAudio,
       };
       break;
     }

package/src/react/async-elements.test.ts

@@ -190,6 +190,7 @@ describe("ResolvedElement in composition tree", () => {
     const captions = Captions({
       src: audio as unknown as VargElement<"speech">,
       style: "tiktok",
+      withAudio: true,
     });
 
     expect(captions.type).toBe("captions");
@@ -458,6 +459,7 @@ describe("nested clips (container clip pattern)", () => {
             Captions({
               src: audio as unknown as VargElement<"speech">,
               style: "tiktok",
+              withAudio: true,
             }),
           ],
         }),
@@ -585,6 +587,7 @@ describe("nested clips (container clip pattern)", () => {
           Captions({
             src: audio as unknown as VargElement<"speech">,
             style: "tiktok",
+            withAudio: true,
           }),
         ],
       });

package/src/react/examples/async/example_we_want_to_test.tsx

@@ -50,7 +50,7 @@ async function Scene({
           </Clip>
         );
       })}
-      <Captions src={audio} style="tiktok" position="bottom" />
+      <Captions src={audio} style="tiktok" position="bottom" withAudio />
     </Clip>
   );
 }

package/src/react/examples/async/simple.tsx

@@ -17,6 +17,6 @@ export default (
         zoom="in"
       />
     </Clip>
-    <Captions src={audio} style="tiktok" />
+    <Captions src={audio} style="tiktok" withAudio />
   </Render>
 );

package/src/react/examples/async/speech-segments-voiceover.tsx

@@ -19,7 +19,7 @@
 
 import { elevenlabs } from "../../../ai-sdk/providers/elevenlabs";
 import { fal } from "../../../ai-sdk/providers/fal";
-import { Clip, Image, Render, render, Speech, Video } from "../..";
+import { Captions, Clip, Image, Render, render, Speech, Video } from "../..";
 
 // --- One speech call, three segments ---
 const { audio, segments } = await Speech({
@@ -84,6 +84,9 @@ const demo = (
 
     {/* Full continuous voiceover — smooth, no splicing */}
     {audio}
+
+    {/* Captions from the voiceover — no withAudio since audio is already included above */}
+    <Captions src={audio} style="tiktok" />
   </Render>
 );
 

package/src/react/examples/async/talking-head.tsx

@@ -37,7 +37,7 @@ export default (
     {/* Scene 1: talking head — lipsync via VEED, audio baked in */}
     <Clip duration={audio1.duration}>
       {talkingHead}
-      <Captions src={audio1} style="tiktok" />
+      <Captions src={audio1} style="tiktok" withAudio />
     </Clip>
 
     {/* Scene 2: science b-roll — image + voiceover via captions */}
@@ -48,7 +48,7 @@ export default (
         aspectRatio="9:16"
         zoom="out"
       />
-      <Captions src={audio2} style="tiktok" />
+      <Captions src={audio2} style="tiktok" withAudio />
     </Clip>
   </Render>
 );

package/src/react/examples/captions-demo.tsx

@@ -20,7 +20,7 @@ async function main() {
       <Clip duration={5}>
         <Image src="media/cyberpunk-street.png" />
       </Clip>
-      <Captions src={speech} style="tiktok" />
+      <Captions src={speech} style="tiktok" withAudio />
     </Render>
   );
 

package/src/react/renderers/captions.ts

@@ -346,5 +346,9 @@ export async function renderCaptions(
   writeFileSync(assPath, assContent);
   ctx.tempFiles.push(assPath);
 
-  return { assPath, srtPath, audioPath };
+  return {
+    assPath,
+    srtPath,
+    audioPath: props.withAudio ? audioPath : undefined,
+  };
 }

package/src/react/resolve.ts

@@ -221,6 +221,10 @@ async function sliceSegments(
  *
  * Adds a small safety padding (50ms) to capture any trailing silence
  * that exists in the original audio beyond the segment boundary.
+ *
+ * Routes through the FFmpegBackend when available (local or cloud/Rendi),
+ * falling back to a direct local `ffmpeg` shell command only when no
+ * backend exists (top-level `await` outside render()).
  */
 const SLICE_PADDING_S = 0.05; // 50ms safety padding
 
@@ -234,18 +238,45 @@ async function sliceAudio(
   const suffix = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
   const outPath = `/tmp/varg-segment-${suffix}.mp3`;
 
-  const inputPath = ctx?.backend
-    ? await ctx.backend.resolvePath(file)
-    : await file.toTempFile();
+  if (ctx?.backend) {
+    // Use the backend abstraction (works for both local ffmpeg and cloud/Rendi).
+    // -ss goes in input options (before -i for fast seek).
+    const result = await ctx.backend.run({
+      inputs: [{ path: file, options: ["-ss", String(start)] }],
+      outputArgs: [
+        "-t",
+        String(duration),
+        "-acodec",
+        "libmp3lame",
+        "-q:a",
+        "2",
+      ],
+      outputPath: outPath,
+    });
+
+    // Rendi returns a URL, local backend returns a file path.
+    if (result.output.type === "url") {
+      const response = await fetch(result.output.url);
+      return new Uint8Array(await response.arrayBuffer());
+    }
+    const sliced = await Bun.file(result.output.path).arrayBuffer();
+    try {
+      await Bun.file(result.output.path).delete?.();
+    } catch {
+      /* ignore cleanup errors */
+    }
+    return new Uint8Array(sliced);
+  }
 
-  // -ss before -i for fast seek, then re-encode for sample-accurate cut
+  // Fallback: no backend (top-level `await` outside render()) — use local ffmpeg directly.
+  const inputPath = await file.toTempFile();
   await $`ffmpeg -y -ss ${start} -i ${inputPath} -t ${duration} -acodec libmp3lame -q:a 2 ${outPath}`.quiet();
 
   const sliced = await Bun.file(outPath).arrayBuffer();
   try {
     await Bun.file(outPath).delete?.();
   } catch {
-    /* ignore */
+    /* ignore cleanup errors */
   }
   return new Uint8Array(sliced);
 }

package/src/react/types.ts

@@ -240,6 +240,8 @@ export interface CaptionsProps extends BaseProps {
   color?: string;
   activeColor?: string;
   fontSize?: number;
+  /** When src is a Speech element, include its audio track in the video. Defaults to false. */
+  withAudio?: boolean;
 }
 
 export interface SplitProps extends BaseProps {