Appllama/liquid-glass-screens
Explore liquid-glass welcome screens with floating stickers and interactive swipe animations.
Hızlı değerlendirme
Özet
Appllama/liquid-glass-screens, React Native ve Expo için etkileşimli liquid-glass onboarding ekranlarından iki örnek sunan çalıştırılabilir bir UI cookbook'udur.
Profiline uyum
Onboarding tasarımı ve mobil uygulama geliştirmenizle doğrudan ilgili, ancak React Native/Expo örneği kullandığınız SwiftUI arayüzlerine hazır çözüm değil.
Neden yükseliyor
Liquid-glass görsel tarzını, etkileyici swipe animasyonları ve kopyalanabilir Expo örnekleriyle birleştiriyor. 22 günlük yaşına göre 298 yıldız ilgi sinyali; ancak 28 günde 5 commit ve tek farklı yazar, topluluk katkısı veya kalıcı benimseme için henüz güçlü kanıt değil.
Problem
Parmak hareketine tepki veren, görsel açıdan zengin bir welcome screen'i React Native ve Expo'da nasıl uygulayacağını anlamak isteyen geliştiriciler için somut bir referans eksikliği.
Çözüm
İki temalı ekranı ortak bir TypeScript component'i üzerinden oluşturuyor; çizimi React Native Skia ile canvas üzerinde yapıyor, gesture ve animasyonları React Native Gesture Handler ile React Native Reanimated kullanarak UI thread'de yürütüyor.
Yenilik
Yeni bir altyapı veya animasyon yaklaşımı ortaya koyduğuna dair kanıt yok; ayırt edici tarafı, tek bir React Native Skia canvas'ında birleştirilmiş, ayrıntılı ve çalıştırılabilir iki görsel uygulama örneği sunması.
Teknolojiler
- TypeScript
- React Native
- Expo
- Expo Router
- React Native Skia
- React Native Reanimated
- React Native Gesture Handler
Riskler
- README, projeyi educational reference olarak tanımlıyor ve ekranların değiştirilmeden yayımlanmamasını özellikle belirtiyor; ürün içinde kullanmadan önce görselleri ve kompozisyonu özgünleştirmek gerekiyor.
- Lisans GPL-3.0; mevcut uygulamaya uyarlamadan önce lisansın dağıtım ve kullanım koşulları değerlendirilmelidir.
- Repo çok yeni ve son dönemdeki geliştirme tek yazara dayanıyor; bakım sürekliliği ve daha geniş kullanımda karşılaşılabilecek sorunlar hakkında yeterli kanıt yok.
- Expo SDK 57 ve React Native 0.86 hedefleniyor; farklı sürüm kombinasyonlarında uyumluluk ayrıca doğrulanmalı.
Detaylı değerlendirme
Uyum profiline göre: bu işime yarar mı?
Ne yapar
React Native ve Expo için iki adet gesture-driven onboarding/welcome screen sunuyor: Sky ve Astro. Kullanıcı sphere biçimindeki glass dome'u swipe-up ile küçültüp ekranın ortasında bir "+" durumuna getiriyor; bu sırada sticker'lar glass lens içinden görünür hale geliyor, metin animasyonları çalışıyor ve geri swipe ile ekran başlangıç durumuna dönüyor. Proje, doğrudan üretim uygulaması değil; Wabi benzeri bir interaction ve visual treatment için educational cookbook olarak konumlandırılmış.
Nasıl çalışır
Ekran tek bir React Native Skia Canvas içinde katmanlanıyor. Scene katmanında Sky için looping cloud video, Astro için star ve glow bitmap'leri var. Sticker'lar UI thread üzerinde React Native Reanimated worklet'larıyla hareket ettiriliyor. React Native Gesture Handler swipe hareketini alıyor; sphere boyutu ve konumu parmak pozisyonuna göre hesaplanıyor. Skia runtime shader'ları BackdropFilter ile lens magnification, chromatic dispersion, rim light ve motion caustic efektlerini üretiyor. Copy katmanı Canvas dışında React Native Text ile render ediliyor. İki cookbook ortak LiquidGlassScreen component'ini farklı theme ve asset setleriyle kullanıyor.
Kullanım alanları
- React Native ve Expo onboarding ekranları
- Gesture-driven welcome veya product introduction ekranları
- Skia shader ve BackdropFilter tekniklerini inceleme
- UI prototyping ve motion-design araştırması
- Kodlama agent'larına karmaşık bir native animation entegrasyonu yaptırmak için reference
Kimler için
React Native/Expo ile native mobile UI geliştiren ve yüksek görsel etkileşimli onboarding ekranları isteyen ekipler için. Next.js/React web uygulaması geliştiren ekipler için doğrudan uygun değil; React bilgisi tek başına yeterli değil, Expo native build, Skia, Reanimated ve Gesture Handler deneyimi gerekiyor.
Olgunluk
Deneysel / educational reference. Repo yalnızca 1 günlük, son 28 günde 5 commit ve 1 farklı yazar var; sürüm sayısı yok. README'de TypeScript, CI, npm run verify, iPhone simulator ve Maestro doğrulaması anlatılıyor, ancak bu kanıtlar henüz kısa geçmişi ve tek yazarlı yapıyı telafi etmiyor. Ayrıca README açıkça ekranların unchanged şekilde ship edilmemesini ve identity/motion'ın değiştirilmesini istiyor.
Kurulum
Expo SDK 57, React Native 0.86, React Native Skia 2.6 ve Reanimated 4.5 hedefleniyor. Node.js 22.13+, Xcode veya Android Studio gerekiyor. npm ci ve npm run ios ile başlanabiliyor; ancak Expo Go desteklenmiyor. Native veya development build gerekiyor. Mevcut Expo uygulamasına alınacaksa Skia, Reanimated, Gesture Handler, expo-blur, expo-image, expo-status-bar ve expo-asset sürümlerinin mevcut SDK ile eşleştirilmesi, asset preload düzeninin uyarlanması ve native rebuild yapılması gerekir. Web veya Vercel deploy akışına kurulamaz.
Bizim için
Somut kullanım
Mevcut Kaliwa web ürünlerinde doğrudan kullanılabilecek bir parça yok. Web'e uyarlamak için Skia Canvas, native video decoding, Reanimated worklet ve Gesture Handler yaklaşımını yeniden browser teknolojilerine taşımak gerekir; bu da repo'yu kullanmaktan çok davranışı yeniden uygulamak anlamına gelir. İleride React Native mobile client geliştirme kararı alınırsa, kendi artwork'ümüzle bağımsız bir prototype için referans olabilir; bugünkü ürünlerde somut entegrasyon noktası bulunmuyor.
Uyum gerekçesi
Projede TypeScript ve React bulunması yüzeysel bir ortaklık sağlıyor; ancak asıl teknoloji yığını React Native, Expo, Skia runtime shaders, native video decoding ve mobile gesture stack. Ekibin üretim yığını Next.js, browser React, Supabase/PostgreSQL, Deno Edge Functions ve Vercel; bunlardan hiçbiri bu component'i doğrudan çalıştırmıyor. Ayrıca GPL-3.0, native mobile ürüne kopyalama senaryosunda önemli bir lisans engeli oluşturuyor. Yalnızca UI animation araştırması olarak sınırlı bir teknik değer var.
Engeller
- React Native/Expo tabanlı; Next.js web uygulamasına doğrudan uymaz.
- Expo Go desteklenmiyor; Xcode veya Android Studio ile native/development build gerekiyor.
- @shopify/react-native-skia, runtime shaders ve native video decoding platform bağımlılığı getiriyor.
- Expo SDK 57 ve React Native 0.86 hedefleri, mevcut bir Expo projesinin sürümleriyle uyumsuz olabilir.
- GPL-3.0 lisansı, component ve kodun proprietary ürüne nasıl dahil edilebileceği konusunda copyleft yükümlülükleri doğurabilir.
- README'nin kendi uyarısına göre mevcut wordmark, stickers, copy ve backdrops public veya commercial kullanım için değiştirilmelidir.
- Repo yalnızca 1 günlük, tek yazarlı ve releasesiz; uzun dönem bakım güvencesi yok.
- Asset'lerin generated olduğu belirtilse de ticari kullanım izinlerinin her asset için ayrıca doğrulanması gerekir.
Ne zaman kullanılır
React Native tabanlı bir Kaliwa mobile uygulamasında, özellikle onboarding veya welcome ekranına yüksek etkili bir interaction eklemek istediğimizde ve native build pipeline'ımız zaten hazır olduğunda kullanılabilir. En mantıklı kullanım, ekranı aynen kopyalamak değil; LiquidGlassScreen yapısını, typed theme yaklaşımını, UI-thread animation modelini ve Skia shader tekniklerini inceleyip kendi asset ve interaction tasarımımıza uyarlamaktır.
Ne zaman kullanılmaz
Next.js web arayüzü, Supabase dashboard'u veya Vercel üzerinde çalışan bir ürün ekranı için kullanılmamalı. React Native/Expo uygulamamız yoksa native toolchain ve bağımlılık maliyeti bu repo için gereksiz. Ayrıca GPL-3.0 lisansı ve README'deki third-party visual reference uyarıları nedeniyle mevcut artwork, copy, wordmark veya tasarımı ticari ürüne doğrudan taşımak uygun değil.
Dikkat edilecekler
- README'deki 220 yıldız ve kısa süredeki 5 commit olgunluk göstergesi değildir; gerçek production adoption hakkında kanıt sunmuyor.
- Web export yok; React Native Skia runtime shaders ve native video decoding buna engel oluyor.
- Reduced-motion ve accessibility davranışlarını korumak gerekiyor; bunlar yalnızca görsel bir demo detayı değil, component'in tanımlı davranışının parçası.
- 402×874 reference geometry farklı cihazlarda ayrı ayrı doğrulanmalı; README zaten iPhone simulator ve Android viewport testini öneriyor.
- Git dependency olarak kurmak yerine README'nin önerdiği copy-paste yaklaşımı daha kontrollü; bu şekilde yalnızca ihtiyaç duyulan cookbook ve helper'lar alınabilir.
- Kendi ürünüze uyarlarken GPL-3.0 kodunu kullanma kararı hukuk ve lisans incelemesinden geçirilmeli.