DavidHDev/canvas-ui

Neden yükseliyor

73 günde 4.707 yıldız, görsel olarak dikkat çekici demo ve birden fazla framework için hazır component sunması ilgiyi açıklıyor. Son 28 günde 8 commit var; ancak farklı yazar sayısının 1 olması, bu aktivitenin tek bir katkıcıya dayandığını gösteriyor.

Problem

Web arayüzlerine fluid, glass ve shader efektleri eklemek çoğu zaman özel canvas/WebGL kodu yazmayı gerektirir; bu da canlı DOM içeriği ve etkileşimlerle birlikte çalışmayı zorlaştırır.

Çözüm

35 component’i shadcn uyumlu registry üzerinden kaynak kod olarak projeye ekletir; README’ye göre çoğu efekt, deneysel HTML-in-canvas API ile canlı DOM’u okuyup yeniden çizer. API desteklenmediğinde GPU overlays kullanır. WebGL/GLSL ve vgpu üzerinden WebGPU/WGSL seçenekleri sunar.

Yenilik

Canlı DOM’u efektlerle birlikte yeniden çizme yaklaşımı ve bunu kopyalanabilir, framework seçenekleri olan component’lerle paketlemesi ayırt edici. Ancak kullanılan HTML-in-canvas API deneysel; yaklaşımın uzun vadeli tarayıcı desteği ve genellenebilirliği henüz kesin değil.

Teknolojiler

• TypeScript
• HTML-in-canvas API
• WebGL
• GLSL
• WebGPU
• WGSL
• vgpu
• React
• Vue
• Svelte
• Solid
• Preact
• shadcn CLI

Riskler

• HTML-in-canvas API deneysel olduğundan tarayıcı desteği ve davranışı değişebilir; README GPU overlays fallback bulunduğunu belirtiyor.
• WebGL/WebGPU efektlerinin performansı ve kullanıcı deneyimi cihazlara göre değişebilir; üretim öncesi hedef cihazlarda test edilmeli.
• Son 28 gündeki 8 commit tek bir yazara ait; çoklu framework ve renderer desteğinin bakım sürdürülebilirliği bu nedenle belirsiz.
• README lisansı MIT + Commons Clause olarak belirtiyor; ticari kullanım ve dağıtım öncesinde lisans koşulları incelenmeli.

Kullanım alanları

• Urun tanitim veya kampanya sayfalarinda Liquid, Glass, Glitch ya da Particle Reveal gibi dikkat cekici efektler
• Bir urun gorselini veya GLB/glTF modeli 3D efektle sunma
• Etkilesimli portfolio, demo veya deneysel arayuz prototipleri
• Mevcut HTML icerigini secilebilir ve etkilesimli tutarak gorsel bir katman ekleme

Alternatifler

• Three.js — 3D/WebGL sahneleri icin daha genel seviyeli bir arac; Canvas UI gibi hazir DOM efekt bilesenleriyle birebir ayni kapsamda degil.
• React Three Fiber — React icinde Three.js sahneleri kurmak icin; hazir Canvas UI efektlerinin dogrudan yerine gecen bir kutuphane degil.

Kimler için

React/Next.js basta olmak uzere desteklenen framework'lerde, ozel shader ve WebGL kodu yazmadan gorsel efekt eklemek isteyen frontend ve design engineering ekipleri icin. Efektin kendisi urun deneyiminin amacli bir parcasiysa daha uygun; standart form, dashboard veya CRUD arayuzleri icin belirgin bir ihtiyaci karsilamiyor.

Olgunluk

Deneysel ile erken beta arasi. README kapsamli dokuman, playground ve CI baglantisi sunuyor; ancak olcumlere gore repo 73 gunluk, son 28 gunde 8 commit tek yazardan gelmis ve yayinlanmis surum sayisi 0. Daha onemlisi, HTML-in-canvas yolu deneysel tarayici API'sine bagimli; README bu nedenle fallback gerektigini de belirtiyor. Bunlar tek basina kalite gostergesi degil, ama uretimde genis kapsamli benimsemeden once tarayici, performans ve bakim testlerini gerektiriyor.

Ne zaman kullanılır

Kaliwa'nin landing page'i, kampanya sayfasi veya belirli bir urun demosunda tek bir bolumun Liquid, Glass ya da 3D Object benzeri bir efektle gorsel olarak ayrismasi isteniyorsa, once tek bilesenle sinirli bir prototip yapin. Efekt desteklenmeyen tarayicilarda da temel icerik calismaya devam ediyor mu ve dusuk/orta seviye telefonlarda performans kabul edilebilir mi, bunu gercek cihazlarda olcun.

Ne zaman kullanılmaz

Uygulamanin temel akislari icin, standart dashboard/form bilesenleri icin veya butun ziyaretcilerde ayni goruntu zorunluysa kullanmayin. HTML-in-canvas efektlerinde deneysel Chrome API'si ve fallback farki kullanici deneyimini degistirebilir. Efektin urun degerine katkisi yoksa ekstra GPU isi ve tarayici testleri maliyetini karsilamaz.