@vargai/sdk 0.1.1 → 0.2.0

package/lib/remotion/SKILL.md

@@ -301,6 +301,30 @@ bun run lib/remotion/index.ts render <root-file.tsx> <comp-id> <output.mp4>
 bun run lib/remotion/index.ts still <root-file.tsx> <comp-id> <frame> <out.png>
 ```
 
+### remotion studio (visual preview & debugging)
+```bash
+# launch studio to preview compositions visually
+bun remotion studio lib/remotion/compositions/MyVideo.root.tsx --public-dir=lib/remotion/public
+
+# studio features:
+# - scrub through timeline
+# - see all sequences visually with names
+# - debug timing issues
+# - preview renders before committing
+```
+
+### direct render with bun (alternative)
+```bash
+# render full video
+bun remotion render lib/remotion/compositions/MyVideo.root.tsx MyVideo output.mp4 --public-dir=lib/remotion/public
+
+# render at lower resolution for preview (faster)
+bun remotion render lib/remotion/compositions/MyVideo.root.tsx MyVideo preview.mp4 --public-dir=lib/remotion/public --scale=0.5
+
+# render specific frame range for testing
+bun remotion render lib/remotion/compositions/MyVideo.root.tsx MyVideo test.mp4 --public-dir=lib/remotion/public --frames=0-60
+```
+
 ### lib/ffmpeg.ts
 ```bash
 # get video metadata
@@ -575,28 +599,130 @@ return (
 );
 ```
 
-### video with word-by-word captions
+### looping videos (when scene > video duration)
+when scene duration exceeds video file duration, video freezes on last frame. use `<Loop>`:
+
 ```typescript
-// parse SRT
-const subtitles = parseSRT(srtContent);
+import { Loop, OffthreadVideo } from "remotion";
 
-// in component
-const frame = useCurrentFrame();
-const { fps } = useVideoConfig();
-const currentTime = frame / fps;
+// define actual video durations (from ffprobe)
+const VIDEO_DURATIONS_SECONDS: Record<number, number> = {
+  1: 5.041667,
+  2: 10.041667,
+  // ...
+};
 
-const currentSubtitle = subtitles.find(
-  sub => currentTime >= sub.startTime && currentTime <= sub.endTime
-);
+// looping video component
+const LoopingVideo: React.FC<{
+  src: string;
+  loopDurationInFrames: number;
+}> = ({ src, loopDurationInFrames }) => {
+  return (
+    <Loop durationInFrames={loopDurationInFrames}>
+      <OffthreadVideo src={src} muted />
+    </Loop>
+  );
+};
 
