Scroll Yaptıkça Sahnesi Değişen Bir Web Sitesi Nasıl Yapılır: scrollcraft + Gemini Rehberi

Scroll yaptıkça bir sahneden diğerine kesintisiz akan, sinematik web siteleri normalde tasarım ajanslarının haftalarca uğraşıp ürettiği, yüksek bütçeli işlerdir. Bu rehberde, aynı efekti iki araç kullanarak biri video üretimi, diğeri site inşası için oldukça düşük bir maliyetle nasıl kurabileceğinizi adım adım anlatıyoruz.

Kullanılan Araçlar

• Gemini (Veo): Sahne videolarını üretmek için.
• scrollcraft: Bu videoları scroll'a bağlayıp siteye yerleştiren, Claude Code için ücretsiz bir skill.

Adım 1: Sahne Videolarını Üretme

Gemini uygulamasında, "resimden video" (image-to-video) özelliğini kullanarak birbirinin devamı olan klipler üretiyorsunuz. Yöntem şu:

1. İlk sahneyi bir metin promptuyla üretin (örnek: bir masadaki küre modeli).
2. Üretilen videonun son karesini ekran görüntüsü olarak alın.
3. Bu görseli yeni bir üretimde "başlangıç karesi" olarak verin ve devam eden hareketi tarif eden bir promptla yeni sahneyi oluşturun.
4. Bu adımı istediğiniz sahne sayısı kadar tekrarlayın.

Bu yöntemle, her klip bir öncekinin tam olarak bittiği yerden devam ettiği için kesintisiz bir akış hissi oluşur.

Adım 2: Tek Promptla Kurulum ve Site İnşası

scrollcraft, varsayılan olarak KIE AI API üzerinden video üretebiliyor, ancak bu ücretli bir hizmet. Kendi ürettiğiniz videoları (Gemini'den çıkan klipler) kullanmak tamamen ücretsiz ve resmi olarak desteklenen bir yöntem.

İyi haber: kurulumdan siteyi kendi videolarınızla inşa etmeye kadar tüm süreci tek bir promptla, Claude Code'a hiçbir şey sordurmadan yaptırabilirsiniz. Aşağıdaki promptu olduğu gibi Claude Code'a yapıştırmanız yeterli:

Bana Claude Code üzerinden şu adımları sırayla uygula, bana hiçbir şey sormadan tamamla:

1. scrollcraft skill'ini kur:
   /plugin marketplace add nateherkai/scroll-craft
   /plugin install nateherk-design
   Eğer "Run /reload-plugins to activate" mesajı çıkarsa onu da çalıştır.

2. Ön kontrolleri yap:
   node scripts/doctor.mjs
   node scripts/workspace.mjs --ensure
   Eksik bir bağımlılık (ffmpeg, playwright-core vs.) çıkarsa bana raporla,
   kurulabiliyorsa kur.

3. "orrery-demo" adında yeni bir build başlat. Bu site, kendi elle
   ürettiğim video klipleri kullanacak (KIE AI API anahtarı yok, harcama
   yapmayacağız) yani skill'in "kendi footage'ınla kullan" moduyla
   ilerle.

4. Site konsepti: Bir masaüstü küre modelinden (orrery) başlayıp, küreye
   dalarak bir şehre inen, sonra tekrar başlangıç sahnesine dönen tek
   parça, kesintisiz akan bir "dünya" sayfası. Sayfada bölüm sınırları
   olmasın, tek bir sabit sahne üzerinden scroll ile ilerlensin.

5. Video klipleri için "assets/orrery-demo/" adında bir klasör oluştur,
   ben Gemini'de ürettiğim klipleri (globe-intro.mp4, globe-dive.mp4 gibi)
   oraya elle kopyalayacağım. Şimdilik klipler orada yoksa, sitenin
   geri kalan yapısını (scroll mekaniği, tipografi, renk paleti, sahne
   geçiş noktaları) placeholder/boş video referanslarıyla kur, ben
   klipleri ekleyince devreye girecek şekilde bırak.

6. Site metni: kendi markanıza uygun, teknoloji ve AI temalı kısa,
   editoryal bir metin yaz (İngilizce, sitenin genel diliyle tutarlı
   olsun) örnek: "Bu deneyim tamamen yapay zeka ile üretildi" gibi bir
   alt mesaj taşısın.

7. Build tamamlandığında yerel sunucuyu başlat (scripts/serve.mjs veya
   ilgili komut) ve bana tarayıcıda hangi adresten önizleyebileceğimi
   söyle.

8. Sadece gerçek bir hata durumunda dur ve bana bildir, aksi halde onay
   sorma.

Not: 6. maddedeki "kendi markanız" ifadesini kendi marka adınızla değiştirebilirsiniz. Claude, bu tek promptla marketliği ekleyecek, skill'i kuracak, ön kontrolleri yapacak ve siteyi sizin video klipleriniz için hazır bir yapıda inşa edecek ara ara onay sormadan.

Videolarınızı ürettikten sonra assets/orrery-demo/ klasörüne kopyalayıp Claude'a "klipleri sahnelere yerleştir" demeniz, siteyi tamamlamak için yeterli. scrollcraft, videolarınızı scroll pozisyonuna bağlı şekilde "scrub" edilebilir hale getirmek için ffmpeg ile yeniden kodluyor yani normal oynatma değil, fare tekerleğine bağlı kare kare ilerleme sağlıyor.

Adım 3: Kendi Kendini Test Etmesi

scrollcraft'ın öne çıkan özelliklerinden biri, kurduğu siteyi otomatik olarak test etmesi. Bir headless tarayıcı (Playwright) sayfayı her scroll pozisyonunda gezip şunları kontrol ediyor:

• Scroll yapıldığında hiçbir şeyin değişmediği "ölü" bölgeler
• Hiçbir zaman tam görünür olmayan (hep soluk kalan) yazılar
• Videonun donup kaldığı, fark edilmesi zor anlar

Bu kontroller sonunda bir "contact sheet" (özet rapor) oluşturuyor, böylece siteyi elle baştan sona gezmeden sorunları görebiliyorsunuz.

Sonuç

Bu iki aracın birleşimi, normalde pahalı bir prodüksiyon süreci gerektiren "sinematik, kesintisiz akan" web sitesi deneyimini, bireysel bir içerik üreticisinin bile makul bir maliyetle kurabileceği bir hale getiriyor. İlk denemenizde mükemmel sonucu almasanız da, sahne sayısını ve prompt detayını artırarak istediğiniz akışı yakalayabilirsiniz.