İçeriğe geç
Tüm projeler
Web & Full StackÖzel

InkStudio: Framer Motion Destekli Premium Next.js Deneyimi

Üst düzey sanat stüdyoları için geliştirilen; Framer Motion ile donanım hızlandırmalı animasyonlar, URL tabanlı state yönetimi ve yüksek performanslı medya render mimarisi sunan modern bir web uygulaması.

Canlı sürümü gör

Teknoloji yığını

Çatılar & kütüphaneler

Performans & metrikler

  • Görsel yüklerini minimize etmek için next/image bileşeninde sizes prop'u ile viewport odaklı agresif çözünürlük optimizasyonu
  • Filtreleme algoritmalarının ve dinamik istatistik hesaplamalarının (dynamicStats) useMemo ile sarılarak gereksiz re-render döngülerinin tamamen engellenmesi
  • Window scroll event listener'larına passive: true parametresi atanarak ana iş parçacığının (main-thread) kaydırma performansı üzerindeki yükünün kaldırılması

Neden geliştirdim?

Premium hizmet veren sanat stüdyolarının, standart CMS şablonlarından ziyade marka kimliğini yansıtan, akıcı ve yüksek performanslı dijital vitrinlere ihtiyacı vardır. InkStudio projesini; kullanıcı etkileşimlerinin sıfır gecikmeyle (zero-latency) gerçekleştiği, yüksek çözünürlüklü görsellerin render performansını etkilemeden sunulduğu lüks bir UI/UX deneyimi olarak sıfırdan inşa ettim.

Mimari & kararlar

Uygulama Next.js App Router mimarisi üzerine kuruludur. İstemci tarafı filtreleme state'leri (activeCategory, activeArtist), kalıcılık ve derin bağlantı (deep-linking) desteği sağlamak amacıyla doğrudan URL parametrelerine (useSearchParams) bağlanmıştır. Ağır görsel filtreleme algoritmaları ve matematiksel hesaplamalar useMemo ile izole edilmiştir. Animasyon katmanında, framer-motion kullanılarak donanım ivmeli (GPU-accelerated) sayfa geçişleri, AnimatePresence ile unmount animasyonları ve kademeli (staggered) render dizilimleri yönetilir.

Temel özellikler

  1. 01framer-motion ile orkestre edilmiş karmaşık mikro etkileşimler ve kademeli (staggered) layout animasyonları
  2. 02useSearchParams ile URL bazlı, paylaşılabilir ve asenkron portfolyo filtreleme motoru
  3. 03Behold API üzerinden entegre edilen, asenkron yüklenen gerçek zamanlı (live) Instagram akışı
  4. 04Yüksek çözünürlüklü (high-res) medya tüketimi için özel optimize edilmiş Lightbox/Carousel modülü
  5. 05Tailwind CSS değişkenleriyle (CSS variables) kurgulanmış global ve merkezi 'Elegant' tema motoru

Teknik değerlendirme

Bu proje, modern frontend geliştirmede estetik ile mühendisliğin kesişimini temsil eder. Framer Motion entegrasyonu, ağır CSS DOM manipülasyonlarına kıyasla transform ve opacity değerlerini doğrudan GPU'ya devrederek mobil cihazlarda bile 60 FPS akıcılık sağlar. UI bileşenlerindeki karmaşık filtreleme mantığının yerel state yerine URL üzerinden senkronize edilmesi, kullanıcıların spesifik sanatçı/tarz kombinasyonlarını doğrudan bağlantı (link) olarak kopyalayıp paylaşabilmesine olanak tanıyan kritik bir mimari karardır.