Skip to content
← Tüm Yazılar

Web Video / React Engine

Remotion: React & Yapay Zekâ Ajanlarıyla Programatik Video Oluşturma

Geleneksel video yazılımlarında timeline sürükleyip keyframe ayarlamaktan bıkmış bir yazılımcı olarak Remotion ile tanıştığımda ufkum açıldı. React bileşenleriyle nasıl programatik video ürettiğimi ve Claude Code ile entegre ettiğimi anlatıyorum.

Tarih 11 Ağustos 20269 dk okuma
Remotion: React & Yapay Zekâ Ajanlarıyla Programatik Video Oluşturma

Yazılımcı olarak pazarlama veya teknik ürün tanıtımları için video hazırlamam gerektiğinde kendimi hep After Effects veya Premiere'in karmaşık pencerelerinde kaybolmuş bulurdum. Bir metni değiştirmek veya yeni bir veri çıktısını videoya basmak için saatlerce timeline üzerinde keyframe sürüklemek geliştirici ruhuma tamamen tersti.

remotion-dev/remotion ile karşılaştığım an bu çileyi geride bıraktım. Remotion, videoyu bir arayüz programı gibi değil; doğrudan React, CSS, SVG ve Canvas kodları yazarak kare kare oluşturmanızı sağlıyor.

Remotion Mimarisi: Kod Nasıl MP4 Oluyor?

Kendi projelerimde bir Remotion sahnesi kurarken kullandığım temel akış:

  1. 1
    Composition Tanımı: Videonun süresini, çözünürlüğünü (1080x1920 veya 1920x1080) ve kare hızını (60 FPS) standart bir React bileşeni gibi tanımlıyorum.
  2. 2
    useCurrentFrame Hook'u: O anki kare numarasını alıp interpolasyon fonksiyonuyla elementlerin opaklığını, konumunu ve ölçeğini matematiksel olarak yönetiyorum.
  3. 3
    Ses ve Müzik Katmanı: Arka plan seslerini ve efektleri doğrudan kod içerisinden kare bazlı senkronize ediyorum.
  4. 4
    Headless Chromium Render: 'remotion render' komutunu verdiğimde arka planda headless bir Chromium motoru tüm React ağacını saniyede 60 kare kusursuz bir MP4 çıktısına basıyor.

Claude Code ve Ajanlarla Video Üretimi

Remotion'ın beni en çok etkileyen tarafı, yapay zekâ kodlama ajanlarıyla (Claude Code, Cursor) olan uyumu oldu. Ajanıma sadece 'Bana bu API metriklerini anlatan 15 saniyelik şık bir ürün teaser'ı hazırla' dediğimde, ajanın Remotion bileşenlerini ve animasyon eğrilerini kendiliğinden kodlayabildiğini gördüm.

Hızlı Kurulum ve Başlangıç Adımlarım

  1. 1
    1. Proje Başlatma: Terminalde 'npx create-video@latest' çalıştırarak hazır şablonu indirdim.
  2. 2
    2. Canlı Stüdyoyu Açma: 'npm run dev' komutu ile tarayıcıda canlı video önizleme stüdyosuna bağlandım.
  3. 3
    3. Render Alma: 'npx remotion render Root MyVideo out/video.mp4' ile doğrudan yüksek kaliteli render aldım.