Shaders, 200'den fazla WebGPU efektini React, Vue, Svelte ve Solid için component olarak açık kaynak yaptı

Neler yayınlandı

Shader Effects, Inc. tarafından GitHub ve npm üzerinde yayınlanan Shaders adlı açık kaynak proje, WebGPU efektlerini React, Vue, Svelte, Solid ve düz JavaScript için yeniden kullanılabilir component'lere dönüştürüyor. Depo, 7 Ekim 2026'da Hacker News ana sayfasına ulaştı.

Projenin README'sine göre kütüphane 200'den fazla efekt içeriyor — gradyanlar, gürültü (noise), cam, metal, ışık, bozulmalar, geçişler, bulanıklaştırma ve imleç efektleri — geliştiriciler bunları sayfaya component olarak ekleyip iç içe yerleştirebiliyor, harmanlayıp maskeleyebiliyor. Motor, tüm component'ler ve framework bağlayıcıları MIT lisanslı. Ekip, kodu üretime hazır olarak tanımlıyor; TypeScript ile yazılmış, tipli props'lar, reaktif güncellemeler ve SSR güvenliği içeriyor ve halihazırda 16.000'den fazla tasarım mühendisi tarafından binlerce web sitesinde kullanıldığını belirtiyor — bu rakamlar projenin kendi beyanına dayanıyor.

Tek canvas, katmanlı efektler

Temel fikir, bir canvas render eden tek bir Shader component'i. Alt öğeleri katmanlar; üstten alta değerlendirilip GPU'da harmanlanıyor. Aynı component adları ve props'lar her bağlayıcıda çalışıyor: Shader içinde bir LinearGradient artı bir CursorTrail, React, Vue, Svelte ve Solid'de neredeyse aynı görünüyor; JavaScript girişi ise aynı katmanları düz nesneler olarak alan bir createShader fonksiyonu sunuyor. README, 200'den fazla component'in her birinin canlı önizleme ve tam belgelenmiş props'larla geldiğini söylüyor.

Görsel olarak tasarla, CLI ile senkronize et

Efektleri elle yazmak yerine çoğu kullanıcının onları tasarlaması bekleniyor. shaders.com adresindeki ücretsiz editör, component'lerin yığıldığı sonsuz bir canvas; props'lar gerçek kontrollerle ayarlanabiliyor, imleçle veya zaman çizelgesiyle yönetilebiliyor ve bir Export Code düğmesi seçilen framework için component ağacını yapıştırmaya hazır şekilde üretiyor.

Bir CLI, bu iş akışını kod tabanına bağlıyor. npx shaders connect bir depoyu bir Shaders projesine bağlıyor, install seçilen efektleri gerçek component dosyaları olarak yazıyor ve update editördeki değişiklikleri geri çekiyor. Araç framework'ü algılıyor, components klasörüne yazıyor ve kurulumları bir lock dosyasına kaydediyor; globally kurulacak bir şey yok.

Yapay zeka ajanları ve Pro katmanı

Proje ayrıca doğrudan kodlama ajanlarını hedefliyor. npx shaders@latest install-mcp ile yapılandırılan bir MCP sunucusu, Claude Code, Cursor, Codex, Windsurf, Copilot ve diğer istemcilere bağlanabiliyor; böylece bir ajan efektleri bulabiliyor, kurabiliyor ve düzenleyebiliyor; README bunun ücretsiz hesaplar dahil her hesapta çalıştığını belirtiyor. Bir llms.txt dosyası belgeler sayfalarını indeksliyor ve bir llms-full.txt varyantı props, varsayılan değerler ve aralıklarla birlikte tam component referansını taşıyor.

Yukarıdakilerin tamamı ücretsiz. Bir Pro aboneliği, koleksiyonlara düzenlenmiş 1.000'den fazla üretime hazır preset, 55'ten fazla tamamlanmış web sitesi bölümü, filigransız HD video ve görsel render'ı, tek tıkla Framer eklentisi, editörde sınırsız sürüm geçmişi ve CLI ile MCP üzerinden Pro preset'lere erişim ekliyor. shaders.com'daki platform MIT paketinin dışındadır ve kendi şartlarını taşır.

Kendi component'inizi yazmak

Özel efektler için kütüphaneyi fork etmek gerekmiyor. Bir component, defineShader'a geçirilen düz bir nesnedir: bir ad, varsayılan değerler ve dönüşümlerle tipli props'lar ve ya WGSL ile (kararlı yol) ya da kütüphanenin std primitive'lerinden birleştirilerek (deneysel) yazılmış piksel düzeyinde bir paint fonksiyonu. README, bu şekilde tanımlanıp yerleşik herhangi biri gibi mount edilen küçük bir Halo efekti gösteriyor. Katkılar bir monorepo düzenini izliyor: motor packages/core içinde yaşıyor, her component için bir klasör var ve framework paketleri buradan üretiliyor.

Neden önemli

Web'de GPU görselleri geleneksel olarak shader dili becerisi ve framework başında ayrı işler gerektiriyordu. WebGPU'yu beş ekosistemde aynı props'lara sahip tipli, bildirimsel component'lerin arkasına sarmalayan Shaders, GPU destekli tasarımın maliyetini kabaca herhangi bir başka UI kütüphanesi kurmak düzeyine indiriyor. Editör artı CLI iş akışı ve yapay zeka ajanları için MCP desteği, component kütüphanelerinin gelecekte nasıl dağıtılıp tüketilebileceğine işaret ediyor; ücretli editör ve preset pazaryeriyle MIT çekirdek ise tanıdık bir açık kaynak sürdürülebilirlik modeli — ancak alıntılanan benimseme rakamları projenin kendisine ait.