Narrált animált magyarázó videók a ToRun MCP-vel és a Remotionnel

Mit készíthet

Egy kódoló ügynök, amely parancsokat futtat a számítógépén, például a Claude Code, az opencode vagy a Cursor, a ToRun segítségével rövid, narrált magyarázó videót készíthet. Az ügynök megírja a forgatókönyvet, a jelenetek képeit, a narrációt és a háttérzenét a ToRun-tól kéri, majd a számítógépén rendereli a videót a Remotion segítségével, amely egy React-komponenseket videóvá alakító könyvtár.

Mire van szüksége

• Egy, a ToRun MCP-szerverhez csatlakoztatott kódolóeszközre, amely parancsokat futtat és fájlokat ír egy mappába: opencode, Claude Code vagy Cursor.
• Node.js 18-as vagy újabb verziójára. Az első renderelés letölti azt a böngészőt, amellyel a Remotion renderel.
• Fizetős csomag keretére vagy tárcaegyenlegre: az API-hívások soha nem használják az ingyenes keretet. Lásd hogyan fizetik a hívásokat.

A Remotionnak saját licence van: magánszemélyeknek és nagyon kis cégeknek ingyenes, a nagyobb cégeknek céges licenc kell. Mielőtt munkához használná, nézze meg a remotion.dev/license oldalt.

A kezdő projekt

Négy fájl. Kérje meg az ügynököt, hogy hozza létre őket egy üres mappában, vagy másolja be őket saját maga, majd futtassa ott az npm install parancsot. A generált fájlok a package.json melletti public mappába kerülnek.

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"
  }
}

A video.json tartalmazza az egész videót. Minden jelenetnek van egy képernyőn megjelenő caption mezője, egy say narrációs szövege, egy kép-prompt mezője, a képe és a narrációja fájlneve, valamint seconds egységben megadott hossza:

{
  "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);

A src/Root.tsx egymás után játssza le a jeleneteket. Minden kép lassan ráközelít, a felirat alulról beúszik, a jelenet narrációja vele együtt indul, a zene pedig halkan szól az egész videó alatt:

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)}
  />
);

Hogyan készíti el az ügynök a videót

1. Forgatókönyv. Az ügynök a video.json fájlba írja a jeleneteket: jelenetenként egy gondolat, néhány szavas felirat, egy-két elmondandó mondat. Kérje meg, hogy mutassa meg a forgatókönyvet, mielőtt bármit generálna.

2. Egyenleg. Meghívja az account_balance eszközt, hogy lássa, mennyit költhet a fiók. Ez a hívás ingyenes.

3. Képek. Minden jelenethez meghívja az image_generate eszközt a jelenet prompt értékével és 1792x1024 size értékkel, majd a képet public/scene-1.png, public/scene-2.png és így tovább néven menti. Ha egy kép nem készül el a várakozási időn belül, az eszköz feladatazonosítót ad vissza, az ügynök pedig a job_status eszközt kérdezi, amíg a kép el nem készül.

4. Narráció. Minden jelenethez meghívja a tts_generate eszközt a jelenet say szövegével és egy hanggal, például nova, majd a hangot public/scene-1.mp3 és így tovább néven menti.

5. Időzítés. Minden jelenet seconds értékét a narrációja hosszára állítja, plusz körülbelül fél másodpercre. A tts_generate ezt a hosszt duration_seconds értékként adja vissza, a hangfájlból mérve. Ha a válaszban duration_estimated: true is szerepel, a hosszt csak a szövegből lehetett megbecsülni, ezért az ügynök megméri a fájlt. Ha saját maga szeretne ellenőrizni egy fájlt:

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

6. Zene (nem kötelező). Meghívja a music_generate eszközt egy olyan prompttal, mint a „calm instrumental background, soft piano”, false értékre állított with_vocals és a videó hosszához közeli duration_seconds értékkel. Az eszköz feladatazonosítót ad vissza; az ügynök a job_status eszközt kérdezi, amíg a zeneszám el nem készül, és public/music.mp3 néven menti. Ha nem kér zenét, törölje a music sort a video.json fájlból.

7. Előnézet és renderelés. Az npm run studio előnézetet nyit a böngészőjében. Az npm run render kiírja az out/explainer.mp4 fájlt.

Minden fájllink, amelyet egy eszköz visszaad, bejelentkezés nélkül letölthető. Őrizze meg a teljes linket, a kérdőjel utáni részt is:

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

Kérje meg az ügynökét

Készíts egy 30 másodperces magyarázó videót arról, hogyan működik az alkalmazásunk szinkronizálása, a torun.ai/docs/mcp-motion-explainers oldalon található Remotion kezdő projekttel. Négy jelenet. Először mutasd meg a forgatókönyvet a video.json fájlban. Utána generálj jelenetenként egy szöveg nélküli képet, narráld minden jelenetet a nova hanggal, adj hozzá halk instrumentális zenét, igazítsd minden jelenet hosszát a narrációjához, és renderelj.

Álló videóhoz kérjen 1080-as width és 1920-as height értéket a video.json fájlban, és 1024x1792 size értékű képeket.

Mennyibe kerül

• Az image_generate, a tts_generate és a music_generate fizetős hívások, amelyeket Runs egységben számlázunk, ugyanazon az áron, mint az alkalmazásban. Egy négy jelenetből álló, zenés videó négy képet, négy narrációt és egy zeneszámot jelent.
• Az account_balance és a job_status ingyenes.
• A renderelés a számítógépén fut. A feliratok, az időzítés vagy a mozgás módosítása és az újbóli renderelés semmibe sem kerül a ToRun-on; egy kép vagy narráció újragenerálása viszont új fizetős hívás.
• Ha egyetlen generálás többe kerülne a kulcs küszöbértékénél, az eszköz előbb az árral válaszol, és az ügynök megkérdezi Önt, mielőtt lefuttatná a hívást.
• Minden, amit az ügynök generál, a ToRun-könyvtárába is mentésre kerül.

Tippek

• Kérjen szöveg nélküli képeket. A szavakat a felirat hordozza, a képmodellek pedig gyakran elírják a szöveget.
• Jelenetenként egy gondolat és egy-két mondatnyi narráció legyen.
• Válasszon egy hangot, és azt használja az egész videóban.
• A zene hangerejét tartsa 0.1 és 0.15 között, hogy a narráció érthető maradjon.