ToRun MCP और Remotion के साथ नैरेशन वाले मोशन एक्सप्लेनर

आप क्या बना सकते हैं

आपके कंप्यूटर पर कमांड चलाने वाला कोडिंग एजेंट, जैसे Claude Code, opencode या Cursor, ToRun के साथ नैरेशन वाला एक छोटा एक्सप्लेनर वीडियो बना सकता है। एजेंट स्क्रिप्ट लिखता है, ToRun से सीन की इमेज, नैरेशन और बैकग्राउंड संगीत माँगता है, और Remotion के साथ आपके कंप्यूटर पर वीडियो रेंडर करता है, जो React कंपोनेंट को वीडियो में बदलने वाली एक लाइब्रेरी है।

आपको क्या चाहिए

• ToRun MCP सर्वर से जुड़ा एक कोडिंग टूल जो कमांड चला सके और किसी फ़ोल्डर में फ़ाइलें लिख सके: opencode, Claude Code या Cursor।
• Node.js 18 या उसके बाद का संस्करण। पहला रेंडर वह ब्राउज़र डाउनलोड करता है जिससे Remotion रेंडर करता है।
• किसी सशुल्क प्लान का अलाउंस या वॉलेट बैलेंस: API कॉल कभी भी मुफ़्त अलाउंस इस्तेमाल नहीं करतीं। देखें कॉल का भुगतान कैसे होता है।

Remotion का अपना लाइसेंस है: यह व्यक्तियों और बहुत छोटी कंपनियों के लिए मुफ़्त है, और बड़ी कंपनियों को कंपनी लाइसेंस चाहिए। काम के लिए इस्तेमाल करने से पहले remotion.dev/license देखें।

स्टार्टर प्रोजेक्ट

चार फ़ाइलें। अपने एजेंट से इन्हें किसी खाली फ़ोल्डर में बनाने को कहें, या इन्हें खुद कॉपी करें, फिर वहाँ npm install चलाएँ। बनाई गई फ़ाइलें package.json के बगल में एक public फ़ोल्डर में जाती हैं।

package.json:

{
  "name": "motion-explainer",
  "private": true,
  "scripts": {
    "studio": "remotion studio src/index.ts",
    "render": "remotion render src/index.ts Explainer out/explainer.mp4"
  },
  "dependencies": {
    "@remotion/cli": "4.0.539",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "remotion": "4.0.539"
  }
}

video.json में पूरा वीडियो होता है। हर सीन में स्क्रीन पर दिखने वाला caption, नैरेशन का टेक्स्ट say, इमेज का prompt, उसकी इमेज और नैरेशन की फ़ाइलों के नाम, और seconds में उसकी लंबाई होती है:

{
  "width": 1920,
  "height": 1080,
  "fps": 30,
  "music": { "file": "music.mp3", "volume": 0.12 },
  "scenes": [
    {
      "caption": "Every team has a backlog.",
      "say": "Every team has a backlog, and it only grows.",
      "prompt": "flat illustration of a wall covered in sticky notes, soft morning light, no text",
      "image": "scene-1.png",
      "narration": "scene-1.mp3",
      "seconds": 5.5
    },
    {
      "caption": "Sort it by what users feel.",
      "say": "Sort it by what your users feel, not by what is loudest.",
      "prompt": "flat illustration of hands arranging cards into three columns on a desk, no text",
      "image": "scene-2.png",
      "narration": "scene-2.mp3",
      "seconds": 6
    },
    {
      "caption": "Ship the top one this week.",
      "say": "Then ship the top one this week.",
      "prompt": "flat illustration of a small paper boat leaving a harbour at sunrise, no text",
      "image": "scene-3.png",
      "narration": "scene-3.mp3",
      "seconds": 5
    }
  ]
}

src/index.ts:

import {registerRoot} from 'remotion';
import {Root} from './Root';

registerRoot(Root);

src/Root.tsx सीन को एक के बाद एक चलाता है। हर इमेज धीरे-धीरे ज़ूम होती है, कैप्शन नीचे से ऊपर आता है, सीन का नैरेशन उसके साथ शुरू होता है, और पूरे वीडियो में संगीत धीमी आवाज़ में बजता है:

