Remotion baru saja merilis Agent Skills, dan ini mengubah segalanya untuk pembuatan video dengan AI.
npx skills add remotion-dev/skills
Itu saja. Satu perintah, dan Claude Code menjadi ahli pembuatan video yang memahami kerangka kerja video berbasis React dari Remotion secara mendalam.
Apa Itu Remotion Agent Skills?
Agent Skills adalah "manual instruksi" yang mengajari agen AI seperti Claude Code cara menggunakan alat dan kerangka kerja tertentu dengan benar. Keterampilan Remotion resmi memberikan Claude pengetahuan mendalam tentang:
- Arsitektur komponen Remotion (
<Composition>,<Sequence>,<AbsoluteFill>) - API Animasi (
interpolate,spring,useCurrentFrame) - Praktik terbaik untuk pengaturan waktu, kinerja, dan rendering
- Pola umum untuk intro, transisi, dan efek
Tanpa keterampilan, Claude mungkin menghasilkan kode Remotion yang cacat atau salah. Dengan keterampilan, ia menulis komponen video berkualitas produksi pada percobaan pertama.
💡
Ingin membangun API pembuatan video? Tutorial ini juga membahas pembuatan endpoint REST untuk rendering video sesuai permintaan. Gunakan Apidog untuk merancang, menguji, dan mendokumentasikan API pembuatan video Anda dengan pengujian otomatis dan kolaborasi waktu nyata.
Apa yang Akan Anda Buat
Dalam tutorial ini, Anda akan:
- Menginstal Remotion Agent Skills dalam satu perintah
- Membuat video intro lengkap menggunakan bahasa alami
- Menyempurnakan animasi melalui percakapan
- Merender video Anda ke MP4
- Menskala dengan Remotion Lambda (opsional)
TL;DR
# 1. Buat proyek Remotion
npx create-video@latest my-video && cd my-video
# 2. Instal Agent Skills (langkah kunci!)
npx skills add remotion-dev/skills
# 3. Mulai Claude Code dan jelaskan video Anda
claude
# 4. Render
npx remotion render <nama-komposisi> out/video.mp4
Itu adalah seluruh alur kerja. Agent Skills mengajari Claude cara menulis kode Remotion yang tepat, sehingga Anda dapat fokus mendeskripsikan apa yang Anda inginkan daripada men-debug komponen React.
Prasyarat
Sebelum memulai, pastikan Anda memiliki:
| Persyaratan | Versi | Perintah Cek |
|---|---|---|
| Node.js | 18+ | node --version |
| npm atau yarn | Terbaru | npm --version |
| Claude Code | Terbaru | claude --version |
| Editor kode | VS Code direkomendasikan | - |
Anda juga harus memiliki:
- Keakraban dasar dengan baris perintah
- Pemahaman dasar React (membantu tetapi tidak wajib)
Langkah 1: Menginstal Remotion dan Membuat Proyek Anda
Pertama, buat proyek Remotion baru menggunakan CLI resmi.
1.1 Buka terminal Anda dan jalankan:
npx create-video@latest my-first-video
1.2 Saat diminta, pilih opsi ini:
? Apa yang ingin Anda namai proyek Anda? my-first-video
? Pilih template: blank
? Gunakan TypeScript? Ya
? Instal dependensi? Ya
1.3 Navigasi ke proyek Anda:
cd my-first-video
1.4 Verifikasi instalasi:
npm run dev
Ini membuka Remotion Studio di browser Anda di http://localhost:3000. Anda akan melihat kanvas kosong dengan garis waktu di bagian bawah.
Hasil yang diharapkan: Jendela browser dengan antarmuka Remotion Studio.
Langkah 2: Menginstal Remotion Agent Skills
Di sinilah keajaiban terjadi. Satu perintah memberikan Claude Code pengetahuan tingkat ahli tentang Remotion.
2.1 Di direktori proyek Anda, jalankan:
npx skills add remotion-dev/skills
Saat Anda melihat Added skill: remotion ditampilkan, instalasi berhasil.
2.2 Apa yang baru saja terjadi?
Perintah tersebut menambahkan keterampilan ke .claude/skills/remotion/ di proyek Anda. Folder ini berisi SKILL.md—manual instruksi yang mengajari Claude cara menulis kode Remotion yang tepat.
2.3 Verifikasi instalasi:
Periksa apakah file keterampilan ada:
ls .claude/skills/remotion/
Output yang diharapkan:
SKILL.md
2.4 Struktur proyek Anda sekarang terlihat seperti:
my-first-video/
├── .claude/
│ └── skills/
│ └── remotion/
│ └── SKILL.md # "Otak" yang mengajari Claude Remotion
├── src/
│ ├── Root.tsx
│ ├── Composition.tsx
│ └── index.ts
├── public/
├── remotion.config.ts
├── package.json
└── tsconfig.json
Tips Pro: Jika keterampilan tidak dikenali, jalankan npx skills add remotion-dev/skills lagi atau mulai ulang Claude Code.
Langkah 3: Membuat Video Pertama Anda dengan Claude Code
Sekarang mari kita gunakan Claude Code untuk menghasilkan video lengkap. Buka terminal Anda di direktori proyek.
3.1 Mulai Claude Code:
claude
3.2 Jelaskan video Anda:
Ketik prompt ini ke Claude Code:
Buat video intro 5 detik untuk perusahaan teknologi bernama "DevFlow".
Persyaratan:
- Resolusi: 1920x1080
- Frame rate: 30fps
- Latar Belakang: Gradien gelap dari #1a1a2e ke #16213e
- Urutan animasi:
1. Teks logo "DevFlow" memudar masuk dari opasitas 0 ke 1 (frame 0-30)
2. Logo sedikit membesar dengan efek memantul (frame 15-45)
3. Slogan "Build faster. Ship smarter." memudar masuk di bawahnya (frame 45-90)
4. Semuanya bertahan untuk frame yang tersisa
Gunakan tipografi modern dan bersih dengan font Inter.
3.3 Claude Code menghasilkan file:
Claude Code akan membuat atau memodifikasi file-file ini:
src/Root.tsx - Definisi Komposisi:
import React from 'react';
import { Composition } from 'remotion';
import { DevFlowIntro } from './DevFlowIntro';
export const RemotionRoot: React.FC = () => {
return (
<>
<Composition
id="devflow-intro"
component={DevFlowIntro}
durationInFrames={150}
fps={30}
width={1920}
height={1080}
/>
</>
);
};
src/DevFlowIntro.tsx - Komponen video utama:
import React from 'react';
import {
AbsoluteFill,
useCurrentFrame,
interpolate,
spring,
useVideoConfig,
} from 'remotion';
export const DevFlowIntro: React.FC = () => {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
// Logo fade in (frames 0-30)
const logoOpacity = interpolate(frame, [0, 30], [0, 1], {
extrapolateRight: 'clamp',
});
// Logo bounce scale (frames 15-45)
const logoScale = spring({
frame: frame - 15,
fps,
from: 1,
to: 1.1,
config: {
damping: 10,
stiffness: 100,
},
});
// Tagline fade in (frames 45-90)
const taglineOpacity = interpolate(frame, [45, 90], [0, 1], {
extrapolateLeft: 'clamp',
extrapolateRight: 'clamp',
});
return (
<AbsoluteFill
style={{
background: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)',
justifyContent: 'center',
alignItems: 'center',
fontFamily: 'Inter, sans-serif',
}}
>
<div style={{ textAlign: 'center' }}>
<h1
style={{
fontSize: 120,
fontWeight: 700,
color: 'white',
margin: 0,
opacity: logoOpacity,
transform: `scale(${frame >= 15 ? logoScale : 1})`,
}}
>
DevFlow
</h1>
<p
style={{
fontSize: 36,
color: 'rgba(255, 255, 255, 0.8)',
marginTop: 24,
opacity: taglineOpacity,
fontWeight: 400,
}}
>
Build faster. Ship smarter.
</p>
</div>
</AbsoluteFill>
);
};
3.4 Pratinjau video Anda:
Jika Remotion Studio tidak berjalan, mulai:
npm run dev
Pilih "devflow-intro" dari dropdown komposisi. Gunakan garis waktu untuk menelusuri video Anda dan melihat pratinjau animasinya.
Hasil yang diharapkan: Video intro Anda diputar dengan animasi logo memudar masuk dan slogan.
Langkah 4: Sempurnakan Video Anda dengan Prompt Lanjutan
Kekuatan Claude Code adalah penyempurnaan berulang. Mari kita tingkatkan video kita.
4.1 Tambahkan efek latar belakang partikel dan Ubah skema warna
Tambahkan latar belakang partikel animasi halus dengan titik-titik putih kecil
yang perlahan melayang ke atas. Pertahankan seminimal mungkin - sekitar 20-30 partikel,
opasitas sangat rendah (0.1-0.2), dan gerakan lambat.
Ubah gradien ke tema biru-ungu:
- Warna awal: #0f0c29
- Warna tengah: #302b63
- Warna akhir: #24243e
Buat gradien 3-titik.
4.3 Tambahkan isyarat efek suara (opsional):
Tambahkan komentar penanda di mana efek suara "whoosh" harus diputar
saat logo memantul. Saya akan menambahkan audio nanti.
Setiap kali Anda memberikan umpan balik, Claude Code akan memodifikasi kode yang relevan dan Anda dapat melihat pratinjau perubahannya segera di Remotion Studio.
Langkah 5: Menambahkan Konten Dinamis dengan Props
Buat video Anda dapat digunakan kembali dengan menerima properti (props) dinamis. Ini memungkinkan Anda membuat beberapa video dengan konten yang berbeda.
5.1 Minta Claude Code untuk menambahkan props:
Refaktor video untuk menerima props berikut:
- companyName (string) - menggantikan "DevFlow"
- tagline (string) - menggantikan teks slogan
- primaryColor (string) - warna gradien utama
- secondaryColor (string) - warna gradien sekunder
Tambahkan juga validasi skema Zod untuk keamanan tipe.
5.2 Claude Code menghasilkan skema:
src/DevFlowIntro.tsx (diperbarui):
import { z } from 'zod';
export const introSchema = z.object({
companyName: z.string().default('DevFlow'),
tagline: z.string().default('Build faster. Ship smarter.'),
primaryColor: z.string().default('#0f0c29'),
secondaryColor: z.string().default('#24243e'),
});
type IntroProps = z.infer<typeof introSchema>;
export const DevFlowIntro: React.FC<IntroProps> = ({
companyName,
tagline,
primaryColor,
secondaryColor,
}) => {
// ... komponen menggunakan props ini
};
src/Root.tsx (diperbarui):
import { Composition } from 'remotion';
import { DevFlowIntro, introSchema } from './DevFlowIntro';
export const RemotionRoot: React.FC = () => {
return (
<>
<Composition
id="company-intro"
component={DevFlowIntro}
durationInFrames={150}
fps={30}
width={1920}
height={1080}
schema={introSchema}
defaultProps={{
companyName: 'DevFlow',
tagline: 'Build faster. Ship smarter.',
primaryColor: '#0f0c29',
secondaryColor: '#24243e',
}}
/>
</>
);
};
5.3 Uji dengan props berbeda di Remotion Studio:
Di Remotion Studio, klik panel Props dan modifikasi nilainya:
{
"companyName": "Apidog",
"tagline": "Design. Debug. Test. Document.",
"primaryColor": "#1e3a5f",
"secondaryColor": "#0d1b2a"
}
Pratinjau diperbarui secara real-time.
Langkah 6: Membuat Video Multi-Adegan
Mari kita buat video yang lebih kompleks dengan beberapa adegan.
6.1 Beri prompt Claude Code:
Buat video demo produk 30 detik dengan adegan-adegan ini:
Adegan 1 (0-5 detik): Animasi intro logo
Adegan 2 (5-12 detik): Pertunjukan fitur dengan 3 ikon muncul satu per satu
- Ikon 1: Roket (Kecepatan)
- Ikon 2: Perisai (Keamanan)
- Ikon 3: Bagan (Analitik)
Setiap ikon harus meluncur masuk dari kiri dengan efek memudar
Adegan 3 (12-22 detik): Mockup dasbor produk
- Tampilkan mockup UI sederhana
- Sorot bagian-bagian yang berbeda secara berurutan
Adegan 4 (22-30 detik): Panggilan untuk bertindak
- "Mulai uji coba gratis Anda"
- URL situs web memudar masuk
Gunakan komponen <Sequence> untuk mengatur adegan.
Total durasi: 900 frame pada 30fps.
6.2 Claude Code menghasilkan struktur adegan:
import { Sequence, AbsoluteFill } from 'remotion';
import { LogoIntro } from './scenes/LogoIntro';
import { FeatureShowcase } from './scenes/FeatureShowcase';
import { DashboardMockup } from './scenes/DashboardMockup';
import { CallToAction } from './scenes/CallToAction';
export const ProductDemo: React.FC = () => {
return (
<AbsoluteFill style={{ backgroundColor: '#0a0a0a' }}>
{/* Adegan 1: Intro Logo (frame 0-150) */}
<Sequence from={0} durationInFrames={150}>
<LogoIntro />
</Sequence>
{/* Adegan 2: Pertunjukan Fitur (frame 150-360) */}
<Sequence from={150} durationInFrames={210}>
<FeatureShowcase />
</Sequence>
{/* Adegan 3: Mockup Dasbor (frame 360-660) */}
<Sequence from={360} durationInFrames={300}>
<DashboardMockup />
</Sequence>
{/* Adegan 4: Panggilan untuk Bertindak (frame 660-900) */}
<Sequence from={660} durationInFrames={240}>
<CallToAction />
</Sequence>
</AbsoluteFill>
);
};
6.3 Claude Code membuat komponen adegan individual:
src/scenes/FeatureShowcase.tsx:
import { useCurrentFrame, interpolate, AbsoluteFill } from 'remotion';
const features = [
{ icon: '🚀', label: 'Speed', delay: 0 },
{ icon: '🛡️', label: 'Security', delay: 30 },
{ icon: '📊', label: 'Analytics', delay: 60 },
];
export const FeatureShowcase: React.FC = () => {
const frame = useCurrentFrame();
return (
<AbsoluteFill
style={{
justifyContent: 'center',
alignItems: 'center',
gap: 80,
flexDirection: 'row',
}}
>
{features.map((feature, index) => {
const slideIn = interpolate(
frame - feature.delay,
[0, 30],
[-100, 0],
{ extrapolateRight: 'clamp', extrapolateLeft: 'clamp' }
);
const opacity = interpolate(
frame - feature.delay,
[0, 30],
[0, 1],
{ extrapolateRight: 'clamp', extrapolateLeft: 'clamp' }
);
return (
<div
key={index}
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
transform: `translateX(${slideIn}px)`,
opacity,
}}
>
<span style={{ fontSize: 80 }}>{feature.icon}</span>
<span style={{ fontSize: 24, color: 'white', marginTop: 16 }}>
{feature.label}
</span>
</div>
);
})}
</AbsoluteFill>
);
};
Langkah 7: Menambahkan Audio ke Video Anda
7.1 Tambahkan trek musik latar:
Tempatkan file audio Anda di folder public:
public/
└── audio/
└── background-music.mp3
7.2 Minta Claude Code untuk mengintegrasikan audio:
Tambahkan musik latar dari public/audio/background-music.mp3
- Memudar masuk selama 30 frame pertama
- Memudar keluar selama 30 frame terakhir
- Atur volume ke 0.5
7.3 Claude Code menambahkan komponen Audio:
import { Audio, interpolate, useCurrentFrame, useVideoConfig } from 'remotion';
import { staticFile } from 'remotion';
export const ProductDemo: React.FC = () => {
const frame = useCurrentFrame();
const { durationInFrames } = useVideoConfig();
// Memudar masuk/keluar audio
const volume = interpolate(
frame,
[0, 30, durationInFrames - 30, durationInFrames],
[0, 0.5, 0.5, 0],
{ extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
);
return (
<AbsoluteFill>
<Audio src={staticFile('audio/background-music.mp3')} volume={volume} />
{/* ... sisa adegan */}
</AbsoluteFill>
);
};
Langkah 8: Merender Video Anda
Sekarang mari kita ekspor video Anda ke file.
8.1 Render dari baris perintah:
# Render ke MP4 (direkomendasikan untuk sebagian besar penggunaan)
npx remotion render company-intro out/company-intro.mp4
# Render dengan props kustom
npx remotion render company-intro out/apidog-intro.mp4 \
--props='{"companyName":"Apidog","tagline":"Design. Debug. Test. Document."}'
8.2 Opsi render:
# Kualitas tinggi (lebih lambat)
npx remotion render company-intro out/video.mp4 --crf=18
# Kualitas rendah (lebih cepat, file lebih kecil)
npx remotion render company-intro out/video.mp4 --crf=28
# Render sebagai GIF
npx remotion render company-intro out/video.gif --codec=gif
# Render sebagai WebM
npx remotion render company-intro out/video.webm --codec=vp8
# Render rentang frame tertentu
npx remotion render company-intro out/preview.mp4 --frames=0-90
8.3 Progres render:
Anda akan melihat output seperti:
ℹ Merender frame 0-150
████████████████████████████████████████ 100% | 150/150 frame
✓ Merender 150 frame dalam 12.3 detik (12.2 fps)
✓ Mengodekan video dalam 3.2 detik
✓ Video disimpan ke out/company-intro.mp4
Hasil yang diharapkan: File video yang dirender di direktori out/ Anda.
Langkah 9: Skala dengan Remotion Lambda (Opsional)
Untuk merender video dalam skala besar (ratusan atau ribuan), gunakan Remotion Lambda.
9.1 Menginstal dependensi Lambda:
npm install @remotion/lambda
9.2 Mengkonfigurasi kredensial AWS:
# Siapkan kredensial AWS
aws configure
# Buat peran Remotion Lambda
npx remotion lambda policies role
9.3 Deploy fungsi Lambda Anda:
# Deploy fungsi render
npx remotion lambda functions deploy
# Deploy situs video Anda
npx remotion lambda sites create src/index.ts --site-name=my-videos
9.4 Render melalui Lambda:
npx remotion lambda render \
--function-name=remotion-render \
--serve-url=https://your-bucket.s3.amazonaws.com/sites/my-videos \
--composition=company-intro \
--props='{"companyName":"ClientCo"}'
9.5 Rendering secara terprogram:
import { renderMediaOnLambda } from '@remotion/lambda/client';
const result = await renderMediaOnLambda({
region: 'us-east-1',
functionName: 'remotion-render',
composition: 'company-intro',
serveUrl: 'https://your-bucket.s3.amazonaws.com/sites/my-videos',
codec: 'h264',
inputProps: {
companyName: 'Apidog',
tagline: 'Design. Debug. Test. Document.',
},
});
console.log('URL Video:', result.url);
Langkah 10: Membangun API Pembuatan Video
Buat endpoint API yang menghasilkan video sesuai permintaan.
10.1 Minta Claude Code untuk membuat server Express:
Buat server API Express.js dengan endpoint-endpoint ini:
POST /api/videos/generate
- Menerima: template, props, format
- Memicu render Remotion Lambda
- Mengembalikan: jobId, status
GET /api/videos/status/:jobId
- Mengembalikan progres render dan URL unduh saat selesai
Sertakan penanganan kesalahan yang tepat dan validasi Zod.
10.2 Claude Code menghasilkan server:
server/index.ts:
import express from 'express';
import { renderMediaOnLambda, getRenderProgress } from '@remotion/lambda/client';
import { z } from 'zod';
const app = express();
app.use(express.json());
const generateSchema = z.object({
template: z.enum(['company-intro', 'product-demo']),
props: z.record(z.unknown()),
format: z.enum(['mp4', 'webm', 'gif']).default('mp4'),
});
app.post('/api/videos/generate', async (req, res) => {
try {
const { template, props, format } = generateSchema.parse(req.body);
const { renderId, bucketName } = await renderMediaOnLambda({
region: 'us-east-1',
functionName: 'remotion-render',
composition: template,
serveUrl: process.env.REMOTION_SITE_URL!,
codec: format === 'gif' ? 'gif' : 'h264',
inputProps: props,
});
res.json({
jobId: renderId,
bucketName,
status: 'processing',
});
} catch (error) {
res.status(400).json({ error: (error as Error).message });
}
});
app.get('/api/videos/status/:jobId', async (req, res) => {
const { jobId } = req.params;
const { bucketName } = req.query;
const progress = await getRenderProgress({
renderId: jobId,
bucketName: bucketName as string,
region: 'us-east-1',
functionName: 'remotion-render',
});
res.json({
status: progress.done ? 'completed' : 'processing',
progress: progress.overallProgress,
downloadUrl: progress.outputFile,
});
});
app.listen(3001, () => {
console.log('API Video berjalan di http://localhost:3001');
});
10.3 Uji API Anda dengan Apidog:
Gunakan Apidog untuk menguji endpoint pembuatan video Anda:
- Buat permintaan baru ke
POST /api/videos/generate - Atur isi:
{
"template": "company-intro",
"props": {
"companyName": "TestCorp",
"tagline": "Testing made easy"
},
"format": "mp4"
}
- Kirim dan verifikasi bahwa respons berisi
jobId - Lakukan polling endpoint status hingga
status: "completed"
Fitur pengujian otomatis Apidog membantu Anda memvalidasi alur pembuatan video Anda berfungsi dengan andal.
Contoh Lengkap: Generator Video Pemasaran
Berikut adalah contoh lengkap yang dapat Anda gunakan sebagai template.
Prompt untuk Claude Code:
Buat generator video pemasaran lengkap dengan fitur-fitur ini:
1. Template: "social-promo"
- Durasi: 15 detik (450 frame pada 30fps)
- Resolusi: 1080x1080 (persegi Instagram)
2. Adegan:
- Teks pengait (0-3 detik): Teks tebal besar yang menarik perhatian
- Gambar produk (3-9 detik): Tampilkan produk dengan efek Ken Burns
- Daftar fitur (9-12 detik): 3 poin muncul secara berurutan
- CTA (12-15 detik): "Belanja Sekarang" dengan animasi berdenyut
3. Props:
- hookText: string
- productImageUrl: string
- features: string[] (larik berisi 3 item)
- ctaText: string
- brandColor: string
4. Sertakan audio ducking saat teks muncul
Hasilkan semua file yang diperlukan agar ini berfungsi.
Claude Code akan menghasilkan template video lengkap yang siap produksi yang dapat Anda sesuaikan dan render dalam skala besar.
Memecahkan Masalah Umum
Masalah: "Tidak dapat menemukan modul 'remotion'"
# Solusi: Instal ulang dependensi
rm -rf node_modules
npm install
Masalah: Font tidak dimuat
// Tambahkan impor font ke komponen Anda
import { loadFont } from '@remotion/google-fonts/Inter';
const { fontFamily } = loadFont();
// Gunakan dalam gaya
style={{ fontFamily }}
Masalah: Video dirender hitam
- Periksa apakah komponen Anda mengembalikan konten yang terlihat
- Verifikasi
AbsoluteFillmemiliki warna latar yang diatur - Pastikan animasi tidak semuanya pada opasitas 0
Masalah: Claude Code tidak mengenali keterampilan Remotion
# Instal ulang keterampilan
npx skills add remotion-dev/skills
# Periksa apakah .claude/skills/remotion/SKILL.md ada
ls .claude/skills/remotion/
# Mulai ulang Claude Code
Masalah: Kesalahan ketidaksesuaian versi
# Periksa dan perbarui versi Remotion
npx remotion versions
# Ini sering memperbaiki masalah kompatibilitas
Membangun API pembuatan video? Coba Apidog secara gratis untuk merancang, menguji, dan mendokumentasikan endpoint Anda. Validasi skema permintaan, otomatisasi skenario pengujian, dan pastikan alur video Anda menangani kasus-kasus ekstrem dengan baik.