Blog · 15 Ekim 2026 · 5 dk okuma

Remotion ve Claude Code ile kodla video üretmek

Video üretmek denince akla zaman çizelgesi, sürükle bırak ve saatlerce süren dışa aktarmalar gelir. Remotion ise başka bir yol sunar: videoyu React ile kod olarak yazarsın. Kod olunca da işin büyük kısmını bir kodlama agent'ına devredebilirsin. Bu yazıda Remotion'un nasıl çalıştığını, Claude Code ile verimli bir iş akışının nasıl kurulacağını ve nerede tökezleyeceğini anlatıyoruz.

Neden videoyu kodla yazmalı?

Remotion'da her video bir React bileşenidir. Bileşen, "şu an kaçıncı karedeyim?" sorusunun cevabını alır ve o kare için ne görüneceğini döndürür. Remotion bu bileşeni her kare için başsız (headless) bir Chrome'da çizer, kareleri birleştirir ve sana bir mp4 verir.

Bu yaklaşımın üç büyük faydası var:

Tekrarlanabilirlik. Aynı kod her zaman aynı videoyu üretir. Bir rengi değiştirip yeniden işlemek bir komut kadar sürer.
Parametreler. Ürün adı, fiyat ya da dil bir prop'tur. Bir CSV'deki 50 ürün için 50 ayrı video üretmek bir döngüdür.
Sürüm kontrolü. Video git'te yaşar. Neyin neden değiştiğini diff'ten görürsün.

Ve en önemlisi: dil modelleri React yazmakta iyidir. "Dördüncü saniyede başlık sağdan kayarak girsin" demek, bir agent için birkaç satırlık bir değişikliktir.

Kurulum

Yeni bir proje için Node yüklü bir makinede şunu çalıştır ve bir şablon seç:

npx create-video@latest
cd video-projem
npm install
npx remotion studio

Studio, videonu tarayıcıda kare kare izleyebildiğin ve prop'larını değiştirebildiğin bir önizleme açar. Bitmiş videoyu işlemek için:

npx remotion render Reel out/reel.mp4

Remotion ihtiyaç duyduğu başsız Chrome'u ilk işlemede kendisi indirir; güncel sürümler ffmpeg'i de kendisiyle birlikte getirir. Linux sunucularda Chrome'un istediği bazı sistem kütüphaneleri eksik olabilir; işleme bu yüzden hata verirse, hata mesajındaki kütüphaneleri kurman gerekir.

Temel parçalar

Remotion'u anlamak için birkaç kavram yeter. useCurrentFrame() o anki kare numarasını verir. interpolate() bir aralığı başka bir aralığa eşler; örneğin 0 ile 15. kareler arasında opaklığı 0'dan 1'e çıkarır. spring() fizik tabanlı, yaylanan hareketler üretir. <Sequence> bir parçayı belli bir karede başlatır ve bitirir.

import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";

export const Baslik: React.FC<{ metin: string }> = ({ metin }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const olcek = spring({ frame, fps, config: { damping: 200 } });
  const opaklik = interpolate(frame, [0, 15], [0, 1], { extrapolateRight: "clamp" });

  return (
    <AbsoluteFill style={{ justifyContent: "center", alignItems: "center", background: "#05060C" }}>
      <h1 style={{ color: "white", fontSize: 96, opacity: opaklik, transform: `scale(${olcek})` }}>
        {metin}
      </h1>
    </AbsoluteFill>
  );
};

Videonun ölçüleri ve süresi src/Root.tsx içinde bir <Composition> ile tanımlanır. 30 fps'de 450 kare, 15 saniyelik dikey bir reels demektir:

<Composition
  id="Reel"
  component={Reel}
  durationInFrames={450}
  fps={30}
  width={1080}
  height={1920}
  defaultProps={{ metin: "Merhaba" }}
/>

Claude Code ile iş akışı

Agent'a "bana güzel bir video yap" demek, sonucu şansa bırakmaktır. Aşağıdaki akış, birkaç denemede kullanılabilir bir video almanı sağlar.

1. Kuralları CLAUDE.md'ye yaz. Proje kökündeki bu dosyayı Claude Code her oturumda okur. Video projesi için iyi bir başlangıç:

# Video stüdyosu
- Her video src/ altında bir composition; ölçü, fps ve süre açıkça yazılı olsun.
- Dikey reels: 1080x1920, 30 fps. Yatay anlatım: 1920x1080.
- Önizleme: npx remotion studio. İşleme: npx remotion render <Id> out/<ad>.mp4
- Aynı anda tek video işle; küçük makinede --concurrency=1 kullan.
- Kontrol için önce tek kare al: npx remotion still <Id> out/kare.png --frame=<n>

2. Brif ver, dilek değil. İyi bir istem süreyi, ölçüyü, sahneleri ve kapanışı söyler: "Ürünümüz için 15 saniyelik dikey bir reels yap. İlk saniyede dikkat çeken bir cümle, ardından üç hızlı fayda sahnesi, sonda 'Hemen dene' yazan bir kapanış kartı. Renkler koyu lacivert ve beyaz. out/reel.mp4 olarak işle."

