Installation

System requirements

Before installing, ensure your system meets these requirements:

Node.js: Version 18.0 or higher (download here)
npm: Version 8.0 or higher (comes with Node.js)
Operating system: macOS, Windows, or Linux
Memory: At least 4GB RAM recommended
OpenAI API access: Active OpenAI account with API credits

Step-by-step installation

Clone the repository

Get the source code from the Remotion monorepo:

git clone https://github.com/remotion-dev/remotion.git
cd remotion/packages/template-prompt-to-motion-graphics

Or if you want just this template:

npx create-video --template=prompt-to-motion-graphics

Install dependencies

Install all required npm packages:

npm install

This installs 50+ packages including:Core Remotion packages:

remotion@^4.0.0 - Core library for programmatic video
@remotion/player@^4.0.0 - Embedded video player component
@remotion/bundler@^4.0.0 - Webpack bundler for Remotion
@remotion/cli@^4.0.0 - CLI tools for rendering
@remotion/web-renderer@^4.0.0 - Browser-based rendering

Remotion plugins:

@remotion/transitions@^4.0.0 - Scene transition effects
@remotion/shapes@^4.0.0 - Geometric shape primitives
@remotion/three@^4.0.0 - Three.js integration for 3D
@remotion/google-fonts@^4.0.0 - Google Fonts integration
@remotion/lottie@^4.0.0 - Lottie animation support
@remotion/paths@^4.0.0 - SVG path utilities
@remotion/tailwind-v4@^4.0.0 - Tailwind CSS v4 integration

AI & code generation:

[email protected] - Vercel AI SDK for streaming
@ai-sdk/[email protected] - OpenAI provider
@ai-sdk/[email protected] - React hooks for AI SDK
@babel/[email protected] - In-browser code compilation
[email protected] - Schema validation for AI responses

UI framework:

[email protected] - Next.js App Router
[email protected] - React 19
[email protected] - React DOM
@radix-ui/* - Headless UI components
[email protected] - Icon library
[email protected] - Utility-first CSS

Code editor:

@monaco-editor/[email protected] - Monaco editor React wrapper
[email protected] - VS Code’s editor
[email protected] - JSX syntax highlighting

Set up environment variables

Create a .env file in the project root:

cp .env.example .env

The .env.example file contains:

REMOTION_AWS_ACCESS_KEY_ID=
REMOTION_AWS_SECRET_ACCESS_KEY=

OPENAI_API_KEY=

Required variables:

OPENAI_API_KEY=sk-proj-...

Get your OpenAI API key from platform.openai.com/api-keys.

Never commit your .env file to version control. It’s already in .gitignore by default.

Optional variables (for cloud rendering):

REMOTION_AWS_ACCESS_KEY_ID=AKIA...
REMOTION_AWS_SECRET_ACCESS_KEY=...

These are only needed if you want to use Remotion Lambda for cloud rendering. See the Lambda documentation for setup instructions.

Verify installation

Start the development server:

npm run dev

You should see:

▲ Next.js 16.1.5
- Local:        http://localhost:3000
- Environments: .env

✓ Ready in 2.3s

Open http://localhost:3000 in your browser. You should see the landing page with the “What do you want to create?” input.

Configuration files

package.json scripts

The project includes these npm scripts:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint .",
    "remotion": "remotion studio",
    "render": "remotion render",
    "deploy": "node deploy.mjs"
  }
}

npm run dev

Start Next.js development server on port 3000

npm run build

Build production-optimized Next.js bundle

npm start

Start production server (after build)

npm run lint

Run ESLint to check code quality

npm run remotion

Open Remotion Studio for previewing compositions

npm run render

Render animations to video files

remotion.config.ts

Remotion configuration file:

import { Config } from "@remotion/cli/config";

Config.setOverwriteOutput(true);
Config.setVideoImageFormat("jpeg");
Config.setCodec("h264");

Key configuration options:

setOverwriteOutput(true) - Overwrite existing output files
setVideoImageFormat("jpeg") - Use JPEG for video frames (smaller size)
setCodec("h264") - Use H.264 codec for broad compatibility

next.config.js

Next.js configuration with Remotion integration:

const nextConfig = {
  reactStrictMode: true,
  transpilePackages: [
    "remotion",
    "@remotion/player",
    "@remotion/transitions",
    // ... other Remotion packages
  ],
};

export default nextConfig;

tailwind.config.js

Tailwind CSS v4 with custom theme:

import { Config } from "tailwindcss";

const config: Config = {
  content: ["./src/**/*.{ts,tsx}"],
  theme: {
    extend: {
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",
        // ... custom color system
      },
    },
  },
};

