Sayfa aşağı kaydırılınca hareket eden ürün sitesi kuran sistem

Sistem nasıl bağlanıyor

Seçtiğin yola göre: (A) video → kareler → canvas + ScrollTrigger, ya da (B) lisanslı GLB model → three + React Three Fiber → isteğe bağlı ScrollTrigger. Her iki yolda yedek görünüm ve telefon kontrolü yapılır.

• 
  Claude Code gerekli

  Sayfa ve bileşen kodunu yazar, hataları düzeltir

  Araç rehberi

• 
  GSAP ve ScrollTrigger gerekli

  Kaydırma ilerlemesini kareye ya da sahneye bağlar

  Tasarım kaynaklarında

• E
  ezgif video-to-JPG isteğe bağlı

  Kısa videodan kare dosyaları çıkarır (tarayıcıda)

  Alternatif: Yalnız kare dizisi yolunda ve videoyu üçüncü taraf bir siteye yüklemekte sakınca yoksa; özel ürün videosu için yerel FFmpeg yolunu seç

  Resmî sitesi

• F
  FFmpeg isteğe bağlı

  Aynı kare çıkarma işini kendi bilgisayarında yapar

  Alternatif: Video özelse ya da ezgif'in dosya sınırını aşıyorsa

  Resmî sitesi

• 
  three ve React Three Fiber isteğe bağlı

  Gerçek 3B modeli sayfada çizer

  Alternatif: Yalnız gerçek 3B yolunda gerekir

  Tasarım kaynaklarında

• 
  Google Flow isteğe bağlı

  İsteğe bağlı: başlangıç ve bitiş karesinden kısa video üretir

  Alternatif: Elinde kullanım hakkı olan bir ürün videosu yoksa

  Araç rehberi

• 
  Lenis isteğe bağlı

  İsteğe bağlı: kaydırmayı yumuşatır

  Alternatif: Yalnız tasarım gerçekten yumuşak kaydırma gerektiriyorsa

  Tasarım kaynaklarında

• 
  Playwright CLI isteğe bağlı

  Telefon genişliğinde ekran görüntüsü alır

  Alternatif: Telefon genişliğini tarayıcının geliştirici araçlarından da denetleyebilirsin

  Araç rehberi

Başlamadan önce

Adım adım kurulum

İşaretlediğin adımlar yalnız bu tarayıcıda kalır; kurulumun çalıştığını doğrulamaz. 0/7 adımı bitirdin.

1. 1. adım · Terminalde

   Çalışacağın projeyi hazırla

   Bu adımı bitirdim

   Ne için: Kare ya da model dosyalarının konacağı çalışan bir site projen olsun.

   1. Zaten bir React projen varsa terminali o klasörde aç ve bu adımın komutunu atla. Projenin package.json dosyasında react satırındaki sürüme bak; 3B yolunda paket sürümleri buna göre seçilir. Yükseltme yapma.
   2. Yeni başlıyorsan Node.js sürümünü kontrol et, sonra aşağıdaki komutla React şablonunu oluştur. Komut, create-vite kaynak kodundaki --no-immediate seçeneğiyle kurulum ve başlatmayı atlar; bunları sonraki maddede kendin yaparsın. Yine de kurup başlatmayı soran bir soru çıkarsa Hayır de.
   3. Proje klasörüne gir, paketleri kur (npm install) ve npm run dev ile geliştirme sunucusunu başlat. Sunucunun yazdığı adres tarayıcıda açılmalı.
   Windows · macOS · LinuxKlasör: Herhangi bir klasör

   › node --versionKopyala

   Windows · macOS · LinuxKlasör: Projeyi koymak istediğin üst klasör

   › npm create vite@9.2.1 urun-sitesi -- --template react --no-immediateKopyala

   Sürüm sabit (10 Eylül 2026 itibarıyla). Yeni sürüme geçmeden önce üreticinin belgesine bak.

   Doğru yaptığını şuradan anlarsın

   • Geliştirme sunucusu bir yerel adres yazar ve şablon sayfası tarayıcıda açılır.
   Takılırsan: bu adıma özgü sorunlar

   • Komut Node.js sürümünden şikâyet ediyor
     Vite, Node.js 20.19 ve üzeri ya da 22.12 ve üzeri ister; sürümünü yükselt.
   • Şablon beklediğimden yeni bir React sürümüyle geldi
     Kare dizisi yolunda sorun olmaz. 3B yolunda 7. adımdaki sürüm eşleşmesini oku ve paketleri projenin React sürümüne göre seç.
   Dayanak: Vite belgesi: ilk adımlar ve Node.js şartı, npm kaydı: create-vite (9.2.1), vitejs/vite: create-vite kaynak kodu (seçenekler ve etkileşimli mod)Bu adımda yardım al →
