React ve animasyon için kullandığım kaynaklar

Bir animasyon örneğini görmekle onu gerçek bir sayfaya yerleştirmek arasında birçok karar var. İçerikle ilişkisi, telefondaki davranışı, yükü ve hareket tercihleri bunlardan bazıları. Burada kendi işlerimde kullandığım kaynakları ve ne amaçla kullandığımı bir araya getirdim. Her aracı aynı projede kullandığım ya da bütün özelliklerine ihtiyaç duyduğum izlenimini vermek istemiyorum.

React: önce ekranı anlamlı parçalara ayırmak

React’in Thinking in React yaklaşımını, arayüzün parçalarını ve verinin akışını düşünmek için yararlı buluyorum. Sayfada neyin tekrar ettiğine, hangi bilginin değiştiğine ve bileşenlerin sorumluluklarına bakıyorum. Bir ürün listesi, filtre ve detay penceresi farklı işler taşıyor. Bu düzen oluşmadan animasyon eklemek sonraki değişiklikleri zorlaştırabiliyor.

Benim için kaynağın değeri örnek koduyla sınırlı değil. Ekranı nasıl ele alacağım konusunda verdiği düşünme düzeni de önemli. Küçük bir arayüzde de geniş bir katalogda da bu sorular işe yarıyor.

Motion: bu portfolyonun kaydırma ilişkisi

Bu portfolyoda Motion kullanıyorum. Sayfanın kaydırma konumuyla arka plandaki portrelerin görünürlüğünü ilişkilendirmek, girişten projelere ve iletişime geçerken farklı sahneler göstermek için uygun bir araç oldu. Geçişlerin yeri, sayfadaki gerçek bölüm konumlarına bağlı; yalnız sabit bir süreye göre ilerleyen bir sunum değil.

Bu tür bir uygulamada efektin kendisi kadar sınırları önemli. İçerik uzadığında bölümün konumu değişebilir, ekran yüksekliği farklı olabilir veya kullanıcı hareketi azaltmayı tercih edebilir. Bu yüzden örneği alıp bırakmak yerine gerçek sayfanın düzeni içinde kontrol ediyorum. Kütüphane hareketi kurmayı kolaylaştırıyor; doğru ritmi seçmek hâlâ tasarım kararı.

React Bits: seçerek kullandığım görsel parçalar

React Bits tarafında UK tasarım çalışmalarında SpotlightCard, Threads ve BlurText gibi parçalar kullandım. SpotlightCard kartın yüzeyindeki ışık hissi için, Threads arka plandaki çizgisel hareket için, BlurText ise metnin giriş davranışı için değerlendirdiğim örneklerdi. Bunlar aynı sorunun üç çözümü değil; farklı alanlarda farklı etkiler üretiyor.

Bir bileşeni seçerken demosunun yanında gerçek içerikle görünümünü, dar ekranı ve yükünü inceliyorum. React Bits’in kullanılan parçalarında MIT ile birlikte Commons Clause koşulları da var; kaynak bildirimlerini koruyorum. Bir lisansın adını kısaltarak bütün kullanımları koşulsuz serbestmiş gibi anlatmamak gerekiyor. Hazır parçanın kendi sayfamın ihtiyacına uyarlanması da bu seçimin parçası.

Ekranın içine giren Unisign karşılama

Unisign Screen Experience çalışmasında React Bits Rotating Text ve Web Threads kullandım. Ürün adları dönerken yatay bir ekran büyüyerek gerçek ana sayfaya dönüşüyor; Samsun ürün yolculuğu aynı sitede devam ediyor. Motion bu kaydırma anlatısına eşlik ediyor. Aceternity Container Scroll, Apple Cards Carousel, Sticky Scroll Reveal ve Timeline ise davranış referanslarıydı. Bu referansları incelemek, paketlerini veya erişim kısıtlı kaynaklarını projeye kopyaladığım anlamına gelmiyor.

ESL demosunda tek seferlik veri akışı

ESL raf demosunda Magic UI Animated Beam’in ortak kapsayıcı, düğüm ölçümü ve observer yaklaşımını uyarladım. Sürekli dönen bir efekt yerine, kullanıcının demo güncellemesine bağlı tek seferlik SVG akışı var. Motion ile seçim, durum ve SVG geçişlerini ilişkilendirdim. shadcn Field ve benzeri kaynaklarda alan, etiket ve hata ilişkisini inceledim; bileşen kodlarını kopyalamadım. Bu çalışma korumalı bir önizleme: gerçek etikete ya da gateway’e komut göndermiyor. Animasyonun süresi cihaz hızı olarak yorumlanmamalı.

React Three Fiber ve Three.js: 3D gerektiğinde

React Three Fiber, Three.js sahnelerini React içinde kurmak için kullandığım kaynaklardan biri. Bu portfolyodaki küçük 3D biçim bunun bir örneği. Asıl portre anlatısı görsellerle kurulurken, 3D öğe sayfanın görsel dünyasına eşlik ediyor. Sahne görünür olmadığında sürekli çalışmaması ve grafik desteği sorununda ana içeriği bozmaması gerekiyor.

Ürün keşif deneyimlerinde ise 3D’nin görevi daha somut: farklı açıları incelemek veya bir görünümü seçilen ürünle ilişkilendirmek. Böyle bir araç eklediğimde, fotoğraf galerisine dönüşü ve temel kontrolleri de düşünmek zorundayım. Modelin kaynağı, fiziksel doğruluk düzeyi ve gösterilen ürünle eşleşmesi görsel kalitesi kadar önemli.

Referans, başlangıç kodu ve alternatif birbirinden farklı

Bu sitenin başlangıç kaynaklarından biri HasnainIrfan/3d-portfolio deposu. MIT lisanslı kodu bir başlangıç noktası olarak değerlendirdim; lisans bildirimini korudum. Sarang Space ise görsel anlatım ve kaydırma hissi açısından referanstı. Bu iki kaynağın rolü aynı değil. Orijinal projedeki üçüncü taraf 3D modelleri bu portfolyoya taşımadım.

GSAP ScrollTrigger’ı da kaydırmaya bağlı gelişmiş sahneler için incelenebilecek bir alternatif olarak listeye ekliyorum. Bu portfolyonun uygulamasında kullandığım araç Motion; ScrollTrigger kullandığım iddiasında bulunmuyorum. Araç seçerken önce ihtiyacı tarif etmek, sonra uygun kaynağı seçmek daha anlaşılır sonuç veriyor. En fazla kütüphaneyi toplamak yerine, seçtiğim birkaç parçanın davranışını iyi bilmek istiyorum.