Project structure

Understanding the codebase layout:

.
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── page.tsx           # Landing page with prompt input
│   │   ├── generate/          # Generation page with editor + preview
│   │   │   └── page.tsx
│   │   └── api/               # API routes
│   │       └── generate/      # Code generation endpoint
│   │           └── route.ts
│   ├── components/            # React components
│   │   ├── AnimationPlayer/   # Remotion Player wrapper
│   │   ├── CodeEditor/        # Monaco editor
│   │   ├── ChatSidebar/       # Chat interface
│   │   ├── LandingPageInput.tsx
│   │   └── ui/                # Radix UI components
│   ├── hooks/                 # Custom React hooks
│   │   ├── useAnimationState.ts    # Code compilation state
│   │   ├── useConversationState.ts # Chat history
│   │   └── useAutoCorrection.ts    # Error healing
│   ├── skills/                # AI skill knowledge
│   │   ├── charts.md
│   │   ├── typography.md
│   │   ├── messaging.md
│   │   ├── transitions.md
│   │   ├── sequencing.md
│   │   ├── spring-physics.md
│   │   ├── social-media.md
│   │   └── 3d.md
│   ├── examples/              # Code examples
│   │   ├── prompts.ts         # Example prompts
│   │   └── code/              # Example animations
│   ├── remotion/              # Remotion setup
│   │   ├── Root.tsx           # Composition root
│   │   └── DynamicComp.tsx    # Dynamic component wrapper
│   └── types/                 # TypeScript types
├── public/                    # Static assets
├── styles/                    # Global CSS
├── .env.example               # Environment variables template
├── package.json               # Dependencies and scripts
├── remotion.config.ts         # Remotion configuration
└── tsconfig.json              # TypeScript configuration

Key files explained

src/app/api/generate/route.ts

The core generation API endpoint. Handles:

Prompt validation (reject non-visual requests)
Skill detection (analyze prompt for relevant skills)
Initial generation (streaming response with full code)
Follow-up edits (targeted edits or full replacement)
Error correction (self-healing for compilation errors)

Uses Vercel AI SDK for streaming and OpenAI for generation.