2. 2. adım · Tarayıcıda

   Kısa ürün videonu hazırla

   Bu adımı bitirdim

   Ne için: Kareleri çıkaracağın, kullanım hakkı sende olan kısa ve tek hareketli bir video olsun.

   !Burada sen kontrol edersin; sistem bu adımı senin onayın olmadan ilerletmemeli.

   1. Kendi çektiğin ya da kullanım hakkı olan kısa bir ürün videonu seç. Kamera sabit, ürün tek bir akıcı hareket yapıyorsa kareler arası geçiş düzgün olur (bu DijiKoçum'un önerisidir). Hazır videon varsa bu adımı atla; abonelik gerekmez.
   2. Videon yoksa Google Flow'da projenin istem kutusunda model adına tıkla, sonra Video'yu ve Frames'i seç. Başlangıç ve bitiş karesi için görsellerini sürükle, aradaki hareketi istemde yaz, video tercihlerini seç ve Generate'e tıkla.
   3. Yardım sayfasına göre özelliğin kullanılabilirliği ülkeye ve bölgeye göre değişebilir, bazı görsel türleri desteklenmeyebilir. Kredi ayrıntıları için Flow'un kredi sayfasına bak; üretimin ücretli olabileceğini hesaba kat.
   4. Üretilen videoyu kullanmadan önce Flow'un kullanım koşullarında ticari kullanıma izin verilip verilmediğini oku.

   Doğru yaptığını şuradan anlarsın

   • Bilgisayarında, hakkını taşıdığın kısa bir video dosyası olur.
   Takılırsan: bu adıma özgü sorunlar

   • Flow'da Frames seçeneği görünmüyor
     Yardım sayfası arayüz adlarının sürümle değişebildiğini, özelliğin ülkeye göre farklılaşabildiğini söyler; arayüzde video ve başlangıç/bitiş karesi seçeneğini ara ya da hazır videoyla devam et.
   Dayanak: Google Flow Yardım: Flow'da video oluşturma (Frames)
3. 3. adım · Tarayıcıda

   Videodan kareleri ezgif ile çıkar

   Bu adımı bitirdim

   Ne için: Videoyu sıralı JPG karelere çevirip ZIP olarak indir.

   !Burada sen kontrol edersin; sistem bu adımı senin onayın olmadan ilerletmemeli.

   1. ezgif video-to-JPG sayfasını aç. Sayfa videolar için en çok 200 MB dosya boyutu, 1 ile 30 arası kare hızı ve çıktıda 1920 piksele kadar çözünürlük belirtir.
   2. Videoyu yükle, istersen yalnız kullanacağın zaman aralığını kırp, kare hızını ve boyutu seç. Başlangıç önerimiz (kaynağı yok, kendin ölç): genişliği 1280 piksel ya da altında tut ve birkaç düzine ile yüz civarı kare üret. Kare sayısı ve boyutu arttıkça sayfa ağırlaşır; tarayıcı kareleri çözünce JPG dosya boyutundan çok daha fazla bellek tutar.
   3. Kareleri ZIP olarak indir ve proje klasöründe public/kareler klasörüne aç. ZIP içindeki dosya adlarına bak: ezgif sayfası adlandırma biçimini belgelemiyor, kod ise kare-0001.jpg biçimini bekliyor. Adlar farklıysa gerçek deseni ajana ver ve kodu o desene uydurt, ya da dosyaları kare-0001.jpg biçiminde yeniden adlandırt.
   4. Toplam klasör boyutuna (MB) bak; çok büyükse daha düşük kare hızı ya da boyutla yeniden çıkar. Telefonda kare dizisi yüklenmeyecek (5. adımdaki kod böyle çalışır), ama bilgisayardaki ziyaretçi için de boyut önemlidir.
   5. Dikkat: video üçüncü taraf bir siteye yüklenir. Sayfa yüklenen dosyaların otomatik silindiğini söylüyor; yine de özel ya da yayımlanmamış bir ürün videosu için sonraki adımdaki yerel yolu seç.

   Doğru yaptığını şuradan anlarsın

   • public/kareler klasöründe sıralı numaralı JPG dosyaları görünür.
   Takılırsan: bu adıma özgü sorunlar

   • Video 200 MB sınırını aşıyor
     Videoyu kısalt ya da 4. adımdaki yerel FFmpeg yolunu kullan; sınır ezgif'e özgüdür.
   • Kareler çok büyük, sayfa ağır
     Daha düşük kare hızı ve daha küçük boyut seçip yeniden çıkar; ezgif 1-30 kare hızı ve boyut seçeneği sunar.
   • Canvas boş kalıyor, ZIP içindeki dosya adları kare-0001.jpg biçiminde değil
     ezgif dosya adı biçimini belgelemiyor. Dosyaları yeniden adlandırt ya da ajana gerçek ad desenini verip kodu ona uydurt.
   Dayanak: ezgif: video to JPG sayfasıBu adımda yardım al →
4. 4. adım · Terminalde

   Ya da kareleri kendi bilgisayarında FFmpeg ile çıkar

   Bu adımı bitirdim

   Ne için: Videoyu hiçbir siteye yüklemeden sıralı JPG karelere çevir.

   !Burada sen kontrol edersin; sistem bu adımı senin onayın olmadan ilerletmemeli.

   1. FFmpeg kurulu değilse ffmpeg.org indirme sayfasına git; sayfa FFmpeg'in yalnız kaynak kod sağladığını, derlenmiş paketler için bağlantılar verdiğini söyler. Kendi işletim sistemin için olanı kur.
   2. Terminali videonun bulunduğu klasörde aç, kareler klasörünü oluştur ve aşağıdaki FFmpeg komutunu çalıştır. Videonun adı urun.mp4 değilse onu değiştir. fps=24 saniyedeki kare sayısını, scale=1280:-2 genişliği 1280 piksel yapıp yüksekliği oranı koruyarak ayarlamayı, -q:v ise JPG kalitesini belirler.
   3. Bu üç değer DijiKoçum'un başlangıç önerisidir, kaynaklarda öneri olarak geçmez. -q değeri kodeke bağlıdır (FFmpeg belgesi); kaliteyi ve klasör boyutunu kendin ölçüp değerleri ayarla. Kareleri azaltmak için fps değerini düşür ya da videoyu kısalt.
   4. Çıkan klasörü projenin public klasörünün içine taşı (public/kareler) ve toplam boyuta (MB) bak.
   Windows · macOS · LinuxKlasör: Videonun bulunduğu klasör

   › mkdir karelerKopyala

   Windows · macOS · LinuxKlasör: Videonun bulunduğu klasör

   › ffmpeg -i urun.mp4 -vf fps=24,scale=1280:-2 -q:v 4 kareler/kare-%04d.jpgKopyala

   Doğru yaptığını şuradan anlarsın

   • kareler klasöründe kare-0001.jpg, kare-0002.jpg gibi sıralı dosyalar oluşur.
   Takılırsan: bu adıma özgü sorunlar

   • ffmpeg komutu bulunamadı
     FFmpeg kurulu değil ya da PATH'te değil; indirme sayfasındaki paketlerden birini kur ve terminali yeniden aç.
   • Çıktı dosyaları oluşmadı, klasör hatası var
     Kareler klasörü yoksa FFmpeg dosyaları yazamaz ve hata verir; önce mkdir kareler komutunu çalıştır. Bu davranışı gösterilen belge anlatmıyor, bilinen çalışma biçimidir.
   Dayanak: FFmpeg filtre belgesi: fps, FFmpeg biçim belgesi: image2 (sıralı görüntü dosyaları), FFmpeg indirme sayfası, FFmpeg filtre belgesi: scale, FFmpeg belgesi: ffmpeg aracı (-q seçeneği)Bu adımda yardım al →
5. 5. adım · Kod ajanında

   Kareleri canvas'a çiz ve kaydırmaya bağla

   Bu adımı bitirdim

   Ne için: Kaydırdıkça kare numarası ilerlesin ve ilgili kare canvas'a çizilsin.

   1. GSAP'ı kur. Lisans: standart lisans ticari projelerde ücretsiz kullanıma izin verir; lisans metni, kodsuz görsel animasyon oluşturma araçlarında Webflow ile rekabet eden kullanımı yasaklar.
   2. Claude Code'a şunu yaz: kareleri sayıp React bileşeni olarak bir canvas bölümü ekle; GSAP ScrollTrigger ile kaydırmaya göre kareleri çiz; canvas %100 genişlikte ama en çok 100vh yükseklikte olsun, iç çözünürlüğü karenin boyutundan alsın, boyut değişince ScrollTrigger.refresh() çağırsın; ilk kare hep gösterilsin; kalan kareler yalnız geniş ekranda ve hareketi azaltma kapalıyken insin; yüklenemeyen kare hata vermesin.
   3. Aşağıdaki bileşen bu isteğin iskeletidir; GSAP'ın resmî görüntü dizisi yardımcısının mantığından uyarlandı. Resmî yardımcı ekran boyutu ve yük yönetimini ele almaz, bunlar bu rehberde eklendi. Kare sayısını kendi dosya sayınla değiştir, ajanın kodunla karşılaştır.
   4. Bileşeni App.jsx içinde göster. Kod, canvas elemanı sayfaya konduktan sonra çalışsın diye useEffect içindedir; sayfa kapanırken mm.revert() ile temizlenir.
   5. Hatırlatma: bu teknik 3B model oluşturmaz. Ziyaretçi, aynı videonun karelerinin kaydırmayla sırayla gösterildiğini görür.
   Windows · macOS · LinuxKlasör: urun-sitesi (ya da kendi proje klasörün)

   › npm install gsap@3.15.0Kopyala

   Sürüm sabit (13 Nisan 2026 itibarıyla). Yeni sürüme geçmeden önce üreticinin belgesine bak.

   KareSahnesi.jsx · jsxKopyala

   import { useEffect, useRef } from "react";
   import gsap from "gsap";
   import { ScrollTrigger } from "gsap/ScrollTrigger";
   
   gsap.registerPlugin(ScrollTrigger);
   
   const KARE_SAYISI = 120; // public/kareler içindeki dosya sayınla değiştir
   const kareYolu = (i) => `/kareler/kare-${String(i + 1).padStart(4, "0")}.jpg`;
   
   function kareYukle(yol) {
     return new Promise((coz) => {
       const img = new Image();
       img.onload = () => coz(img);
       img.onerror = () => coz(null); // eksik ya da kırık dosyada çizimi atla
       img.src = yol;
     });
   }
   
   export default function KareSahnesi() {
     const bolum = useRef(null);
     const tuval = useRef(null);
   
     useEffect(() => {
       const ctx = tuval.current.getContext("2d");
       let iptal = false;
       let kareler = [];
       const durum = { kare: 0 };
   
       const ciz = () => {
         const img = kareler[Math.round(durum.kare)];
         if (img && img.naturalWidth > 0) {
           ctx.drawImage(img, 0, 0, tuval.current.width, tuval.current.height);
         }
       };
   
       // İlk kare her koşulda gösterilir: yedek görünüm budur.
       kareYukle(kareYolu(0)).then((ilk) => {
         if (iptal || !ilk) return;
         tuval.current.width = ilk.naturalWidth; // iç çözünürlük karenin kendi boyutundan
         tuval.current.height = ilk.naturalHeight;
         kareler[0] = ilk;
         ciz();
         ScrollTrigger.refresh(); // canvas boyutu değişti: pin alanını yeniden hesapla
       });
   
       const mm = gsap.matchMedia();
       mm.add("(min-width: 800px) and (prefers-reduced-motion: no-preference)", () => {
         // Kalan kareler yalnız bu koşulda indirilir.
         const kalan = Array.from({ length: KARE_SAYISI - 1 }, (_, i) => kareYukle(kareYolu(i + 1)));
         Promise.all(kalan).then((geri) => {
           if (iptal) return;
           kareler = [kareler[0], ...geri];
           ciz();
         });
         gsap.to(durum, {
           kare: KARE_SAYISI - 1,
           ease: "none",
           onUpdate: ciz,
           scrollTrigger: {
             trigger: bolum.current,
             start: "top top",
             end: "+=3000",
             scrub: true,
             pin: true,
           },
         });
       });
   
       return () => {
         iptal = true;
         mm.revert();
       };
     }, []);
   
     return (
       <section ref={bolum}>
         <canvas ref={tuval} style={{ display: "block", width: "100%", height: "auto", maxHeight: "100vh", objectFit: "contain" }} />
       </section>
     );
   }

   Resmî yardımcının mantığından (görüntü dizisini canvas'a çizme ve ScrollTrigger ile scrub), gsap.matchMedia koşul biçiminden ve useEffect temizliğinden uyarlanmış bir iskelettir. Yüksek çözünürlüklü ekranda keskinlik için karelerin genişliği ekranda gösterilen genişlikten az olmamalıdır. Yükleme bitmeden kaydıran ziyaretçi son çizilen kareyi görür. Canvas ilk karenin boyutunu alınca ScrollTrigger.refresh() çağrılır; çünkü GSAP belgesine göre başlangıç ve bitiş konumları ScrollTrigger oluşturulurken ve pencere yeniden boyutlanırken hesaplanır, canvas büyüyünce kendiliğinden yenilenmez. maxHeight ve objectFit, geniş ekranda sabitlenen bölümün ekran yüksekliğini aşıp ürünün alt kısmının kesilmesini önler (DijiKoçum eklemesi, kaynakta yoktur).

   Doğru yaptığını şuradan anlarsın

   • Sayfayı kaydırınca canvas'taki görüntü videonun karelerinde ilerler.
   • Ekran 800 pikselden darsa ya da hareketi azaltma açıksa yalnız ilk kare indirilir ve gösterilir; canvas ekran genişliğini aşmaz; geniş ekranda canvas ekran yüksekliğine sığar, alt kısmı kesilmez.
   Takılırsan: bu adıma özgü sorunlar

   • Canvas boş kalıyor
     Tarayıcıda /kareler/kare-0001.jpg adresini aç. Açılmıyorsa dosya adı biçimi ya da klasör yolu koda uymuyordur (Vite, public içindeki dosyaları kökten sunar). Kod yüklenemeyen kareyi sessizce atlar; konsolu ve Ağ sekmesini ajana göster.
   • Görüntü yarım kare ya da titrek ilerliyor
     scrub değeri ve sayfa uzunluğunu (end) ayarlat; kare sayısı çok azsa kare hızını yükseltip yeniden çıkar. Kareler tam inmeden kaydırırsan son çizilen kare görünür kalır.
   • Sayfa çok yavaş açılıyor ya da telefonda sekme çöküyor
     Kare sayısını ve boyutunu düşür; toplam klasör boyutunu ölç. Bu kod telefonda yalnız ilk kareyi indirir, sorun bilgisayarda görülüyorsa kareler fazla büyüktür.
   • Bölümün altındaki içerik canvas'ın üstüne biniyor ya da kaydırma bitişi yanlış yerde
     Canvas boyutu değişince ScrollTrigger sabitlenen alanı yeniden hesaplamalıdır. Kodda kare boyutu atandıktan sonra ScrollTrigger.refresh() çağrıldığını ajana kontrol ettir.
   • Geniş ekranda ürünün alt kısmı kesiliyor
     Canvas ekrandan uzun olabilir. Stilde maxHeight: "100vh" ve objectFit: "contain" olduğunu kontrol ettir.
   Dayanak: GSAP belgesi: kurulum, GSAP belgesi: ScrollTrigger (scrub, pin, kayıt), GSAP yardımcıları: imageSequence (canvas'a kare çizme), GSAP belgesi: gsap.matchMedia(), GSAP standart lisansı ve SSS, Vite belgesi: statik varlıklar ve public klasörüBu adımda yardım al →
6. 6. adım · Terminalde

   Yedek görünümü ve telefon genişliğini kontrol et

   Bu adımı bitirdim

   Ne için: İçerik hareket kapalıyken ve telefonda da kullanılabilir olsun; sayfa ekranı taşırmasın.

   !Burada sen kontrol edersin; sistem bu adımı senin onayın olmadan ilerletmemeli.

   1. Hareketi azaltma: MDN'ye göre prefers-reduced-motion, kullanıcının cihazında hareketi azaltma ayarını açtığını bildirir. İşletim sisteminin bu ayarını aç, sayfayı yenile ve içeriğin okunabildiğini, ürünün (ilk kare ya da duran model) görünür olduğunu kontrol et.
   2. Telefon genişliği: geliştirme sunucusu çalışırken Playwright CLI'ı kur, sayfayı aç, pencereyi 390 piksel genişliğe getirip ekran görüntüsü al. Ekran görüntüsü yalnız görünen alanı gösterir ve yatay taşmayı güvenilir ölçmez; bu yüzden aşağıdaki eval komutuyla sayfa genişliğinden ekran genişliğini çıkar. Sonuç 0 ya da negatifse taşma yoktur.
   3. Kaydırma: sayfayı elle yukarıdan aşağı kaydır; kare ya da model ilerliyor mu, kaydırma bölümden sonra sorunsuz devam ediyor mu bak.
   4. Sorun görürsen ekran görüntüsünü ajana ver, düzelttir ve aynı komutlarla yeni görüntü al.
   Windows · macOS · LinuxKlasör: Herhangi bir klasör

   › npm install -g @playwright/cli@0.1.22Kopyala

   Sürüm sabit (28 Eylül 2026 itibarıyla). Yeni sürüme geçmeden önce üreticinin belgesine bak.

   Windows · macOS · LinuxKlasör: Herhangi bir klasör

   › playwright-cli open http://localhost:5173Kopyala

   Windows · macOS · LinuxKlasör: Herhangi bir klasör

   › playwright-cli resize 390 844Kopyala

   Windows · macOS · LinuxKlasör: urun-sitesi (ya da kendi proje klasörün)

   › playwright-cli screenshot --filename=mobil-urun.pngKopyala

   Windows · macOS · LinuxKlasör: Herhangi bir klasör

   › playwright-cli eval "document.documentElement.scrollWidth - window.innerWidth"Kopyala

   Doğru yaptığını şuradan anlarsın

   • Hareketi azaltma açıkken ürün görünür ve içerik okunur.
   • mobil-urun.png görüntüsü kaydedilir ve eval komutunun sonucu 0 ya da negatiftir.
   Takılırsan: bu adıma özgü sorunlar

   • open komutundaki adres açılmıyor
     Vite'in terminale yazdığı adresi kullan; 5173 örnektir.
   • Tarayıcı bulunamadı hatası
     open komutuna --browser=chrome ekleyerek bilgisayarındaki Chrome'u seçebilirsin; README bu seçeneği listeler.
   • Hareketi azaltma açıkken sayfa hâlâ kayarak değişiyor
     Kaydırma bağı gsap.matchMedia koşulunun içinde kurulmalı. Koşulun (prefers-reduced-motion: no-preference) olduğunu kodda ajana kontrol ettir.
   • eval komutu hata veriyor
     README eval komutunu bir JavaScript ifadesi çalıştıran komut olarak listeler, resmî SKILL.md ise öğe seçmeden verilen metnin doğrudan değerlendirildiğini gösterir. Sonuç sayı yerine boş ya da farklı bir şey dönerse ajana aynı ölçümü (scrollWidth ile innerWidth farkı) yaptır.
   Dayanak: MDN: prefers-reduced-motion, microsoft/playwright-cli: README (open, resize, screenshot), npm kaydı: @playwright/cli (0.1.22), playwright-cli SKILL.md (eval örnekleri)Bu adımda yardım al →
7. 7. adım · Kod editöründe

   Yalnız gerçekten gerekiyorsa yumuşak kaydırma (Lenis) ekle

   Bu adımı bitirdim

   Ne için: Tasarım bilerek yumuşak kaydırma istiyorsa ekle; istemiyorsan bu adımı atla.

   1. Bu adım zorunlu değildir. Önce yukarıdaki kaydırma bağı ile yetinip yetinmediğine bak.
   2. Lenis'in README'si GSAP ScrollTrigger ile kullanım için kurulum adımları verir: Lenis'in scroll olayını ScrollTrigger.update'e bağlamak ve Lenis'in raf çağrısını gsap.ticker'a eklemek. Kurmak istersen aşağıdaki komutu çalıştır ve örnek dosyadaki bağlamayı uygula; ayrıntı için README'nin Setup bölümüne bak.
   3. Hareketi azaltma: README'ye göre Lenis varsayılan olarak bu tercihi dikkate alır, yumuşatmayı kapatır (respectReducedMotion varsayılanı true). Bu ayarı false yapma.
   4. Ekledikten sonra yedek görünüm ve telefon kontrolünü yeniden yap.
   Windows · macOS · LinuxKlasör: urun-sitesi (ya da kendi proje klasörün)

   › npm install lenis@1.3.27Kopyala

   Sürüm sabit (15 Ekim 2026 itibarıyla). Yeni sürüme geçmeden önce üreticinin belgesine bak.

   lenis-baglama.js · javascriptKopyala

   import Lenis from "lenis";
   import gsap from "gsap";
   import { ScrollTrigger } from "gsap/ScrollTrigger";
   
   const lenis = new Lenis();
   
   // Lenis kaydırmasını ScrollTrigger ile eşle
   lenis.on("scroll", ScrollTrigger.update);
   
   // Lenis raf çağrısını GSAP ticker'ına ekle
   gsap.ticker.add((time) => {
     lenis.raf(time * 1000);
   });
   
   gsap.ticker.lagSmoothing(0);

   Lenis README'sindeki GSAP ScrollTrigger bölümünden alınmıştır. React bileşeninde useEffect içinde kur ve temizlikte lenis.destroy() çağırmayı ajana kontrol ettir (bu temizlik README'den değil, DijiKoçum'un önerisidir).

   Doğru yaptığını şuradan anlarsın

   • package.json dosyasında lenis satırı görünür.
   Takılırsan: bu adıma özgü sorunlar

   • Kaydırma beklenmedik şekilde takılıyor
     Lenis'i geçici olarak kaldır ve sorunun sürmediğini gör; bağlama için README'deki Setup ve Troubleshooting bölümlerine bak.
   Dayanak: darkroomengineering/lenis: README ve lisans, npm kaydı: lenis (1.3.27)Bu adımda yardım al →

Neye para ödenir

Kalemler ayrıdır ve toplam değildir; hangilerinin sana gerektiği kurduğun yola bağlıdır. Fiyatlar değişir, her kalemin kaynağına bak.

• AbonelikClaude Code erişimi

  Belgeye göre Claude Pro, Max, Team ya da Enterprise aboneliği, Claude Console hesabı ya da bir bulut sağlayıcı gerekir. Güncel fiyatlar Anthropic'in fiyat sayfasındadır. kaynak

• AbonelikGoogle Flow ile video üretimi (isteğe bağlı)

  Yalnız videonu kendin üretmek istersen. Kredi ve plan ayrıntıları Flow'un kendi sayfalarındadır; hazır videosu olana zorunlu değildir. kaynak

• Ücret yokGSAP

  Standart lisansa göre ticari projelerde ücretsiz kullanılabilir; Webflow ile rekabet eden kodsuz animasyon araçlarında kullanım yasaktır. Lisans değişebilir, kullanmadan önce güncel metni oku. kaynak

• Ücret yokezgif, FFmpeg, three, React Three Fiber, Lenis, Playwright CLI

  Paket kayıtları three, fiber, drei ve Lenis için MIT, Playwright CLI için Apache-2.0 lisansı gösterir. ezgif sayfasında bir ücret belirtilmemiştir. kaynak

• Kurulum hizmeti3B model (yalnız gerçek 3B yolu)

  Modelin üretimi ya da lisanslı bir kaynaktan alınması ayrı bir kalemdir; fiyat modelin kaynağına bağlıdır. Ticari kullanımı yasaklayan lisanslı model kullanılamaz. kaynak

• BarındırmaSite yayını ve barındırma

  Bu rehber yayını kapsamaz. Kare dosyaları sayfanın boyutunu artırır; barındırma planının dosya ve trafik sınırlarına bak. kaynak

• Kurulum hizmetiKurulum desteği

  İstersen varlık hazırlığını, hareketin uygulanmasını, optimizasyonu ya da sitenin tamamını bizden alabilirsin; kapsam görüşmeyle belli olur. kaynak

Kaynaklar

• GSAP standart lisansı ve SSS · Resmî belge · okundu 17 Ekim 2026
• GSAP belgesi: kurulum · Resmî belge · okundu 17 Ekim 2026
• GSAP belgesi: ScrollTrigger (scrub, pin, kayıt) · Resmî belge · okundu 17 Ekim 2026
• GSAP yardımcıları: imageSequence (canvas'a kare çizme) · Resmî belge · okundu 17 Ekim 2026
• GSAP belgesi: gsap.matchMedia() · Resmî belge · okundu 17 Ekim 2026
• npm kaydı: gsap (güncel sürüm 3.15.0) · Üretici sayfası · okundu 17 Ekim 2026
• ezgif: video to JPG sayfası · Üretici sayfası · okundu 17 Ekim 2026
• FFmpeg filtre belgesi: fps · Resmî belge · okundu 17 Ekim 2026
• FFmpeg biçim belgesi: image2 (sıralı görüntü dosyaları) · Resmî belge · okundu 17 Ekim 2026
• FFmpeg indirme sayfası · Üretici sayfası · okundu 17 Ekim 2026
• MDN: prefers-reduced-motion · Resmî belge · okundu 17 Ekim 2026
• React Three Fiber belgesi: kurulum ve React eşleşmesi · Resmî belge · okundu 17 Ekim 2026
• React Three Fiber belgesi: model yükleme · Resmî belge · okundu 17 Ekim 2026
• React Three Fiber belgesi: hooklar (useFrame) · Resmî belge · okundu 17 Ekim 2026
• drei belgesi: useGLTF · Resmî belge · okundu 17 Ekim 2026
• npm kaydı: @react-three/fiber (8.18.0 ve 9.8.2) ve peer dependency alanları · Üretici sayfası · okundu 17 Ekim 2026
• npm kaydı: @react-three/drei (9.122.0 ve 10.7.9) · Üretici sayfası · okundu 17 Ekim 2026
• npm kaydı: three (0.186.1) · Üretici sayfası · okundu 17 Ekim 2026
• darkroomengineering/lenis: README ve lisans · Kaynak kod · okundu 17 Ekim 2026
• npm kaydı: lenis (1.3.27) · Üretici sayfası · okundu 17 Ekim 2026
• Google Flow Yardım: Flow'da video oluşturma (Frames) · Yardım merkezi · okundu 17 Ekim 2026
• Creative Commons Atıf-Gayriticari 4.0 (özet) · Resmî belge · okundu 17 Ekim 2026
• Vite belgesi: statik varlıklar ve public klasörü · Resmî belge · okundu 17 Ekim 2026
• Vite belgesi: ilk adımlar ve Node.js şartı · Resmî belge · okundu 17 Ekim 2026
• npm kaydı: create-vite (9.2.1) · Üretici sayfası · okundu 17 Ekim 2026
• Claude Code belgesi: hızlı başlangıç ve hesap türleri · Resmî belge · okundu 17 Ekim 2026
• microsoft/playwright-cli: README (open, resize, screenshot) · Kaynak kod · okundu 17 Ekim 2026
• npm kaydı: @playwright/cli (0.1.22) · Üretici sayfası · okundu 17 Ekim 2026
• vitejs/vite: create-vite kaynak kodu (seçenekler ve etkileşimli mod) · Kaynak kod · okundu 17 Ekim 2026
• FFmpeg filtre belgesi: scale · Resmî belge · okundu 17 Ekim 2026
• FFmpeg belgesi: ffmpeg aracı (-q seçeneği) · Resmî belge · okundu 17 Ekim 2026
• playwright-cli SKILL.md (eval örnekleri) · Kaynak kod · okundu 17 Ekim 2026