Rehber · 9 dakika · 18 Ekim 2026
Remotion nedir? React ile kodla video yapma rehberi
Remotion'da bir video, sıradan bir web sayfası gibi HTML, CSS, SVG ve JavaScript ile tarif edilir. Farkı, sayfanın zamana bağlı olmasıdır: bileşen "şu an kaçıncı karedeyim" sorusunun cevabına göre çizilir. 30 kare/saniyelik 10 saniyelik bir video 300 karedir; Remotion her kareyi tarayıcıda çizer, görüntüsünü alır ve kareleri ffmpeg ile videoya birleştirir.
Proje Şubat 2021'de yayımlandı (Product Hunt kaydı) ve geliştiricisi Jonny Burger'ın yan projesi olarak başladı (Startupticker). Türkiye'de ilgi 2026'da hızla arttı: Google Ads Anahtar Kelime Planlayıcı'ya göre "remotion" Ekim 2025'te ayda 170 kez aranırken Eylül 2026'da 4.400 kez arandı (18 Ekim 2026'da kontrol edildi).
Remotion nasıl çalışır?
Remotion'un birkaç temel kavramı var; hepsini bilmek ilk videoyu yazmaya yeter:
- Composition: videonun kimliği, genişliği, yüksekliği, kare hızı (fps) ve süresi. Dikey Reels için 1080 × 1920 ve 30 fps tipik bir seçimdir.
- useCurrentFrame(): o anda çizilen karenin numarasını verir. Bütün hareket bu sayıdan türetilir.
- interpolate() ve spring(): kare numarasını konuma, opaklığa, ölçeğe ya da bir sayaca çevirir; yumuşak giriş çıkışlar bunlarla yapılır.
- Sequence: bir sahneyi videonun belli bir anında başlatır, sahneleri art arda dizmeyi sağlar.
- Studio ve render: Studio tarayıcıda canlı önizleme açar; render komutu videoyu dosyaya yazar.
Aşağıdaki küçük bileşen, ilk 2 saniyede 0'dan 100'e sayan bir yüzde sayacı çizer:
import { AbsoluteFill, interpolate, useCurrentFrame } from "remotion";
export const Sayac = () => {
const kare = useCurrentFrame(); // 0, 1, 2 ... (30 fps'de 1 saniye = 30 kare)
const deger = Math.round(interpolate(kare, [0, 60], [0, 100], { extrapolateRight: "clamp" }));
return (
<AbsoluteFill style={{ justifyContent: "center", alignItems: "center", fontSize: 200 }}>
%{deger}
</AbsoluteFill>
);
};Bu yaklaşımın gücü tekrar ve veridir: aynı bileşene farklı bir sayı, isim ya da tablo verip yüzlerce farklı video üretebilirsiniz. Ayrıntılı başvuru için Remotion belgeleri.
Remotion nasıl kurulur? İlk video adım adım
- Node.js kurun. Remotion bir JavaScript kütüphanesidir; bilgisayarınızda Node.js ve bir kod düzenleyici olmalı.
- Projeyi oluşturun. Terminalde npx create-video@latest komutunu çalıştırın ve bir başlangıç şablonu seçin.
- Studio'yu açın. Proje klasöründe npx remotion studio ile tarayıcıda önizleme açılır; kodu değiştirdikçe video anında güncellenir.
- Bileşeni yazın. Her kareyi useCurrentFrame ile okunan kare numarasına göre çizen React bileşenleri yazın; süre, boyut ve fps Composition'da tanımlanır.
- Render alın. npx remotion render ile videoyu MP4 olarak dışa aktarın. Çok sayıda video için sunucuda ya da bulutta render kurulabilir.
İlk projede seslendirme, müzik ve altyazı yoktur; bunları siz eklersiniz. Seslendirmeyi kelime kelime zamanlamak (bir sayının söylendiği anda sayacın başlaması gibi) ayrı bir ses servisi ve biraz kod gerektirir.
Remotion ücretli mi? Lisans ve fiyatlar
Remotion'un lisans sayfasına göre bireyler ve en çok 3 çalışanı olan kâr amaçlı şirketler Remotion'u ücretsiz kullanabilir; ücretsiz sürümde özellik kısıtı yoktur. Şirket 4 kişiyi geçince şirket lisansı gerekir. Fiyat sayfasında 18 Ekim 2026 itibarıyla üç seçenek var:
| Plan | Kimin için | Ücret |
|---|---|---|
| Ücretsiz lisans | Bireyler, en çok 3 çalışanlı şirketler, kâr amacı gütmeyenler | Ücretsiz |
| Remotion for Creators | Kendi videolarını elle üreten ekipler | Kişi (koltuk) başı aylık 25 dolar |
| Remotion for Automators | Otomatik video üreten ürünler | Render başına 0,01 dolar, aylık en az 100 dolar |
| Enterprise | Özel koşul isteyen büyük şirketler | Aylık 500 dolardan başlıyor |
Remotion açık kaynak değildir: kaynak kodu görülebilir ama kendi lisansıyla dağıtılır. Ticari bir projede kullanmadan önce lisans koşullarını kendi durumunuza göre kontrol edin.
Remotion mu, After Effects mi, Canva mı?
| Remotion | After Effects | Canva | Motif (AI Video Yap) | |
|---|---|---|---|---|
| Nasıl çalışılır | React koduyla | Zaman çizelgesinde elle | Hazır şablonu sürükle bırak | Konu yazılır, kodu yapay zeka yazar |
| Kod bilgisi | Gerekir | Gerekmez | Gerekmez | Gerekmez |
| Toplu ve veriye bağlı video | Çok güçlü | Zor | Sınırlı | Her video ayrı üretilir |
| Seslendirme ve altyazı | Kendiniz eklersiniz | Kendiniz eklersiniz | Araç içinde, elle | Türkçe seslendirme ve kelime kelime altyazı hazır |
| Kimin için | Yazılımcılar, video ürünü kuranlar | Hareketli grafik tasarımcıları | Hızlı sosyal medya tasarımı | Kod ve kurgu bilmeden anlatım videosu isteyenler |
Kod yazmadan Remotion yöntemiyle video yapılır mı?
Evet. AI Video Yap'ın Motif aracı Remotion'u arka planda kullanır: siz konuyu yazar, bir şablon, görsel stil ve Türkçe ses seçersiniz. Motif önce senaryoyu, sonra seslendirmeyi kelime zamanlarıyla hazırlar ve videonun Remotion kodunu bu zamanlara göre yazar; render'dan önce birkaç kareye bakıp taşan ya da üst üste binen yazıyı düzeltir. Yazılar kodla çizildiği için Türkçe karakterler ve rakamlar ekranda birebir doğru çıkar.
- 46 şablon: biliyor muydunuz, zaman çizelgesi, ilk 5, karşı karşıya, ürün tanıtımı, kampanya, tarif, quiz ve daha fazlası.
- 30, 45, 60 ya da 90 saniye; dikey, yatay ya da kare.
- Bedel: 30 saniyelik video 139, 60 saniyelik 178 kredi. Hazırlanması 10 ile 15 dakika sürer; tamamlanmayan üretimin kredisi iade edilir.
Motif ile üretilmiş örnekler
Görüntüsü Remotion koduyla çizildi, sesi Türkçe yapay zeka seslendirmesi. Düzenlenmeden yayımlandı.
Birkaç Motif şablonu
Zaman çizelgesi
Yıllar bir çizgi üzerinde, kamera ilerledikçe.
Bu şablonla deneVeri hikâyesi
Çizgi grafik, kırılma noktası ve yorum.
Bu şablonla deneSayılarla
Art arda dev sayaçlar ve bağlamları.
Bu şablonla deneKod anlatımı
Kod penceresi, satır vurgusu ve terminal çıktısı.
Bu şablonla deneSıralama yarışı
Yıllara göre yer değiştiren çubuklar.
Bu şablonla deneÜrün tanıtımı
Ürün ortada, özellik etiketleri ve fiyat.
Bu şablonla dene
Bütün şablonlar ve önizlemeleri Motif sayfasında.
Sık sorulanlar
Remotion nedir?
Remotion, videoları React bileşenleriyle kod yazarak üretmeyi sağlayan bir JavaScript kütüphanesidir. Her kare, o karenin numarasına göre çizilen bir web sayfası gibidir; Remotion bu kareleri sırayla görüntüleyip MP4 gibi bir video dosyasına çevirir.
Remotion ücretsiz mi?
Bireyler ve en çok 3 çalışanı olan kâr amaçlı şirketler için ücretsizdir; ücretsiz sürümde özellik kısıtı yoktur. 4 ve daha fazla kişilik şirketler şirket lisansı almalıdır. 18 Ekim 2026 itibarıyla fiyat sayfasında kişi başı aylık 25 dolardan başlayan planlar ve render başına ücretlendirilen otomasyon planı var; güncel koşullar remotion.dev'de.
Remotion açık kaynak mı?
Hayır. Remotion'un kaynak kodu GitHub'da açıktır ama kendi lisansıyla dağıtılır; resmi belgeler onu açık kaynak değil, kaynağı görülebilir (source-available) yazılım olarak tanımlar. Ticari kullanımdan önce lisans sayfasını okumak gerekir.
Remotion kullanmak için kod bilmek gerekir mi?
Evet, Remotion ile doğrudan çalışmak için React ve JavaScript bilmek gerekir. Kod yazmak istemiyorsanız AI Video Yap'taki Motif aynı yöntemi kullanır: konuyu yazar, 46 şablondan birini seçersiniz; Remotion kodunu, Türkçe seslendirmeyi ve altyazıyı Motif hazırlar.
Ayrıntı: Motif ile kodla video
Remotion ile After Effects arasındaki fark nedir?
After Effects zaman çizelgesinde elle çalışılan bir hareketli grafik programıdır; Remotion'da ise video kodla tanımlanır. Tek bir özenli iş için After Effects daha esnektir; veriye bağlı, tekrar eden ya da yüzlerce kişiselleştirilmiş video gerektiğinde kod tabanlı üretim daha hızlıdır.
Remotion ile hangi videolar yapılır?
Hareketli grafik ve yazı ağırlıklı videolar: bilgi ve eğitim videoları, veri ve grafik animasyonları, sayaçlar, zaman çizelgeleri, altyazılı sosyal medya videoları, ürün tanıtımları, yıl özeti gibi kişiselleştirilmiş videolar. Gerçekçi insan ya da doğa görüntüsü üretmez; onun için video modelleri kullanılır.
Remotion kodunu Motif yazsın
Konuyu yazın, şablonu seçin; Türkçe seslendirmeli, altyazılı video 10 ile 15 dakikada hazır. 30 saniye 139 kredi.
Motif ile video oluşturunYazar ve yayın sorumlusu
Emirhan Güven · AI Video Yap'ın kurucusu
Rehberlerdeki model, kredi ve fiyat bilgileri sitede gerçekten sunulan modellerden ve fiyat listesinden alınır; dış kaynaklar ve kontrol tarihleri yazının içinde yazar. Bir hata görürsen destek@aivideoyap.com adresine yaz, düzeltelim.