src/skills/*.md

Domain-specific guidance files that get injected into prompts when relevant:

charts.md - Data visualization patterns, axis labels, staggered animations
typography.md - Kinetic text, typewriter effects, word carousels
messaging.md - Chat UI, bubble layouts, WhatsApp/iMessage styling
transitions.md - TransitionSeries, fade/slide/wipe effects
sequencing.md - Sequence, Series, timing control
spring-physics.md - Spring configs, bounce effects
social-media.md - Platform aspect ratios, safe zones
3d.md - Three.js integration, camera setup

src/hooks/useAnimationState.ts

Manages code compilation using Babel standalone:

const { code, Component, error, isCompiling, setCode, compileCode } = 
  useAnimationState(initialCode);

Compiles JSX/TSX in-browser
Provides React component for rendering
Tracks compilation errors
Debounces user edits

src/hooks/useConversationState.ts

Maintains chat history and conversation context:

const {
  messages,              // All messages
  addUserMessage,        // Add user prompt
  addAssistantMessage,   // Add AI response
  getFullContext,        // Get last 6 messages
  getPreviouslyUsedSkills, // Avoid redundant skills
} = useConversationState();

src/hooks/useAutoCorrection.ts

Automatic error healing with retry logic:

Detects compilation errors after generation
Automatically retries with error context (up to 3 attempts)
Handles failed edits by requesting better context
Tracks attempt count to prevent infinite loops

Model configuration

The system supports multiple OpenAI models with different performance characteristics:

GPT-5.2

Default model

Fast generation (~5-10 seconds)
Good code quality
Best for simple animations
Lower API cost

GPT-5.2 (Low effort)

Reasoning model

Slower (~15-30 seconds)
Better code structure
Handles complex prompts
Higher API cost

GPT-5.2 (Medium effort)

Reasoning model

Medium speed (~30-60 seconds)
High-quality code
Best for data visualizations
Higher API cost

GPT-5.2 (High effort)

Reasoning model

Slowest (~60-120 seconds)
Highest quality code
Best for complex 3D scenes
Highest API cost

You can select the model from the dropdown on the landing page or generation page.

Development workflow

Local development

# Start dev server with hot reload
npm run dev

# Open browser to http://localhost:3000
# Make changes to code - Next.js will auto-reload

Code quality

# Run ESLint
npm run lint

# Fix auto-fixable issues
npx eslint . --fix

# Format with Prettier
npx prettier --write .

Testing animations

# Open Remotion Studio to preview compositions
npm run remotion

# Render a composition to video
npx remotion render MyAnimation out/video.mp4

Deployment

Deploy to Vercel

The easiest deployment option:

Push to GitHub

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/your-username/your-repo.git
git push -u origin main

Import to Vercel

Go to vercel.com/new
Import your GitHub repository
Add environment variable: OPENAI_API_KEY
Click Deploy

Verify deployment

Your app will be live at https://your-project.vercel.app

Deploy to other platforms

The app is a standard Next.js application and can be deployed to:

Netlify: Use the Next.js plugin
Railway: Automatic deployment from GitHub
AWS Amplify: Full-stack hosting
Self-hosted: Build and run with npm run build && npm start

Make sure to set the OPENAI_API_KEY environment variable in your deployment platform.

Troubleshooting

Installation fails with peer dependency errors

Try using --legacy-peer-deps flag:

npm install --legacy-peer-deps

Or use the latest npm version:

npm install -g npm@latest
npm install

Build fails with webpack errors

Clear Next.js cache and rebuild:

rm -rf .next
npm run build

Monaco editor doesn't load

Ensure webpack configuration includes Monaco loader. Check next.config.js has proper transpilePackages.

Remotion Player shows blank screen

Check browser console for errors. Common issues:

Missing AbsoluteFill wrapper in generated code
Syntax errors in compiled component
Missing imports

The auto-correction system should catch these automatically.

OpenAI API errors

Verify your API key is valid:

curl https://api.openai.com/v1/models \
  -H "Authorization: Bearer $OPENAI_API_KEY"

Check you have sufficient credits at platform.openai.com/usage.

Next steps

Quick start guide

Create your first animation in 5 minutes

Skills system

Learn how domain expertise is injected

API reference

Explore the generation API

Remotion docs

Deep dive into Remotion fundamentals

Get Started

Core Features

Skills Reference

Deployment

Guides

System requirements

Step-by-step installation

Configuration files

package.json scripts

npm run dev

npm run build

npm start

npm run lint

npm run remotion

npm run render

remotion.config.ts

next.config.js

tailwind.config.js

Project structure

Key files explained

Model configuration

GPT-5.2

GPT-5.2 (Low effort)

GPT-5.2 (Medium effort)

GPT-5.2 (High effort)

Development workflow

Local development

Code quality

Testing animations

Deployment

Deploy to Vercel

Deploy to other platforms

Troubleshooting

Next steps

Quick start guide

Skills system

API reference

Remotion docs

Build docs developers (and LLMs) love

Get Started

Core Features

Skills Reference

Deployment

Guides

​System requirements

​Step-by-step installation

​Configuration files

​package.json scripts

npm run dev

npm run build

npm start

npm run lint

npm run remotion

npm run render

​remotion.config.ts

​next.config.js

​tailwind.config.js

​Project structure

​Key files explained

​Model configuration

GPT-5.2

GPT-5.2 (Low effort)

GPT-5.2 (Medium effort)

GPT-5.2 (High effort)

​Development workflow

​Local development

​Code quality

​Testing animations

​Deployment

​Deploy to Vercel

​Deploy to other platforms

​Troubleshooting

​Next steps

Quick start guide

Skills system

API reference

Remotion docs

Build docs developers (and LLMs) love

System requirements

Step-by-step installation

Configuration files

package.json scripts

remotion.config.ts

next.config.js

tailwind.config.js

Project structure

Key files explained

Model configuration

Development workflow

Local development

Code quality

Testing animations

Deployment

Deploy to Vercel

Deploy to other platforms

Troubleshooting

Next steps