Animované vysvetľujúce videá s komentárom pomocou ToRun MCP a Remotion

Čo môžete vytvoriť

Programovací agent, ktorý spúšťa príkazy vo vašom počítači, napríklad Claude Code, opencode alebo Cursor, môže s ToRun vytvoriť krátke vysvetľujúce video s komentárom. Agent napíše scenár, požiada ToRun o obrázky scén, komentár a podkladovú hudbu a vyrenderuje video vo vašom počítači pomocou Remotion, knižnice, ktorá z komponentov React robí video.

Čo potrebujete

• Programovací nástroj pripojený k MCP serveru ToRun, ktorý vie spúšťať príkazy a zapisovať súbory do priečinka: opencode, Claude Code alebo Cursor.
• Node.js 18 alebo novší. Prvé renderovanie stiahne prehliadač, pomocou ktorého Remotion renderuje.
• Limit plateného plánu alebo zostatok v peňaženke: volania API nikdy nepoužívajú bezplatný limit. Pozrite ako sa volania platia.

Remotion má vlastnú licenciu: pre jednotlivcov a veľmi malé firmy je zadarmo, väčšie firmy potrebujú firemnú licenciu. Skôr než ho použijete na prácu, pozrite si remotion.dev/license.

Úvodný projekt

Štyri súbory. Požiadajte agenta, aby ich vytvoril v prázdnom priečinku, alebo ich skopírujte sami, a potom v ňom spustite npm install. Vygenerované súbory sa ukladajú do priečinka public vedľa package.json.

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 obsahuje celé video. Každá scéna má caption zobrazený na obrazovke, text komentára say, prompt obrázka, názvy súborov svojho obrázka a komentára a svoju dĺžku v 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 prehráva scény jednu po druhej. Každý obrázok sa pomaly približuje, titulok vyjde zospodu, komentár scény začne spolu s ňou a hudba ticho hrá pod celým videom:

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

Ako agent vytvorí video

1. Scenár. Agent zapíše scény do video.json: jedna myšlienka na scénu, titulok z niekoľkých slov, jedna alebo dve vety na nahovorenie. Požiadajte ho, aby vám scenár ukázal skôr, než čokoľvek vygeneruje.

2. Zostatok. Zavolá account_balance, aby zistil, koľko môže účet minúť. Toto volanie je zadarmo.

3. Obrázky. Pre každú scénu zavolá image_generate s prompt scény a size 1792x1024 a uloží obrázok ako public/scene-1.png, public/scene-2.png a tak ďalej. Ak obrázok nie je hotový počas doby čakania, nástroj vráti ID úlohy a agent sa pýta job_status, kým obrázok nie je hotový.

4. Komentár. Pre každú scénu zavolá tts_generate s textom say scény a hlasom, napríklad nova, a uloží zvuk ako public/scene-1.mp3 a tak ďalej.

5. Časovanie. Nastaví seconds každej scény na dĺžku jej komentára plus zhruba pol sekundy. tts_generate vracia túto dĺžku ako duration_seconds, odmeranú zo zvukového súboru. Ak odpoveď obsahuje aj duration_estimated: true, dĺžku bolo možné len odhadnúť z textu, takže agent súbor odmeria. Ak chcete súbor skontrolovať sami:

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

6. Hudba (voliteľné). Zavolá music_generate s promptom ako „calm instrumental background, soft piano“, with_vocals nastaveným na false a duration_seconds blízko dĺžke videa. Nástroj vráti ID úlohy; agent sa pýta job_status, kým skladba nie je hotová, a uloží ju ako public/music.mp3. Bez hudby odstráňte riadok music z video.json.

7. Náhľad a renderovanie. npm run studio otvorí náhľad vo vašom prehliadači. npm run render zapíše out/explainer.mp4.

Každý odkaz na súbor, ktorý nástroj vráti, sa dá stiahnuť bez prihlásenia. Uchovajte celý odkaz vrátane časti za otáznikom:

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

Požiadajte svojho agenta

Vytvor 30-sekundové vysvetľujúce video o tom, ako funguje synchronizácia v našej aplikácii, s úvodným projektom Remotion z torun.ai/docs/mcp-motion-explainers. Štyri scény. Najprv mi ukáž scenár vo video.json. Potom vygeneruj pre každú scénu jeden obrázok bez textu, nahovor každú scénu hlasom nova, pridaj tichú inštrumentálnu hudbu, prispôsob dĺžku každej scény jej komentáru a vyrenderuj.

Pre zvislé video požiadajte o width 1080 a height 1920 vo video.json a o obrázky so size 1024x1792.

Koľko to stojí

• image_generate, tts_generate a music_generate sú platené volania, účtované v Runs za rovnaké ceny ako v aplikácii. Video so štyrmi scénami a hudbou znamená štyri obrázky, štyri komentáre a jednu skladbu.
• account_balance a job_status sú zadarmo.
• Renderovanie prebieha vo vašom počítači. Zmena titulkov, časovania alebo pohybu a nové renderovanie v ToRun nič nestojí; nové vygenerovanie obrázka alebo komentára je nové platené volanie.
• Keď by jedno generovanie stálo viac ako prah kľúča, nástroj najprv odpovie cenou a váš agent sa vás opýta, než volanie vykoná.
• Všetko, čo agent vygeneruje, sa uloží aj do vašej knižnice ToRun.

Tipy

• Žiadajte obrázky bez textu. Slová nesie titulok a obrázkové modely text často píšu s chybami.
• Obmedzte každú scénu na jednu myšlienku a jednu alebo dve vety komentára.
• Vyberte si jeden hlas a držte sa ho počas celého videa.
• Udržiavajte hlasitosť hudby medzi 0.1 a 0.15, aby komentár zostal zrozumiteľný.