import React from 'react';
import {AbsoluteFill, Composition, Html5Audio, Img, interpolate, Series, staticFile, useCurrentFrame} from 'remotion';
import data from '../video.json';

// "say" and "prompt" are the script: the narration text and the image prompt. Rendering reads the rest.
type Scene = {image: string; narration?: string; seconds: number; caption?: string; say?: string; prompt?: string};
type Video = {width: number; height: number; fps: number; music?: {file: string; volume: number}; scenes: Scene[]};

const video = data as Video;
const clamp = {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'} as const;
const framesOf = (scene: Scene) => Math.round(scene.seconds * video.fps);

// One scene: the image slowly zooms in, the caption rises in, the narration plays from the scene's start.
const SceneView: React.FC<{scene: Scene; frames: number}> = ({scene, frames}) => {
  const frame = useCurrentFrame();
  const fade = interpolate(frame, [0, 10, frames - 10, frames], [0, 1, 1, 0], clamp);
  const zoom = interpolate(frame, [0, frames], [1, 1.08]);
  const rise = interpolate(frame, [8, 26], [40, 0], clamp);
  return (
    <AbsoluteFill style={{backgroundColor: 'black', opacity: fade}}>
      <Img src={staticFile(scene.image)} style={{width: '100%', height: '100%', objectFit: 'cover', transform: `scale(${zoom})`}} />
      {scene.caption ? (
        <div
          style={{
            position: 'absolute', left: '6%', right: '6%', bottom: '8%', transform: `translateY(${rise}px)`,
            color: 'white', fontFamily: 'Arial, sans-serif', fontSize: video.height / 18, fontWeight: 700,
            textShadow: '0 2px 16px rgba(0,0,0,0.7)',
          }}
        >
          {scene.caption}
        </div>
      ) : null}
      {scene.narration ? <Html5Audio src={staticFile(scene.narration)} /> : null}
    </AbsoluteFill>
  );
};

const Explainer: React.FC = () => (
  <AbsoluteFill style={{backgroundColor: 'black'}}>
    <Series>
      {video.scenes.map((scene, i) => (
        <Series.Sequence key={i} durationInFrames={framesOf(scene)}>
          <SceneView scene={scene} frames={framesOf(scene)} />
        </Series.Sequence>
      ))}
    </Series>
    {video.music ? <Html5Audio src={staticFile(video.music.file)} volume={video.music.volume} loop /> : null}
  </AbsoluteFill>
);

export const Root: React.FC = () => (
  <Composition
    id="Explainer"
    component={Explainer}
    width={video.width}
    height={video.height}
    fps={video.fps}
    durationInFrames={video.scenes.reduce((sum, scene) => sum + framesOf(scene), 0)}
  />
);

एजेंट वीडियो कैसे बनाता है

1. स्क्रिप्ट। एजेंट सीन को video.json में लिखता है: हर सीन में एक विचार, कुछ शब्दों का कैप्शन, और बोलने के लिए एक या दो वाक्य। उससे कहें कि कुछ भी बनाने से पहले आपको स्क्रिप्ट दिखाए।

2. बैलेंस। वह account_balance को कॉल करके देखता है कि खाता कितना खर्च कर सकता है। यह कॉल मुफ़्त है।

3. इमेज। हर सीन के लिए वह सीन के prompt और size 1792x1024 के साथ image_generate को कॉल करता है, और इमेज को public/scene-1.png, public/scene-2.png आदि के रूप में सहेजता है। अगर इमेज इंतज़ार के समय में तैयार नहीं होती, तो टूल एक जॉब आईडी लौटाता है, और एजेंट इमेज तैयार होने तक job_status से पूछता रहता है।

4. नैरेशन। हर सीन के लिए वह सीन के say टेक्स्ट और किसी आवाज़, जैसे nova, के साथ tts_generate को कॉल करता है, और ऑडियो को public/scene-1.mp3 आदि के रूप में सहेजता है।

5. टाइमिंग। वह हर सीन के seconds को उसके नैरेशन की लंबाई और लगभग आधे सेकंड के बराबर रखता है। tts_generate यह लंबाई duration_seconds के रूप में लौटाता है, जिसे ऑडियो फ़ाइल से मापा जाता है। अगर जवाब में duration_estimated: true भी लिखा हो, तो लंबाई का अनुमान केवल टेक्स्ट से लगाया जा सका, इसलिए एजेंट फ़ाइल को मापता है। किसी फ़ाइल को खुद जाँचने के लिए:

   npx remotion ffprobe -v error -show_entries format=duration -of csv=p=0 public/scene-1.mp3
   

6. संगीत (वैकल्पिक)। वह "calm instrumental background, soft piano" जैसे प्रॉम्प्ट, false पर सेट with_vocals और वीडियो की लंबाई के करीब duration_seconds के साथ music_generate को कॉल करता है। टूल एक जॉब आईडी लौटाता है; एजेंट ट्रैक तैयार होने तक job_status से पूछता है और उसे public/music.mp3 के रूप में सहेजता है। संगीत नहीं चाहिए तो video.json से music वाली लाइन हटा दें।

7. प्रीव्यू और रेंडर। npm run studio आपके ब्राउज़र में प्रीव्यू खोलता है। npm run render out/explainer.mp4 लिखता है।

टूल जो भी फ़ाइल लिंक लौटाता है, वह साइन इन किए बिना डाउनलोड हो जाता है। पूरा लिंक रखें, प्रश्नचिह्न के बाद वाले हिस्से समेत:

curl -L -o public/scene-1.png "<the image link>"

अपने एजेंट से कहें

torun.ai/docs/mcp-motion-explainers के Remotion स्टार्टर प्रोजेक्ट से, हमारे ऐप का सिंक कैसे काम करता है, इस पर 30 सेकंड का एक्सप्लेनर बनाओ। चार सीन। पहले मुझे video.json में स्क्रिप्ट दिखाओ। फिर हर सीन के लिए बिना टेक्स्ट वाली एक इमेज बनाओ, हर सीन का नैरेशन nova आवाज़ में करो, धीमा इंस्ट्रुमेंटल संगीत जोड़ो, हर सीन की लंबाई उसके नैरेशन के अनुसार रखो, और रेंडर करो।

वर्टिकल वीडियो के लिए, video.json में width 1080 और height 1920 माँगें, और size 1024x1792 वाली इमेज माँगें।

इसकी लागत क्या है

• image_generate, tts_generate और music_generate सशुल्क कॉल हैं, जिनका शुल्क Runs में ऐप जैसी ही कीमतों पर लिया जाता है। चार सीन और संगीत वाले वीडियो में चार इमेज, चार नैरेशन और एक ट्रैक होता है।
• account_balance और job_status मुफ़्त हैं।
• रेंडरिंग आपके कंप्यूटर पर होती है। कैप्शन, टाइमिंग या मोशन बदलकर फिर से रेंडर करने पर ToRun पर कुछ खर्च नहीं होता; किसी इमेज या नैरेशन को फिर से बनाना एक नई सशुल्क कॉल है।
• जब कोई एक जनरेशन कुंजी की सीमा से महँगी हो, तो टूल पहले कीमत बताता है, और आपका एजेंट कॉल चलाने से पहले आपसे पूछता है।
• एजेंट जो भी बनाता है, वह आपकी ToRun लाइब्रेरी में भी सहेजा जाता है।

सुझाव

• बिना टेक्स्ट वाली इमेज माँगें। शब्द कैप्शन में होते हैं, और इमेज मॉडल अक्सर टेक्स्ट की वर्तनी गलत लिखते हैं।
• हर सीन में एक विचार और नैरेशन के एक या दो वाक्य रखें।
• एक आवाज़ चुनें और पूरे वीडियो में वही रखें।
• संगीत की आवाज़ 0.1 और 0.15 के बीच रखें, ताकि नैरेशन साफ़ सुनाई दे।