DEV Community

Cover image for Creating YouTube Videos with Remotion: A Complete Guide to the Kimi AI Negotiation Project
Dominik Oswald
Dominik Oswald

Posted on

Creating YouTube Videos with Remotion: A Complete Guide to the Kimi AI Negotiation Project

#youtube #ai #automation

Introduction

Creating professional YouTube videos programmatically has never been easier thanks to Remotion - a React-powered video creation framework that lets you build videos using familiar web technologies. In this tutorial, I'll walk you through how I created a complete YouTube video demonstrating an AI negotiation workflow, combining multiple video segments, PowerPoint slides, and screenshots into a polished final product.

The project showcases an innovative approach: using Kimi AI (Moonshot AI's chatbot) to negotiate the lowest possible subscription price, then automating the entire negotiation process with Comet Browser Assistant. But more importantly, it demonstrates the power of Remotion for creating professional video content entirely through code.

What We're Building

The final video demonstrates a three-phase workflow:

  • Phase 1: Analyzing Kimi's sale page negotiation rules
  • Phase 2: Extracting constraints and opportunities from the AI's responses
  • Phase 3: Executing an automated negotiation loop via Comet Browser Assistant

All of this was composed from 3 MP4 video files, 1 PowerPoint presentation, and 1 screenshot - orchestrated entirely through Remotion's React-based composition system. youtube

The Kimi AI Negotiation Context

The Kimi sale page presents an interesting challenge: "Your Black Friday price runs on my mood". The exploit prompt technique involves: youtube

  1. Analyzing the sale page rules - Understanding what "price runs on my mood" means for negotiation
  2. Identifying constraints - The checkout price is final, but negotiation is possible beforehand
  3. Finding cost reduction opportunities - Including referral bonuses (10 OK Computer credits for existing Pro users)
  4. Crafting an iterative negotiation script - Politely requesting the lowest price ($0.99) allowed under the rules

The key prompt used:

Analyze the sale page at https://www.kimi.com/kimiplus/sale?activity_enter_method=h5_share
and help me reach the lowest legitimate first-month price available under 
the posted rules. Then run an iterative, polite negotiation script 
(one message at a time) that I can paste into the chat, aiming for the 
lowest price you are allowed to offer.
Enter fullscreen mode Exit fullscreen mode

Project Architecture

Tech Stack

Technology Purpose
React 18 UI component framework for video scenes
Remotion 4.0 Video composition and rendering engine
TypeScript 5.3 Type-safe development
Vite 5 Fast build tool and dev server
FFmpeg Video encoding and export

Project Structure 

remotion-video/
├── src/
│   ├── Root.tsx              # Main composition entry
│   ├── compositions/
│   │   ├── Intro.tsx         # Opening sequence (90 frames)
│   │   ├── Segment1.tsx      # The Exploit Prompt (~143s)
│   │   ├── Segment2.tsx      # Kimi's Response (~437s)
│   │   ├── Segment3.tsx      # 3-Phase Workflow (~20s)
│   │   ├── Outro.tsx         # Closing sequence (120 frames)
│   │   └── MainVideo.tsx     # Full composition
│   ├── components/
│   │   ├── VideoSegment.tsx  # Video player component
│   │   ├── VideoOverlay.tsx  # Text overlay system
│   │   ├── ProgressBar.tsx   # Visual progress indicators
│   │   └── TitleCard.tsx     # Animated title cards
│   └── styles/
└── static/                   # Video files, images, audio
Enter fullscreen mode Exit fullscreen mode

Getting Started

Prerequisites

Before starting, ensure you have:

  • Node.js 18.0+ installed
  • npm or yarn package manager
  • FFmpeg for video rendering

Installation 

git clone https://github.com/d-oit/remotion-youtube-kimi-comet-chat.git
cd remotion-youtube-kimi-comet-chat/remotion-video
npm install
Enter fullscreen mode Exit fullscreen mode

Development Workflow

Start the Remotion development server to preview your video in real-time:

npm run dev
Enter fullscreen mode Exit fullscreen mode

This launches an interactive preview where you can scrub through your composition, adjust timing, and see changes instantly.

Key Features Implementation

1. Dynamic Text Overlays

Remotion makes it easy to create animated text overlays with precise timing:

import { interpolate, useCurrentFrame, useVideoConfig } from 'remotion';

export const VideoOverlay: React.FC<{ text: string; startFrame: number }> = 
  ({ text, startFrame }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Fade in animation
  const opacity = interpolate(
    frame,
    [startFrame, startFrame + 15],
    [0, 1],
    { extrapolateRight: 'clamp' }
  );

  return (
    <div style={{ 
      opacity, 
      background: 'rgba(0,0,0,0.7)',
      padding: '20px',
      borderRadius: '10px'
    }}>
      <h2>{text}</h2>
    </div>
  );
};
Enter fullscreen mode Exit fullscreen mode

2. Multi-Segment Composition

The project combines multiple video segments with frame-perfect transitions:

  • Intro: 90 frames @ 30fps (3 seconds)
  • Segment 1: 4,290 frames (143 seconds) - The Exploit Prompt
  • Segment 2: 13,110 frames (437 seconds) - Kimi's Response
  • Segment 3: 600 frames (20 seconds) - The 3-Phase Workflow
  • Outro: 120 frames @ 30fps (4 seconds)

Each segment is a separate React component that can be developed and rendered independently:

export const MainVideo: React.FC = () => {
  return (
    <>
      <Sequence from={0} durationInFrames={90}>
        <Intro />
      </Sequence>
      <Sequence from={90} durationInFrames={4290}>
        <Segment1 />
      </Sequence>
      <Sequence from={4380} durationInFrames={13110}>
        <Segment2 />
      </Sequence>
      <Sequence from={17490} durationInFrames={600}>
        <Segment3 />
      </Sequence>
      <Sequence from={18090} durationInFrames={120}>
        <Outro />
      </Sequence>
    </>
  );
};
Enter fullscreen mode Exit fullscreen mode

3. Video Configuration

Configure your output settings in src/Root.tsx:

export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        id="MainVideo"
        component={MainVideo}
        durationInFrames={18210}
        fps={30}
        width={1920}
        height={1080}
      />
    </>
  );
};
Enter fullscreen mode Exit fullscreen mode

