Yapay Zekâ ile Kaydırdıkça Hareket Eden Site: Video Kareli Scroll Animasyonu

Ürün tanıtım sitelerinde son dönemin en çok paylaşılan efekti: siz aşağı kaydırdıkça bir kulaklık parçalarına ayrılıyor, bir kahve çekirdeği fincana dönüşüyor ya da kamera bir şehrin içinden geçip bir sonraki sahneye uçuyor. Eskiden bunun için bir 3D ekip ve haftalar gerekiyordu; şimdi yapay zekâyla üretilmiş bir video ve birkaç satır kodla yapılabiliyor.

Bu efektlerin çoğu aynı basit fikre dayanıyor: kısa bir videonun karelerini sırayla gösteren bir tuval (canvas), kaydırma çubuğuna bağlanır. Aşağı kaydırdıkça video ileri, yukarı kaydırdıkça geri sarılır.

Bu rehberde iki yol anlatıyoruz:

Kendi yaptığınız yol: Google Flow ile tek bir video üretin, karelerini çıkarın ve Claude Code ya da Codex'e kaydırmaya bağlatın. Ucuz ve tamamen sizin kontrolünüzde.
Skill ile tam otomatik yol: Açık kaynak scroll-world skill'i sahneleri, videoları ve geçişleri kendisi üretip baştan sona bir "3D dünyada uçuş" sitesi kurar. Daha etkileyici ama üretim ücreti daha yüksek.

Adım Adım Uygulama

Kaydırmalı animasyon bir film değil, tek bir dönüşümdür. Başlamadan önce üç şeyi yazın:

Başlangıç karesi: Ziyaretçinin sayfayı açınca gördüğü şey (ör. kapalı bir kahve paketi).
Bitiş karesi: Kaydırma bittiğinde ulaşılan şey (ör. buharı tüten bir fincan).
Ara aşamalar: Arada metinle açıklanacak 3-4 durak (paket açılıyor, çekirdekler dökülüyor, öğütülüyor, fincana akıyor).

Her durak için bir cümlelik açıklama hazırlayın; bunlar animasyonun yanında sırayla belirecek.

İpucu

Ürünün kendisi dönüşmüyorsa kamerayı hareket ettirin: bir otel için girişten odaya, bir restoran için mutfaktan masaya uzanan tek ve kesintisiz bir kamera yolu.

Videonun tutarlı olması için önce iki görsel üretin. Gemini'de ya da Google Flow'un görsel modunda:

Düz, koyu gri bir stüdyo zemini üzerinde kapalı, mat siyah bir kahve paketi. Paketin üzerinde yazı yok. Tek yönden gelen yumuşak stüdyo ışığı, ürün fotoğrafı tarzı, ortalanmış. Yatay 16:9.

Sonra aynı sohbette bitiş karesini isteyin: "Aynı zemin, aynı ışık ve aynı kamera açısı; bu kez paketin yerinde buharı tüten beyaz bir fincan kahve." Aynı sohbette üretmek, iki karenin ışığını ve açısını eşleştirir.

İpucu

Arka planı düz ve sade tutun. Kaydırmalı animasyonda arka plan her karede değişirse görüntü titrer; ürün değişsin, sahne sabit kalsın.

labs.google/flow adresinde yeni bir proje açın.
İlk ve son kareden video modunu seçin; başlangıç ve bitiş karelerini yükleyin.
Yatay 16:9 ve 8 saniye seçin. Denemeler için Veo 3.1 Lite, son üretim için Fast ya da Quality kullanın.
Geçişi tarif edin:

The coffee bag slowly opens by itself, roasted coffee beans pour out in slow motion, swirl into the air, grind into fine powder and flow into a white cup that fills with steaming coffee. The camera stays completely still. Smooth, continuous motion, no cuts. Studio lighting stays the same.

Kameranın sabit kalması çok önemli. Kamera hareket ederse kaydırma sırasında sayfa sallanıyormuş gibi görünür.

İpucu

Videoyu sesiz kullanacağınız için istemde ses tarif etmeyin. Ses tarifine ayrılan dikkat görüntünün akışkanlığından gider.

Dikkat Edilecek Nokta

Kendi ürününüz olmayan bir markanın ürününü ya da logosunu videoda kullanmayın.

Videoyu indirin ve proje klasörünüze video.mp4 adıyla koyun. Kareleri çıkarmak için ücretsiz ffmpeg aracını kullanın. İsterseniz bu adımı da kodlama ajanına yaptırabilirsiniz; komut şöyle:

mkdir -p frames
ffmpeg -i video.mp4 -vf "fps=15,scale=1280:-2" -c:v libwebp -quality 75 frames/kare-%03d.webp

fps=15: 8 saniyelik videodan 120 kare çıkarır. Kaydırma animasyonu için genellikle yeterlidir.
scale=1280: Kareleri 1280 piksel genişliğe küçültür.
libwebp -quality 75: Kareleri küçük boyutlu WebP olarak kaydeder.

Telefon için ikinci, daha küçük bir set çıkarın (ör. scale=720, frames-mobil klasörü).

İpucu

Toplam kare boyutunu kontrol edin. Masaüstü seti 3-5 MB'ı, telefon seti 1-2 MB'ı geçiyorsa kare sayısını (fps) ya da kaliteyi düşürün.

Proje klasöründe Claude Code ya da Codex'i açın ve şu istemi verin:

frames/ klasöründeki kare-001.webp ... kare-120.webp dosyalarıyla kaydırmaya bağlı bir animasyon bölümü yap.

