---
description: Explored Remotion (React-based programmatic video library) for user Mas
  Eko; learned it renders videos from React components frame-by-frame using FFmpeg,
  requires Node 16+, free for teams ≤3 people, $100+/month for larger teams; successfully
  installed and tested with 2-second demo video (203KB, 22s render time); created
  production video for @resiliencespace.id Instagram promotion - 5-second looping
  video, 1080x1920 format, pure green screen background (#00FF00), calm professional
  style with "Ruang Aman untuk Cerita" tagline, fade/slide animations, 650KB output;
  Remotion proven viable alternative to OpenMontage for Balimentari content automation
name: remotion-testing-and-video-generation
session_id: b706981ba7d143d5b5d0f4634a7844f1
source_conversation: '[[mem_session/dialog/b706981ba7d143d5b5d0f4634a7844f1.jsonl]]'
---

# Remotion Exploration & Video Generation

## What is Remotion

**Remotion** = React-based library for programmatic video generation
- Write React components → render to MP4/WebM/MOV video
- Core concept: video is a function of frame number
- Use `useCurrentFrame()` hook to get current frame, render content based on frame → creates animation
- Video defined by: `width`, `height`, `durationInFrames`, `fps`

## Installation & Requirements

```bash
npx create-video@latest --yes --blank my-video
cd my-video
npm i
npm run dev
```

**System Requirements:**
- Node.js 16+ or Bun 1.0.3+
- macOS 15 (Sequoia)+ only for Mac
- Linux needs Libc 2.35+ plus additional packages

## Licensing & Cost

**Free tier:** individuals or teams ≤3 people, unlimited commercial use

**Company License ($100/month minimum):** teams 4+ people
- Automators: $0.01 per render (for building tools/apps)
- Creators: $25/month per seat (for creating own videos)

**Enterprise ($500+/month):** full features + premium support

**Technical weight:** Requires Node.js, rendering is CPU/memory intensive, but development is light (like regular React app)

## Use Cases

Ideal for:
- Templated videos (personalized video campaigns)
- Automated video generation (data → video)
- Complex but reusable motion graphics
- Code-based video editing
- Repetitive social media content

**For Balimentari:** Could be more flexible alternative to OpenMontage for daily motivational content automation

---

## Test 1: Hello World Demo

**Date:** 2026-07-29

**Setup:**
- Created blank Remotion project
- Installed 272 packages, no vulnerabilities
- Modified `MyComposition.tsx` component

**Video specs:**
- Duration: 2 seconds (60 frames @ 30fps)
- Resolution: 1280x720
- Output: `output.mp4`, 203.7 KB

**Content:**
- Purple gradient background
- "Test Remotion" text with bounce effect (spring animation)
- "Video dari Kode React" subtitle fades in after 1 second
- Frame counter slides up from bottom

**Result:** ✅ SUCCESS
- Rendered in 22 seconds
- File size only 203 KB
- Smooth animations (spring, interpolate, fade, slide all working)
- Full control from code

**Key code pattern:**
```jsx
import { useCurrentFrame, useVideoConfig, interpolate, spring } from "remotion";

const frame = useCurrentFrame();
const { fps } = useVideoConfig();

// Spring animation
const scale = spring({
  frame,
  fps,
  config: { damping: 10, stiffness: 100 }
});

// Interpolate for fade/slide
const opacity = interpolate(frame, [30, 45], [0, 1], { extrapolateRight: "clamp" });
```

---

## Test 2: ResilienceSpace Instagram Promo

**Date:** 2026-07-29

**Client:** @resiliencespace.id (psychology counseling service)

**Requirements from user:**
- Tagline: "Ruang Aman untuk Cerita"
- Format: 1080x1920 (Instagram Story/Reels)
- Duration: 5 seconds loop
- Style: Calm & professional
- Background: Green screen for chroma key

**Implementation:**
- Created `ResilienceSpace.tsx` component
- Added composition in `src/compositions/ResilienceSpace.tsx`
- Registered in Root

**Video specs:**
- Format: 1080x1920 (Instagram Story/Reels ready)
- Duration: 5 seconds (150 frames @ 30fps)
- Background: Pure green #00FF00 (chroma key ready)
- Output: `resilience-space.mp4`, 650.8 KB
- Codec: H264

**Content:**
1. @resiliencespace.id handle (fade in smooth)
2. "Ruang Aman untuk Cerita" (slide up with breathing pulse effect)
3. "Konseling Psikologi Online" subtitle
4. Fade out at end for seamless loop

**Animations:**
- Calm fade in/out
- Smooth slide up
- Breathing pulse effect using sine wave interpolation for professional feel

**Result:** ✅ SUCCESS
- Rendered successfully
- Green screen solid and clean for chroma key replacement
- Animations smooth and professional
- File size 650 KB, ready for Instagram upload

**Usage options:**
- Direct upload to IG Story/Reels
- Replace green screen in video editor with custom background
- Can create square version (1080x1080) for Instagram feed

---

## Key Findings

**Remotion is viable for production:**
- Fast render times (22s for 2s video, similar for 5s video)
- Small file sizes (200-650 KB for short videos)
- Full React ecosystem available (can use Framer Motion, fetch APIs, etc.)
- Smooth animations with built-in spring physics and interpolation
- Perfect for automated content generation

**Advantages over traditional video editors:**
- Programmatic = automatable
- Reusable templates with props
- Data-driven content (fetch from APIs)
- Version control for video templates
- All web capabilities available (CSS animations, canvas, SVG, etc.)

**For Balimentari automation:**
- Can create daily motivational content templates
- Fetch dynamic data (quotes, dates, weather)
- Auto-render and schedule posting
- More flexible than OpenMontage

**Next possibilities:**
- Advanced Balimentari "Good Morning" template
- Multiple variations/styles
- API integration for dynamic content
- Automated daily rendering pipeline