Rendering Your Video

Render the Complete Video 

npm run build
# Output: out/video.mp4
Enter fullscreen mode Exit fullscreen mode

Render Individual Segments

For faster iteration, render segments independently:

npm run build-intro        # Intro only
npm run build-segment1     # Phase 1
npm run build-segment2     # Phase 2
npm run build-segment3     # Phase 3
npm run build-outro        # Outro only
Enter fullscreen mode Exit fullscreen mode

The Complete Workflow

Step 1: Source Material Preparation

Gather your raw materials:

  • Video recordings (screen captures, demos)
  • PowerPoint presentations (exported as video or images)
  • Screenshots and graphics
  • Background music/audio

Step 2: Create React Components

Build reusable components for common patterns:

// components/VideoSegment.tsx
export const VideoSegment: React.FC<{
  src: string;
  startFrom?: number;
  volume?: number;
}> = ({ src, startFrom = 0, volume = 1 }) => {
  return (
    <Video 
      src={staticFile(src)}
      startFrom={startFrom}
      volume={volume}
      style={{ width: '100%', height: '100%' }}
    />
  );
};
Enter fullscreen mode Exit fullscreen mode

Step 3: Compose Sequences

Layer your components with precise timing:

<Sequence from={0} durationInFrames={300}>
  <VideoSegment src="recording1.mp4" />
  <VideoOverlay 
    text="Step 1: Analyze the sale page" 
    startFrame={30} 
  />
</Sequence>
Enter fullscreen mode Exit fullscreen mode

Step 4: Add Polish

  • Progress indicators: Visual feedback for multi-step processes
  • Transitions: Smooth fades between segments
  • Audio mixing: Background music with proper volume levels
  • Typography: Consistent fonts and styling across all text overlays

Advanced Techniques

Programmatic Asset Generation

The project was created using Kimi K2.5 AI with OpenCode CLI for asset generation and code scaffolding. This demonstrates how AI tools can accelerate video production workflows. youtube

Custom Render Scripts

For advanced encoding options, use custom FFmpeg configurations:

# render-ffmpeg.sh
remotion render MainVideo out/video.mp4 \
  --codec h264 \
  --quality 90 \
  --concurrency 4
Enter fullscreen mode Exit fullscreen mode

Benefits of the Remotion Approach

  1. Version Control: Your entire video is code - track changes with Git
  2. Reusability: Create component libraries for consistent branding
  3. Automation: Generate variations programmatically (translations, A/B tests)
  4. Precision: Frame-perfect timing without manual timeline scrubbing
  5. Collaboration: Multiple developers can work on different segments simultaneously

Resources

Conclusion

Remotion transforms video creation from a manual timeline-based process into a programmatic, version-controlled workflow. By treating videos as React components, you gain the power of modern web development tools while creating professional video content.

The Kimi negotiation project demonstrates how complex multi-segment videos with overlays, transitions, and synchronized timing can be built entirely through code - making video production scalable, maintainable, and collaborative.

Whether you're creating educational content, product demos, or automated video variations, Remotion provides the foundation for treating video as a first-class programmatic medium. Give it a try for your next YouTube project!

Top comments (0)