- Bölüm ekrana sabitlensin (sticky); kullanıcı aşağı kaydırdıkça kareler canvas üzerinde sırayla çizilsin, yukarı kaydırınca geri gitsin.
- Animasyon yaklaşık 4 ekran yüksekliği boyunca sürsün.
- Kaydırmanın %20, %45, %70 ve %95 noktalarında yanda şu metinler sırayla belirsin: [4 açıklama cümleniz].
- İlk kare hemen görünsün; diğer kareler sayfa açıldıktan sonra arka planda yüklensin.
- Telefon genişliğinde frames-mobil/ klasörünü kullan.
- prefers-reduced-motion açıksa animasyon yerine yalnızca son kareyi ve metinleri göster.
- Harici kütüphane kullanma; düz JavaScript ve requestAnimationFrame yeterli.

Bitirince sayfayı yerelde açıp masaüstü ve telefon genişliğinde dene.

Ajan sayfayı kurduktan sonra yerel sunucuda açıp kaydırarak deneyin. Akışı beğenmezseniz ayar isteyin: "animasyon çok hızlı bitiyor, 6 ekran yüksekliğine yay".

İpucu

Kaydırma yönünü ve hızını yalnızca masaüstü fareyle değil, telefonda parmakla da deneyin. Dokunmatik kaydırma çok daha hızlıdır; animasyon telefonda bir anda bitiyorsa mobilde daha uzun bir kaydırma alanı isteyin.

Tek bir ürün dönüşümü yerine kameranın birden fazla sahne arasında kesintisiz uçtuğu bir site istiyorsanız açık kaynak scroll-world skill'ini kullanabilirsiniz. Skill bir mülakatla işinizi öğrenir, sahne sayısını ve bütçeyi onaylatır, görselleri ve videoları üretir, kareleri çıkarır ve kaydırma motorunu bağlar.

Claude Code'da kurulum:

/plugin marketplace add oso95/scroll-world
/plugin install scroll-world@scroll-world

Codex ve diğer ajanlar için: npx skills add oso95/scroll-world. Kurulumdan sonra ajanda /scroll-world yazarak başlayın.

Bilmeniz gerekenler:

Skill görsel ve video üretimi için ücretli servisler kullanır (Higgsfield ya da Monid hesabı ve kredisi gerekir). Ayrıca bilgisayarınızda ffmpeg ve Python kurulu olmalı.
Harcamadan önce toplam maliyet tahminini gösterir; onaylamadan üretime geçmez.
Telefon için ayrı, dikey bir sahne zinciri üretebilir; bu video maliyetini yaklaşık iki katına çıkarır.

İpucu

scroll-world'ü ilk denemede en az sahneyle (2-3 sahne) ve düşük çözünürlükle çalıştırın. Sonucu ve maliyeti gördükten sonra sahne sayısını artırın.

Dikkat Edilecek Nokta

Ücretli servis hesaplarınıza harcama sınırı koyun. Otomatik çalışan bir ajan, beklediğinizden fazla üretim yaparsa fatura sürpriz olabilir.

İlk açılış: Sayfa açıldığında ilk kare ve başlık hemen görünmeli. Bütün kareleri yüklemeden içerik göstermeyen sayfa, ziyaretçiyi boş ekranla bekletir.
Telefon verisi: Mobil kare setinin toplam boyutunu kontrol edin; mobil veriyle açan ziyaretçiyi düşünün.
Metin: Animasyondaki açıklamalar sayfanın HTML'inde gerçek metin olarak bulunmalı; görselin üzerine yazılmış yazılar Google'da ve ekran okuyucularda görünmez.
Hareket hassasiyeti: "Hareketi azalt" ayarını açan ziyaretçide animasyon durmalı.

İpucu

Chrome'da F12 → Lighthouse ile mobil hız raporu alın ve raporu ajana yapıştırıp "bunları düzelt" deyin. Kaydırmalı animasyonlarda en sık çıkan sorun, görsellerin gereğinden büyük olmasıdır.

Bu adımlarla ziyaretçinin kaydırma çubuğuyla oynattığı, telefonda da akıcı çalışan bir tanıtım sayfası elde edersiniz. Efektin gücü videonun kalitesinden çok hikâyesinden gelir: tek bir dönüşüm, net bir başlangıç ve bitiş, her aşamada bir cümlelik açıklama.

Sitenin temelini kurmak için Yapay Zekâ ile Web Sitesi Nasıl Yapılır?, tasarımın sıradan görünmemesi için Skill ve Brief ile Özgün Tasarım, videoyu üretmek için Google Flow Nasıl Kullanılır? rehberlerine bakın. Kodlama ajanları için Claude Code ve OpenAI Codex sayfalarını inceleyebilirsiniz.

Sık sorulan sorular

Bu siteler çok mu yavaş açılır? Dikkat edilmezse evet. Her kare bir görseldir; 200 karelik bir animasyon birkaç megabayta çıkabilir. Kare sayısını sınırlamak, WebP biçimi kullanmak, telefona daha küçük kareler göndermek ve kareleri sayfa açıldıktan sonra yüklemek bu sorunu çözer.

scroll-world kullanmak ne kadar tutar? Skill'in kendisi ücretsiz ve MIT lisanslı; ama görselleri ve videoları ücretli yapay zekâ servisleriyle üretir. Proje belgelerine göre altı sahneli 1080p bir site birkaç on dolar tutabilir; skill harcamadan önce toplam tahmini gösterir.

Kod bilmem gerekiyor mu? Kodu ajan yazar; ama bir proje klasörü açmayı, terminalde bir komut çalıştırmayı ve sayfayı yerelde açıp denemeyi bilmeniz gerekir. Bu yüzden rehberi orta seviye olarak işaretledik.