Remotion: Videoyu React ile kodlamak, artık ajana yazdırmak

Video, zamana bağlı bir fonksiyon

Remotion, 2021’den beri var olan bir React kütüphanesi. Fikri basit: Bir video, art arda gelen resimlerden oluşur. Her resmi bir React bileşeni çizsin.

Bileşenin içinde useCurrentFrame() diye bir hook var. Bu hook o an hangi karede olduğunu söylüyor. Sen de kare numarasına göre ne çizileceğine karar veriyorsun: 30. karede başlık soldan girsin, 90. karede logo büyüsün gibi. Yani video, girdisi zaman olan saf bir fonksiyon (pure function). Aynı kare numarası her seferinde aynı görüntüyü veriyor.

Bunun bir bedeli var: Normal CSS animasyonlarını kullanamıyorsun. Onlar kendi saatleriyle çalıştığı için kareyle senkron kalmıyor ve görüntü titreyebiliyor. Animasyonu kare numarasından hesaplaman gerekiyor.

Video nasıl dosyaya dönüşüyor?

Jonny Burger’in anlattığına göre işin özü şaşırtıcı derecede sade: Remotion arka planda bir tarayıcı açıyor, istenen kareye gidiyor, görüntüyü yakalıyor ve FFmpeg ile videoya çeviriyor.

Her kare bağımsız olduğu için iş kolayca bölünüyor. Remotion Lambda, videoyu parçalara ayırıp her parçayı ayrı bir AWS Lambda fonksiyonunda çiziyor, sonra parçaları birleştiriyor. Belgelere göre üst sınır aynı anda 200 fonksiyon. Video uzadıkça paralellik daha çok işe yarıyor. Burger, bir saatlik videonun da bu şekilde hızla çizilebildiğini söylüyor.

Patlamanın sebebi: Ajan becerileri

Wes Bos’un aktardığına göre Remotion’ın günlük npm indirme sayısı birkaç ay içinde yaklaşık 125 binden 800 bine çıktı. Burger, dönüm noktasının ajan becerileri olduğunu düşünüyor. npx skills add remotion-dev/skills komutu, Claude Code ya da Cursor gibi ajanlara Remotion’da nasıl animasyon yazılacağını, altyazı ekleneceğini ve video çizileceğini anlatan hazır talimatlar kuruyor.

Sonuç: Kullanıcıların çoğu artık teknik olmayan kişiler. Ajana “ürünüm için kısa bir tanıtım videosu yap” diyorlar, ajan Remotion kodunu yazıyor. Bölümde bunun karanlık tarafı da konuşuldu: Aynı kolaylık, platformların ayıklamaya çalıştığı seri üretim düşük kaliteli videoları da besliyor.

Para tarafı da ilginç. Remotion’ın kaynak kodu açık ama lisansı klasik açık kaynak değil. Bireyler, kâr amacı gütmeyen kuruluşlar ve en fazla üç çalışanlı şirketler ücretsiz kullanıyor, daha büyük şirketler lisans alıyor. Burger, projeyi bu modelle sürdürdüklerini söylüyor.

Tarayıcının video tarafında iki yenilik

WebCodecs: Tarayıcının video kodlayıcı ve çözücülerine doğrudan erişim sağlayan API. Remotion, video dosyalarını okuyup yazmak için bunun üzerine kurulu Mediabunny kütüphanesine geçti. Mediabunny, MP4 ve WebM gibi dosyaları tamamen tarayıcıda okuyup dönüştürebilen, bağımlılıksız bir TypeScript kütüphanesi.

HTML-in-Canvas: Chrome’da deneme aşamasındaki bu API, gerçek HTML öğelerini bir canvas’a çizmeyi sağlıyor. Normalde HTML’in üstüne bulanıklık ya da vinyet gibi piksel efektleri uygulayamazsın. Bu API ile CSS’le kurduğun bir sahneye shader uygulayabiliyorsun. API’yi Google I/O 2026 yazımızda da anlatmıştık. Burger heyecanlı ama temkinli: API değişebilir, hatta kaldırılabilir.

Sonra ne oldu?

Remotion, 4.0.455 sürümünden itibaren HTML-in-Canvas ile video çizmeyi destekliyor. Bunun için bayrağı açık, özel derlenmiş bir Chrome’u varsayılan yaptı. Bölümde Burger’in yakındığı bir sınır da kalktı: İç içe HTML-in-Canvas öğeleri, Ekim 2026’daki 4.0.534 sürümüyle destekleniyor. API ise Chrome’da hâlâ deneysel. Ayrıca Remotion 5.0 için hazırlanan yeni lisans taslağı, ekip büyüklüğüne sözleşmeli çalışanları da katmayı öneriyor.

Düşün

• Her hafta elle hazırladığın bir görsel ya da video var mı? Hangi kısmı bir şablon ve birkaç parametreyle üretilebilir?
• Bir aracı herkes için kolaylaştırmak, onu kötüye kullananları da güçlendiriyorsa, aracın yapımcısının sorumluluğu nerede başlar?

Kendi cümlelerimizle yazılmış bir özettir, çeviri değildir. Tüm kaynaklar yukarıda.