Skip to content

vt-c-remotion-video

Generate programmatic videos using Remotion. Interviews the user about their video concept, then generates a complete Remotion project with VisiTrans Corporate Design.

Plugin: core-standards
Category: Other
Command: /vt-c-remotion-video

Remotion Video Generator

Create professional videos programmatically using Remotion (React-based video framework). Follows a structured interview → code generation → preview → iterate workflow. Applies VisiTrans Corporate Design by default.

When to Use

  • Product demos and explainer videos
  • Marketing content with branded visuals
  • Conference presentation recordings
  • Social media video content (vertical, square, or landscape)

Prerequisites

  • Node.js 18+ installed
  • The target project directory should be empty or not exist yet

Execution

Step 1: Video Brief Interview

Gather requirements through structured questions. Use AskUserQuestion for each:

1a. Subject and purpose: "What is this video about? Describe the main topic or message."

1b. Target audience: "Who will watch this video? (e.g., potential customers, internal team, conference attendees)"

1c. Format:

Use AskUserQuestion: - Landscape 1920x1080 (YouTube, presentations) - Portrait 1080x1920 (Instagram Reels, TikTok) - Square 1080x1080 (Social media, LinkedIn)

1d. Duration: "How long should the video be? (e.g., 30 seconds, 1 minute, 2 minutes)"

1e. Scene outline: "Describe each scene. For each scene, provide: - A headline or key message - What should be shown visually (text, images, animations) - Duration hint (e.g., 5 seconds, 10 seconds)"

If the user provides a rough description instead of scene-by-scene, break it into 3-5 scenes yourself.

1f. Assets: "Do you have any assets to include? (logos, screenshots, product images) Provide file paths or say 'none — use placeholders'."

1g. Product theme (if not provided via --product flag):

Use AskUserQuestion: - VisiTrans — Orange + Dark Blue (default) - VisiMatch — Orange + Petrol - VisiFair — Orange + Green - VisiArea — Orange + Red

Compile all answers into a structured brief for code generation.

Step 2: Generate Remotion Project

Generate a complete Remotion project from the video brief.

2a. Scaffold project structure

Create the target directory and generate these files:

package.json: 

{
  "name": "{project-name}",
  "private": true,
  "scripts": {
    "dev": "npx remotion studio",
    "render": "npx remotion render MyVideo out/video.mp4",
    "render:gif": "npx remotion render MyVideo out/video.gif --codec gif"
  },
  "dependencies": {
    "react": "19.1.0",
    "react-dom": "19.1.0",
    "remotion": "4.0.441",
    "@remotion/cli": "4.0.441",
    "@remotion/transitions": "4.0.441",
    "@remotion/fonts": "4.0.441"
  },
  "devDependencies": {
    "typescript": "5.9.3",
    "@types/react": "19.1.8"
  }
}

Note: All remotion and @remotion/* packages MUST be the exact same version.

tsconfig.json: 

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "commonjs",
    "jsx": "react-jsx",
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

src/index.ts: 

import { registerRoot } from "remotion";
import { RemotionRoot } from "./Root";
registerRoot(RemotionRoot);

2b. Generate color constants from VisiTrans CD

src/styles/colors.ts:

Read colors from TOOLKIT_ROOT/configs/visitrans-cd-tokens.yaml and generate: 

// VisiTrans Design Tokens — generated from configs/visitrans-cd-tokens.yaml
export const VT_COLORS = {
  orange: "#FC9E00",
  black: "#000000",
  textBlack: "#1F1F1F",
  white: "#FFFFFF",
  // ... product-specific theme colors
  theme: {
    primary: "#FC9E00",      // from product theme
    secondary: "#3F51B5",    // from product theme
    tertiary: "#FFEB3B",     // from product theme
  }
};

export const VT_FONTS = {
  family: "'Inter', system-ui, sans-serif",
  heading: { weight: 700, size: "56px" },
  body: { weight: 400, size: "36px" },
  label: { weight: 600, size: "28px" },
};

2c. Generate Root.tsx with composition

src/Root.tsx: 

import { Composition } from "remotion";
import { MyVideo } from "./MyVideo";

export const RemotionRoot: React.FC = () => (
  <Composition
    id="MyVideo"
    component={MyVideo}
    durationInFrames={durationInSeconds * fps}
    fps={30}
    width={width}    // from interview format choice
    height={height}
  />
);

2d. Generate scene components

For each scene from the video brief, generate a scene component in src/scenes/:

Each scene component: - Uses useCurrentFrame() and useVideoConfig() for all animation - Uses interpolate() for fade/slide animations - Uses <AbsoluteFill> for layering - Applies VisiTrans colors from colors.ts - Includes text overlays with the scene's headline and message

CRITICAL REMOTION RULES — enforce these in all generated code: - All animation MUST use useCurrentFrame() — NEVER CSS transitions, NEVER Tailwind animate classes - Use <Img> from remotion — NEVER native <img> or CSS background-image - Use random(seed) from remotion — NEVER Math.random() - Write timing in seconds: 2 * fps not magic frame numbers - Use interpolate() with extrapolateRight: "clamp" to prevent overshoot

2e. Generate main video composition

src/MyVideo.tsx:

Use <TransitionSeries> from @remotion/transitions to sequence scenes with fade transitions:

import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { fade } from "@remotion/transitions/fade";
import { Intro } from "./scenes/Intro";
import { Scene1 } from "./scenes/Scene1";
import { Outro } from "./scenes/Outro";

export const MyVideo: React.FC = () => (
  <TransitionSeries>
    <TransitionSeries.Sequence durationInFrames={sceneDuration}>
      <Intro />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition
      presentation={fade()}
      timing={linearTiming({ durationInFrames: 15 })}
    />
    {/* ... more scenes and transitions */}
  </TransitionSeries>
);

2f. Handle assets

If user provided asset paths: - Create public/ directory - Copy or reference assets via staticFile(): 

import { Img, staticFile } from "remotion";
<Img src={staticFile("logo.png")} style={{ width: "200px" }} />

If no assets: generate placeholder text/shapes using CSS.

Step 3: Install and Preview

After generating all files:

cd {project-directory}
npm install
npx remotion studio

Display: 

Project generated! To preview:
  cd {project-directory}
  npm install
  npx remotion studio

To render final video:
  npx remotion render MyVideo out/video.mp4

To render a GIF:
  npx remotion render MyVideo out/video.gif --codec gif

Step 4: Iterate on Scenes

When the user requests changes to specific scenes:

  1. Ask which scene to modify and what to change
  2. Edit only that scene's component file — do NOT regenerate the entire project
  3. The user can re-preview with npx remotion studio (hot reloads)

Common iteration requests: - "Make the intro longer" → adjust durationInFrames in Root.tsx - "Change the text on scene 2" → edit src/scenes/Scene2.tsx - "Add a fade between scenes" → add <TransitionSeries.Transition> entry - "Use a different color" → update src/styles/colors.ts

Edge Cases

Scenario Handling
User provides no scene outline Generate a default 3-scene structure: intro (logo + title), main (key message + visuals), outro (CTA + contact)
User wants very long video (>3 min) Warn: "Long videos consume significant render time. Consider breaking into chapters."
Assets don't exist at provided path Generate code with staticFile() reference; warn user to place files in public/ before rendering
No Node.js installed Display installation instructions and exit
Portrait format for YouTube Warn: "Portrait format (1080x1920) is unusual for YouTube. Proceed?"