-return (
-  <AbsoluteFill>
-    <OffthreadVideo src={staticFile("video.mp4")} />
-    {currentSubtitle && (
-      <div className="caption">{currentSubtitle.text}</div>
-    )}
-  </AbsoluteFill>
-);
+// usage in render
+const loopDuration = VIDEO_DURATIONS_SECONDS[scene.video];
+const loopDurationInFrames = Math.round(loopDuration * fps);
+
+<Sequence from={startFrame} durationInFrames={sceneDurationFrames}>
+  <LoopingVideo
+    src={staticFile(`scene${scene.video}_video.mp4`)}
+    loopDurationInFrames={loopDurationInFrames}
+  />
+</Sequence>
+```
+
+**critical**: `<Loop durationInFrames>` takes the VIDEO's duration (how long before it loops), not the scene's duration. the Sequence controls how long the scene plays.
+
+### video with word-by-word captions (tiktok style)
+```typescript
+// parse SRT content to captions array
+interface Caption {
+  id: number;
+  startMs: number;
+  endMs: number;
+  text: string;
+}
+
+const parseTimestamp = (ts: string): number => {
+  const [time, ms] = ts.split(",");
+  const [h, m, s] = (time ?? "0:0:0").split(":").map(Number);
+  return (h ?? 0) * 3600000 + (m ?? 0) * 60000 + (s ?? 0) * 1000 + Number(ms ?? 0);
+};
+
+const parseSRT = (content: string): Caption[] => {
+  const blocks = content.trim().split(/\n\n+/);
+  return blocks.map((block) => {
+    const lines = block.split("\n");
+    const id = Number(lines[0]);
+    const timeLine = lines[1] ?? "00:00:00,000 --> 00:00:00,000";
+    const [startTs, endTs] = timeLine.split(" --> ");
+    const text = lines.slice(2).join(" ");
+    return {
+      id,
+      startMs: parseTimestamp(startTs ?? "00:00:00,000"),
+      endMs: parseTimestamp(endTs ?? "00:00:00,000"),
+      text,
+    };
+  });
+};
+
+// group words into chunks for display (4 words at a time)
+const WORDS_PER_CHUNK = 4;
+const groupCaptions = (captions: Caption[]) => {
+  const groups: { words: Caption[]; startMs: number; endMs: number }[] = [];
+  for (let i = 0; i < captions.length; i += WORDS_PER_CHUNK) {
+    const chunk = captions.slice(i, i + WORDS_PER_CHUNK);
+    const first = chunk[0];
+    const last = chunk[chunk.length - 1];
+    if (first && last) {
+      groups.push({ words: chunk, startMs: first.startMs, endMs: last.endMs });
+    }
+  }
+  return groups;
+};
+
+// TikTok-style captions component with word highlighting
+const Captions: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const currentTimeMs = (frame / fps) * 1000;
+
+  const currentGroup = CAPTION_GROUPS.find(
+    (group) => currentTimeMs >= group.startMs && currentTimeMs <= group.endMs
+  );
+
+  if (!currentGroup) return null;
+
+  return (
+    <div style={{ position: "absolute", bottom: "15%", left: "50%", transform: "translateX(-50%)", width: "90%", textAlign: "center" }}>
+      <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "center", gap: "24px" }}>
+        {currentGroup.words.map((word) => {
+          const isActive = currentTimeMs >= word.startMs && currentTimeMs <= word.endMs;
+          const isPast = currentTimeMs > word.endMs;
+          return (
+            <span key={word.id} style={{
+              fontFamily: "Arial Black, sans-serif",
+              fontSize: "64px",
+              fontWeight: 900,
+              letterSpacing: "0.05em",
+              color: isActive ? "#FFD700" : isPast ? "#FFFFFF" : "#AAAAAA",
+              textShadow: isActive ? "0 0 20px #FFD700, 0 4px 8px rgba(0,0,0,0.8)" : "0 4px 8px rgba(0,0,0,0.8)",
+              transform: isActive ? "scale(1.1)" : "scale(1)",
+              textTransform: "uppercase",
+            }}>
+              {word.text}
+            </span>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
 ```
 
 ### sequential video concatenation
@@ -618,6 +744,72 @@ return (
 );
 ```
 
+### scene-based timeline with named sequences
+```typescript
+// define scenes with timing (separate id from video file for reuse)
+const SCENES = [
+  // Scene 1: Title/Hook - protagonist sitting alone on bench at night
+  { id: 1, video: 1, name: "1. Title/Hook", start: 0, duration: 3.5 },
+  
+  // Scene 2: Young Love - protagonist and first girl walking in park
+  { id: 2, video: 2, name: "2. Young Love", start: 3.5, duration: 6.5 },
+  
+  // Scene 3: Flashback - reuse scene 5 video with B&W effect
+  { id: 3, video: 5, name: "3. Flashback", start: 54.5, duration: 6.5, flashback: true },
+  
+  // Scene 4: Same video used again (video 13 appears twice)
+  { id: 4, video: 13, name: "4. Years Pass", start: 120, duration: 15 },
+];
+
+// render with names visible in Remotion Studio
+{SCENES.map((scene) => {
+  const startFrame = Math.round(scene.start * fps);
+  const durationFrames = Math.round(scene.duration * fps);
+
+  return (
+    <Sequence
+      key={scene.id}
+      name={scene.name}  // <-- shows in Studio timeline!
+      from={startFrame}
+      durationInFrames={durationFrames}
+    >
+      <LoopingVideo
+        src={staticFile(`scene${scene.video}_video.mp4`)}
+        flashback={scene.flashback}
+      />
+    </Sequence>
+  );
+})}
+```
+
+### flashback effect (B&W jittery style)
+```typescript
+// video component with optional flashback effect
+const LoopingVideo: React.FC<{ src: string; flashback?: boolean }> = ({ src, flashback }) => {
+  const frame = useCurrentFrame();
+  
+  // Flashback effect: B&W with jittery/glitchy feel
+  const flashbackStyle = flashback ? {
+    filter: "grayscale(100%) contrast(1.2) brightness(0.9)",
+    // Subtle jitter using frame-based transform
+    transform: `translate(${Math.sin(frame * 0.5) * 2}px, ${Math.cos(frame * 0.7) * 1.5}px)`,
+  } : {};
+
+  return (
+    <OffthreadVideo
+      src={src}
+      style={{
+        width: "100%",
+        height: "100%",
+        objectFit: "cover",
+        ...flashbackStyle,
+      }}
+      muted
+    />
+  );
+};
+```
+
 ### crossfade transition between videos
 ```typescript
 const transitionStart = 140;
@@ -719,16 +911,38 @@ const captionOpacity = interpolate(
 
 ### deprecated components warnings
 - **warning**: `Video` and `Audio` are deprecated
-- **fix**: use `OffthreadVideo` instead of `Video`, `Audio` is still usable but may change
+- **fix**: use `OffthreadVideo` instead of `Video`, use `Html5Audio` instead of `Audio`
 - **example**:
   ```tsx
   // ❌ deprecated
-  import { Video } from "remotion";
+  import { Video, Audio } from "remotion";
   <Video src={staticFile("video.mp4")} />
+  <Audio src={staticFile("audio.mp3")} />
   
   // ✅ recommended
-  import { OffthreadVideo } from "remotion";
+  import { OffthreadVideo, Html5Audio } from "remotion";
   <OffthreadVideo src={staticFile("video.mp4")} />
+  <Html5Audio src={staticFile("audio.mp3")} />
+  ```
+
+### video freezes on last frame
+- **error**: when scene duration > video file duration, video freezes on last frame
+- **cause**: `OffthreadVideo` naturally stops at end of video
+- **fix**: wrap in `<Loop>` with the VIDEO's duration (not scene duration)
+- **example**:
+  ```tsx
+  import { Loop, OffthreadVideo } from "remotion";
+  
+  // ❌ wrong - scene duration
+  <Loop durationInFrames={sceneDurationFrames}>
+    <OffthreadVideo src={video} />
+  </Loop>
+  
+  // ✅ correct - video file's actual duration
+  const videoDurationFrames = Math.round(5.04 * fps); // from ffprobe
+  <Loop durationInFrames={videoDurationFrames}>
+    <OffthreadVideo src={video} />
+  </Loop>
   ```
 
 ### type errors with array indexing
@@ -821,3 +1035,8 @@ const captionOpacity = interpolate(
 11. **handle fps differences** - adjust startFrom when concatenating videos with different fps
 12. **use descriptive ids** - make composition names clear and unique
 13. **batch render with props** - for multiple variations, register multiple compositions with unique defaultProps instead of file overwriting
+14. **name your sequences** - add `name` prop to `<Sequence>` components for visibility in Studio timeline
+15. **separate video id from scene id** - allows reusing same video in multiple scenes (e.g., flashbacks)
+16. **use studio for debugging** - `bun remotion studio` lets you scrub through timeline and see named sequences
+17. **add scene comments** - document what each scene contains in code for easy reference
+18. **embed SRT content directly** - avoids file loading issues in compositions (parse once, use everywhere)

package/lib/remotion/cli.ts

@@ -1,3 +1,4 @@
+import { join } from "node:path";
 import {
   createComposition,
   getCompositionsList,
@@ -17,6 +18,7 @@ usage:
 
 commands:
   create <name>                                        setup composition directory
+  studio <root-file.tsx>                               open remotion studio
   compositions <root-file.tsx>                         list all compositions
   render <root-file.tsx> <comp-id> <output.mp4>       render video
   still <root-file.tsx> <comp-id> <frame> <out.png>   render still frame
@@ -24,6 +26,7 @@ commands:
 
 examples:
   bun run lib/remotion/index.ts create MyVideo
+  bun run lib/remotion/index.ts studio lib/remotion/compositions/MyVideo.root.tsx
   bun run lib/remotion/index.ts compositions lib/remotion/compositions/MyVideo.root.tsx
   bun run lib/remotion/index.ts render lib/remotion/compositions/MyVideo.root.tsx Demo output.mp4
   bun run lib/remotion/index.ts still lib/remotion/compositions/MyVideo.root.tsx Demo 30 frame.png
@@ -49,6 +52,37 @@ requirements:
         break;
       }
 
+      case "studio": {
+        const entryPoint = args[1];
+
+        if (!entryPoint) {
+          throw new Error("entry point is required");
+        }
+
+        const publicDir = join(process.cwd(), "lib/remotion/public");
+        const { spawn } = await import("node:child_process");
+
+        console.log(`[remotion] starting studio with public dir: ${publicDir}`);
+
+        const studio = spawn(
+          "bun",
+          ["remotion", "studio", entryPoint, "--public-dir", publicDir],
+          {
+            stdio: "inherit",
+            cwd: process.cwd(),
+          },
+        );
+
+        studio.on("error", (err) => {
+          console.error("[remotion] studio error:", err);
+          process.exit(1);
+        });
+
+        // keep process alive
+        await new Promise(() => {});
+        break;
+      }
+
       case "compositions": {
         const entryPoint = args[1];
 

package/package.json

@@ -7,11 +7,27 @@
   },
   "scripts": {
     "lint": "biome check .",
-    "format": "biome format --write ."
+    "format": "biome format --write .",
+    "type-check": "tsc --noEmit",
+    "prepare": "husky install",
+    "size": "size-limit"
+  },
+  "lint-staged": {
+    "*.{js,ts,tsx}": [
+      "biome check --write --no-errors-on-unmatched"
+    ],
+    "*.{json,md}": [
+      "biome format --write"
+    ]
   },
   "devDependencies": {
     "@biomejs/biome": "^2.3.7",
-    "@types/bun": "latest"
+    "@commitlint/cli": "^20.1.0",
+    "@commitlint/config-conventional": "^20.0.0",
+    "@size-limit/preset-small-lib": "^11.2.0",
+    "@types/bun": "latest",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.2.7"
   },
   "peerDependencies": {
     "typescript": "^5"
@@ -26,6 +42,7 @@
     "@higgsfield/client": "^0.1.2",
     "@remotion/cli": "^4.0.377",
     "@types/fluent-ffmpeg": "^2.1.28",
+    "@vargai/sdk": "^0.1.2",
     "ai": "^5.0.98",
     "citty": "^0.1.6",
     "fluent-ffmpeg": "^2.1.3",
@@ -35,7 +52,7 @@
     "remotion": "^4.0.377",
     "replicate": "^1.4.0"
   },
-  "version": "0.1.1",
+  "version": "0.2.0",
   "exports": {
     ".": "./index.ts"
   }

package/pipeline/cookbooks/scripts/animate-frames-parallel.ts

@@ -0,0 +1,83 @@
+/**
+ * Animate multiple frames in parallel using kling
+ * Usage: bun run pipeline/cookbooks/scripts/animate-frames-parallel.ts
+ */
+
+import { fal } from "@fal-ai/client";
+
+interface VideoConfig {
+  name: string;
+  framePath: string;
+  prompt: string;
+  duration?: "5" | "10";
+}
+
+async function animateFrames(configs: VideoConfig[], outputDir: string) {
+  console.log(`Animating ${configs.length} frames in parallel...\n`);
+
+  // Upload all frames first
+  const frameUrls: string[] = [];
+  for (const config of configs) {
+    const url = await fal.storage.upload(Bun.file(config.framePath));
+    frameUrls.push(url);
+  }
+
+  const promises = configs.map((config, i) => {
+    return fal.subscribe("fal-ai/kling-video/v2.5-turbo/pro/image-to-video", {
+      input: {
+        prompt: config.prompt + ", NO talking NO lip movement",
+        image_url: frameUrls[i]!,
+        duration: config.duration || "5",
+        // note: aspect_ratio is determined by input image dimensions
+      },
+    });
+  });
+
+  const results = await Promise.all(promises);
+
+  for (let i = 0; i < results.length; i++) {
+    const result = results[i] as { data?: { video?: { url?: string } } };
+    const url = result.data?.video?.url;
+    if (url) {
+      const response = await fetch(url);
+      const buffer = await response.arrayBuffer();
+      await Bun.write(`${outputDir}/${configs[i]!.name}_video.mp4`, buffer);
+      console.log(`${configs[i]!.name}_video.mp4 saved`);
+    } else {
+      console.error(`No URL for ${configs[i]!.name}`);
+    }
+  }
+
+  console.log("\nAll videos saved!");
+}
+
+// Example usage:
+async function main() {
+  const outputDir = "media/girl-ruined-you";
+
+  const configs: VideoConfig[] = [
+    {
+      name: "scene6",
+      framePath: `${outputDir}/scene6_frame.jpg`,
+      prompt:
+        "3D pixar animation, two cats meet eyes in coffee shop, warm romantic moment",
+      duration: "5",
+    },
+    {
+      name: "scene7",
+      framePath: `${outputDir}/scene7_frame.jpg`,
+      prompt: "3D pixar animation, two cats walking together, sunset, romantic",
+      duration: "5",
+    },
+    {
+      name: "scene14",
+      framePath: `${outputDir}/scene14_frame.jpg`,
+      prompt: "3D pixar animation, cat looks at sunrise, hopeful realization",
+      duration: "5",
+    },
+  ];
+
+  await animateFrames(configs, outputDir);
+}
+
+main().catch(console.error);

package/pipeline/cookbooks/scripts/combine-scenes.sh

@@ -0,0 +1,53 @@
+#!/bin/bash
+# Combine multiple scene videos with audio clips
+# Usage: ./combine-scenes.sh <project_dir>
+
+PROJECT_DIR=${1:-"media/girl-ruined-you"}
+
+# Scene timing configuration (adjust as needed)
+# Format: scene_num:start_time:duration
+SCENES=(
+  "1:0:3.5"
+  "2:3.5:6.5"
+  "3:10:10"
+  "4:20:15"
+  "5:35:7"
+)
+
+echo "Extracting audio clips..."
+for scene_config in "${SCENES[@]}"; do
+  IFS=':' read -r num start dur <<< "$scene_config"
+  ffmpeg -y -i "$PROJECT_DIR/voiceover.mp3" -ss "$start" -t "$dur" "$PROJECT_DIR/audio_scene${num}.mp3" 2>/dev/null
+  echo "  audio_scene${num}.mp3 ($dur sec)"
+done
+
+echo ""
+echo "Combining videos with audio..."
+for scene_config in "${SCENES[@]}"; do
+  IFS=':' read -r num start dur <<< "$scene_config"
+  
+  # Calculate loop count needed (5s videos)
+  loops=$(echo "($dur / 5) - 1" | bc)
+  if [ "$loops" -lt 0 ]; then loops=0; fi
+  
+  ffmpeg -y -stream_loop "$loops" -i "$PROJECT_DIR/scene${num}_video.mp4" \
+    -i "$PROJECT_DIR/audio_scene${num}.mp3" \
+    -t "$dur" -c:v libx264 -preset fast -crf 20 -c:a aac -b:a 128k -shortest \
+    "$PROJECT_DIR/scene${num}_final.mp4" 2>/dev/null
+  echo "  scene${num}_final.mp4"
+done
+
+echo ""
+echo "Creating concat file..."
+rm -f "$PROJECT_DIR/scenes.txt"
+for scene_config in "${SCENES[@]}"; do
+  IFS=':' read -r num start dur <<< "$scene_config"
+  echo "file 'scene${num}_final.mp4'" >> "$PROJECT_DIR/scenes.txt"
+done
+
+echo "Concatenating all scenes..."
+cd "$PROJECT_DIR" && ffmpeg -y -f concat -safe 0 -i scenes.txt -c copy combined_scenes.mp4 2>/dev/null
+
+duration=$(ffprobe -v error -show_entries format=duration -of default=noprint_wrappers=1:nokey=1 combined_scenes.mp4)
+echo ""
+echo "Done! combined_scenes.mp4 ($duration sec)"

package/pipeline/cookbooks/scripts/generate-frames-parallel.ts

@@ -0,0 +1,98 @@
+/**
+ * Generate multiple scene frames in parallel using flux kontext
+ * Usage: bun run pipeline/cookbooks/scripts/generate-frames-parallel.ts
+ */
+
+import { fal } from "@fal-ai/client";
+
+interface FrameConfig {
+  name: string;
+  prompt: string;
+  imageUrls: string[]; // character reference URLs
+  multi?: boolean; // use kontext/multi for multiple characters
+}
+
+async function generateFrames(configs: FrameConfig[], outputDir: string) {
+  console.log(`Generating ${configs.length} frames in parallel...\n`);
+
+  const promises = configs.map((config) => {
+    if (config.multi) {
+      return fal.subscribe("fal-ai/flux-pro/kontext/multi", {
+        input: {
+          prompt: config.prompt,
+          image_urls: config.imageUrls,
+          aspect_ratio: "9:16" as const,
+        },
+      });
+    } else {
+      return fal.subscribe("fal-ai/flux-pro/kontext", {
+        input: {
+          prompt: config.prompt,
+          image_url: config.imageUrls[0]!,
+          aspect_ratio: "9:16" as const,
+        },
+      });
+    }
+  });
+
+  const results = await Promise.all(promises);
+
+  for (let i = 0; i < results.length; i++) {
+    const result = results[i] as {
+      data?: { images?: Array<{ url?: string }> };
+    };
+    const url = result.data?.images?.[0]?.url;
+    if (url) {
+      const response = await fetch(url);
+      const buffer = await response.arrayBuffer();
+      await Bun.write(`${outputDir}/${configs[i]!.name}_frame.jpg`, buffer);
+      console.log(`${configs[i]!.name}_frame.jpg saved`);
+    } else {
+      console.error(`No URL for ${configs[i]!.name}`);
+    }
+  }
+
+  console.log("\nAll frames saved!");
+}
+
+// Example usage:
+async function main() {
+  const outputDir = "media/girl-ruined-you";
+
+  // Upload character references first
+  const protagonist = await fal.storage.upload(
+    Bun.file(`${outputDir}/cat_protagonist.png`),
+  );
+  const secondGirl = await fal.storage.upload(
+    Bun.file(`${outputDir}/cat_second_girl.png`),
+  );
+
+  const configs: FrameConfig[] = [
+    {
+      name: "scene6",
+      prompt:
+        "3D pixar style: male cat in hoodie (first) and elegant female cat (second) meeting eyes in coffee shop, warm golden lighting, vertical portrait 9:16",
+      imageUrls: [protagonist, secondGirl],
+      multi: true,
+    },
+    {
+      name: "scene7",
+      prompt:
+        "3D pixar style: male cat and female cat walking together, sunset, romantic, vertical portrait 9:16",
+      imageUrls: [protagonist, secondGirl],
+      multi: true,
+    },
+    // Single character scene
+    {
+      name: "scene14",
+      prompt:
+        "Place this cat looking at sunrise through window, hopeful, vertical portrait 9:16",
+      imageUrls: [protagonist],
+      multi: false,
+    },
+  ];
+
+  await generateFrames(configs, outputDir);
+}
+
+main().catch(console.error);

package/pipeline/cookbooks/scripts/still-to-video.sh

@@ -0,0 +1,37 @@
+#!/bin/bash
+# Convert still frame to video with ken burns effect (slow zoom)
+# Usage: ./still-to-video.sh <input.jpg> <output.mp4> <duration> [zoom_direction]
+# zoom_direction: in (default), out
+
+INPUT=$1
+OUTPUT=$2
+DURATION=$3
+ZOOM=${4:-"in"}
+
+if [ -z "$INPUT" ] || [ -z "$OUTPUT" ] || [ -z "$DURATION" ]; then
+  echo "Usage: ./still-to-video.sh <input.jpg> <output.mp4> <duration> [in|out]"
+  exit 1
+fi
+
+# Get input dimensions
+WIDTH=$(ffprobe -v error -select_streams v:0 -show_entries stream=width -of csv=p=0 "$INPUT")
+HEIGHT=$(ffprobe -v error -select_streams v:0 -show_entries stream=height -of csv=p=0 "$INPUT")
+
+echo "Creating $DURATION sec video from $INPUT ($WIDTH x $HEIGHT)..."
+
+if [ "$ZOOM" = "out" ]; then
+  # Zoom out: start zoomed in, end at normal
+  FILTER="zoompan=z='1.2-0.2*on/(${DURATION}*25)':x='iw/2-(iw/zoom/2)':y='ih/2-(ih/zoom/2)':d=${DURATION}*25:s=${WIDTH}x${HEIGHT}:fps=25"
+else
+  # Zoom in: start normal, end zoomed
+  FILTER="zoompan=z='1+0.2*on/(${DURATION}*25)':x='iw/2-(iw/zoom/2)':y='ih/2-(ih/zoom/2)':d=${DURATION}*25:s=${WIDTH}x${HEIGHT}:fps=25"
+fi
+
+ffmpeg -y -loop 1 -i "$INPUT" \
+  -vf "$FILTER" \
+  -t "$DURATION" \
+  -c:v libx264 -preset fast -crf 20 \
+  -pix_fmt yuv420p \
+  "$OUTPUT"
+
+echo "Done: $OUTPUT"