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.
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ış:
- 1Composition 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.
- 2useCurrentFrame Hook'u: O anki kare numarasını alıp interpolasyon fonksiyonuyla elementlerin opaklığını, konumunu ve ölçeğini matematiksel olarak yönetiyorum.
- 3Ses ve Müzik Katmanı: Arka plan seslerini ve efektleri doğrudan kod içerisinden kare bazlı senkronize ediyorum.
- 4Headless 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
- 11. Proje Başlatma: Terminalde 'npx create-video@latest' çalıştırarak hazır şablonu indirdim.
- 22. Canlı Stüdyoyu Açma: 'npm run dev' komutu ile tarayıcıda canlı video önizleme stüdyosuna bağlandım.
- 33. Render Alma: 'npx remotion render Root MyVideo out/video.mp4' ile doğrudan yüksek kaliteli render aldım.