3. Önce tek kare. Bütün videoyu işlemek dakikalar sürer; tek bir kareyi PNG olarak almak saniyeler. Agent'tan kritik anların karelerini almasını ve onlara bakmasını iste. Claude görselleri okuyabildiği için taşan bir yazıyı ya da ekran dışında kalan bir öğeyi kendisi fark edebilir:

npx remotion still Reel out/kare-60.png --frame=60

4. Sahne sahne ilerle. Bir seferde tek sahneyi değiştir, kontrol et, commit et. Böylece beğendiğin bir hâle her zaman geri dönebilirsin.

5. En son tam işleme. Her şey yerine oturduğunda videoyu bir kez baştan sona işle.

Seslendirme ve altyazı

Seslendirme için bir metin-konuşma servisiyle (örneğin ElevenLabs) bir mp3 üretip public/ klasörüne koyarsın ve videoya <Audio> bileşeniyle eklersin. Metni scripts/ altında bir dosyada tutmak, sesi değiştirmen gerektiğinde işi tekrarlanabilir kılar. API anahtarını koda değil, bir ortam değişkenine koy ve .gitignore'a eklediğin bir .env dosyasında tut.

Altyazıda en önemli şey kelimelerin zamanlarıdır. Bazı ses servisleri kelime zamanlarını kendisi verir; vermiyorsa Remotion'un Whisper entegrasyonuyla sesi yazıya döküp kelime zamanlarını çıkarabilirsin. Agent'tan kelime kelime vurgulanan, telefonda rahat okunan büyük altyazılar yazmasını istemek tek bir istemle olur.

Bir örnek: tek şablondan 20 ürün videosu

Kodla video yazmanın en çok işe yaradığı yer, aynı kalıbın farklı içerikle tekrarlandığı işler. Diyelim ki bir e-ticaret sitesinin 20 ürünü için 15 saniyelik tanıtım videoları istiyorsun. Ürün adı, fiyat, görsel ve renk birer prop olur; şablon tek bir composition'dır. Tek bir ürünü komut satırından denemek için:

npx remotion render Urun out/kahve-makinesi.mp4 \
  --props='{"ad":"Kahve makinesi","fiyat":"2.499 TL","gorsel":"urunler/kahve.png"}'

Agent'a ürünleri bir CSV'den okuyup her satır için bu komutu çalıştıran küçük bir betik yazdırırsın. Betik scripts/ altında kalır; yeni ürün geldiğinde CSV'ye bir satır ekleyip betiği yeniden çalıştırmak yeter. Burada dikkat edilecek iki şey var: uzun ürün adlarının taşmaması için yazı boyutunu metnin uzunluğuna göre küçülten bir kural koy ve ilk birkaç videoyu tek tek izlemeden hepsini işletme. Hatalı bir şablonu 20 kez işlemek, bir kez düzeltmekten çok daha pahalı.

Bellek ve hız

Remotion işlemeyi hızlandırmak için birden fazla Chrome sekmesini aynı anda açar. Bu, büyük bir makinede harika, 2 GB bellekli küçük bir sunucuda ise işlemeyi bellek yetersizliğinden çökertebilir. Küçük makinelerde eşzamanlılığı bire indir:

npx remotion render Reel out/reel.mp4 --concurrency=1

Daha yavaş ama güvenilir. 4 GB ve üstünde daha rahat çalışırsın. İşleme süresi videonun uzunluğuna, çözünürlüğe ve efektlerin ağırlığına bağlı; basit animasyonlu 15 saniyelik bir reels bile küçük bir sunucuda birkaç dakika sürebilir. Bu yüzden işlemeyi gece kuyruğuna koymak ve sabah sonuca bakmak iyi bir alışkanlık.

Lisans

Remotion açık kaynaklı ama tamamen ücretsiz değil: bireyler ve en fazla 3 kişilik şirketler ücretsiz kullanabilir, daha büyük şirketlerin şirket lisansı alması gerekir. Güncel koşullar için remotion.dev/license sayfasına bak. Videoda kullandığın yazı tiplerinin, müziklerin ve görsellerin lisansları da ayrıca senin sorumluluğunda.

Nerede zorlanır?

Remotion, kamera görüntülerinin yoğun kurgusu için değil; hareketli grafik, metin animasyonu, veriye dayalı videolar ve ürün tanıtımları için parlıyor. Ağır 3B sahneler yavaş işlenir. Agent'ın estetik kararları da her zaman senin zevkine uymaz: renk, tempo ve tipografi konusunda net olmak, "daha profesyonel olsun" demekten çok daha iyi sonuç verir. Elinde bir marka kılavuzu varsa CLAUDE.md'ye ekle.

Orkio'da

Orkio'da Video kitini seçersen kutuna /workspace/video-studio içinde hazır bir Remotion projesi ve yukarıdaki kuralları içeren bir CLAUDE.md kurulur. Agent'lar senin Claude hesabınla çalışır, işleme kutuda sürer ve uygulamayı kapatsan da devam eder. Video işleme bellek istediği için bu kit için büyük kutuyu öneriyoruz; küçük kutuda da --concurrency=1 ile çalışır, yalnızca daha yavaş. Kendi makinende denemek istersen yukarıdaki komutlar aynen geçerli.