Create Business-Ready Videos with Claude + Remotion: Full Code & Tutorial
Want to Create AI Videos but Don’t Know Animation Code?
No worries — this article is made for you, especially after watching our demo short. Just follow along, copy and paste the code, and you’re good to go.
Simply tell Claude what style or content you want, and it will generate a complete animation structure for you. Then, drop that into Remotion — an open-source React framework for video — and your AI video is ready to render.
Below is the full code used in the video, along with a step-by-step guide.
🧠 How It Works Behind the Scenes
- Claude Prompt – Describe your desired script, visuals, and tone
- Claude Output Code – Automatically generates Remotion + React components
- Paste into Remotion – Minimal edits needed, just plug and play
- Render – Preview and export your video
🧱 Project Structure
src/
├── Root.tsx
├── Composition.tsx
├── sequences/
│ ├── Scene1_PainPoint.tsx
│ ├── Scene2_Solution.tsx
│ ├── Scene3_CTA.tsx
│ └── Intro.tsx
├── components/
│ ├── GlassCard.tsx
│ ├── AnimatedText.tsx
│ ├── Logo.tsx
│ └── Background.tsx
└── styles/
└── constants.ts
🛠️ Remotion Setup Guide
npx create-video@latest nextmaven-video
cd nextmaven-video
npm install
🎨 Styling File (src/styles/constants.ts)
export const COLORS = {
background: '#0a0a0f',
backgroundGradient1: '#1a1a2e',
backgroundGradient2: '#16213e',
accent1: '#667eea',
accent2: '#764ba2',
white: '#ffffff',
whiteAlpha10: 'rgba(255,255,255,0.1)',
whiteAlpha20: 'rgba(255,255,255,0.2)',
whiteAlpha80: 'rgba(255,255,255,0.8)',
};
export const FONTS = {
primary: 'SF Pro Display, -apple-system, BlinkMacSystemFont, sans-serif',
weight: {
regular: 400,
medium: 500,
semibold: 600,
bold: 700,
},
};
export const VIDEO_CONFIG = {
width: 1080,
height: 1920,
fps: 30,
durationInSeconds: 15,
};
export const TIMING = {
intro: { start: 0, duration: 30 },
scene1: { start: 30, duration: 90 },
scene2: { start: 120, duration: 150 },
scene3: { start: 270, duration: 180 },
};
🎬 Video Orchestration: Root.tsx + Composition.tsx
These two files define the global video structure — resolution, total duration, and when each scene appears.
🔗 Full code available in the Complete Source Code section at the bottom of the page.
✨ Key Animated Components
- GlassCard.tsx – Stylish frosted glass card animation
- AnimatedText.tsx – Supports fade-in, typewriter, and scale text animations
- Logo.tsx – Animated brand logo
- Background.tsx – Dynamic gradient + glowing orb effects
✅ All use spring-based animation — no manual frame-by-frame coding needed.
📽️ Scene Breakdown
Each scene is a Sequence, displayed based on TIMING in the constants file.
- Scene 1 – Shows pain points (animated emoji text cards)
- Scene 2 – Introduces the solution (NextMaven Training)
- Scene 3 – Displays CTA, slogan, and animated button
💡 You can reuse AnimatedText and GlassCard for other videos — just change the text!
🏁 Render the Video
npm start # Preview video
npx remotion render NextMavenVideo out/nextmaven-video.mp4
📈 Want to Learn More About AI + Visual Automation?
NextMaven publishes weekly practical AI tutorials to help you create scalable, high-quality content and marketing assets with real business impact.
Discover New Blog Posts
Stay updated with our latest articles.
.png)
.png)
.png)
