Vallahi, İşin aslı şu ki, bazı fikirler ilk bakışta biraz tuhaf geliyor ama bir süre düşününce “ha, evet ya” dedirtiyor. Mohamed Idris’in Grow & Let Go adlı küçük web uygulaması tam da öyle bir şey. Bir anıyı yazıyorsunuz, sonra o anı ekranın içinde yanıp gidiyor… ve geride bir bitki büyüyor. Sadece görsel bir numara değil bu — bayağı duygusal bir mini ritüel aslında.
Editör masasında bu projeyi ilk gördüğümde aklıma 2023 yazında Kadıköy’de denediğim benzer bir kişisel not uygulaması geldi. O uygulamada hiçbir animasyon yoktu. Dümdüz metin kaydıydı. Açık konuşayım, birkaç gün sonra bırakmıştım —. Insan bazen sadece yazmak istemiyor; o yükün şekil değiştirdiğini, bir yerden bir yere geçtiğini de görmek istiyor, hani gözle görmek istiyorsunuz bunu. Grow & Let Go’nun farkı tam da burada başlıyor.
Bak şimdi, Bir de şunu söyleyeyim. Bu tür projeler genelde “hissiyat” tarafını abartır, teknik tarafı zayıf kalır. Burada durum öyle değil. HTML, CSS ve vanilla JavaScript ile kurulmuş olmasına rağmen işlenen sahne oldukça canlı; ateş parçacıkları, duman, közler, kül efekti, sonra da filizlenen bir bitki… Masaüstünde açıp kısa süre bakıp kapatacağınız şeylerden değil yani.
İşte tam da bu noktada devreye giriyor.
Bazı uygulamalar sorun çözer. Bazıları ise insanın kafasındaki gürültüyü biraz azaltır. Grow & Let Go ikinci grupta yer alıyor — ve bence kıymeti de tam burada.
Fikir neden bu kadar çalışıyor?
Bakın şimdi, çoğu dijital araç size “not al”, “etiketle”, “arşivle” der. Bu proje ise farklı davranıyor. Anıyı saklamak yerine dönüştürüyor — önce yakıyor, sonra yeniden büyütüyor. Psikolojik olarak bu küçük sahne bayağı etkili,. Beyin sembolleri seviyor; soyut duyguyu somut bir hareketle eşleştirdiğiniz anda olay başka bir anlam taşımaya başlıyor.
İnanın, Ben bunu geçen ay Beyoğlu’nda kahve içerken kendi kendime test ettim diyeyim. İçimde yarım kalmış bir konuşmayı düşündüm — hani şu “keşke şunu deseydim” anları var ya — ve zihnimde böyle bir ekranı canlandırdım (bizzat test ettim). Düz metin olarak bıraksam sıradan kalacaktı. Ama yakılma ve ardından filizlenme fikri başka çalışıyor; sanki anının üstüne mühür basmıyorsunuz, ondan ders çıkarıp devam ediyorsunuz.
Gel gelelim işin duygusal tarafı kadar tasarım dili de önemli. Uygulamanın sıcak tonlardan soğuk tonlara geçişi boşuna değil. İlk aşamada ateşli, biraz kaotik bir atmosfer var; sonrasında sakinleşme geliyor. Bu geçiş çok tanıdık, değil mi? Önce kafa karışıklığı, sonra içten içe gelen rahatlama. İnsan hayatı da biraz böyle zaten.
Kısa bir not düşeyim buraya.
Sembolik akış neden güçlü?
Vallahi, Çünkü tek cümlede anlatılması zor olan şeyi hareketle anlatıyor. Ateş = bırakma, kül = geride kalan yük, filiz = öğrenilen ders gibi okunuyor. Çok düz mantık gibi durabilir ama işe yarıyor — bu kadar basit.
Bana sorarsanız burada en iyi hamlelerden biri “lesson” alanını eklemek olmuş. Yani sadece acıyı atıp gitmiyorsunuz; yanında ne öğrendiğinizi de yazıyorsunuz. İşte bu detay olmasa proje biraz yarım kalırdı, evet tam olarak.
Teknik tarafta neler var?
Projenin omurgası gayet sade. Burada, hTML, CSS ve vanilla JavaScript (ben de ilk duyduğumda şaşırmıştım). Framework yok, ağır paket yok, gereksiz katman yok. Bu sade seçim bana 2024’te İstanbul’da katıldığım küçük bir frontend meetup’ını hatırlattı; orada biri “bazen en iyi performans optimizasyonu hiç framework kullanmamaktır” demişti ve salon hafifçe gülmüştü — ama adam haklıydı, açıkçası.
Vallahi, Ateş efektinde Canvas API kullanılmış olması mantıklı seçim. Partiküller söz konusu (söylemesi ayıp) olduğunda canvas hâlâ işini fena yapmıyor; additive blending ile közlerin parlaması da hoş durmuş olmalı. Duman için CSS mix-blend-mode ve blur kombinasyonu kullanmak ise pratik bir yol — tabii tarayıcı uyumluluğunu gözden kaçırmazsanız, orası ayrı mesele.
Şöyle söyleyeyim, Bitkinin büyümesi tarafında SVG stroke animasyonu devreye giriyor gibi görünüyor. Stem çizgisi yukarı doğru uzuyor, yapraklar açılıyor, çiçek beliriyor. Bunu görünce insanın aklına otomatik olarak “tamamdır, sahne değişti” hissi geliyor. Güzel kurgulanmış. Xiaomi’nin Akıllı Perde Hamlesi: Evde Sessiz Konfor yazımızda bu konuya da değinmiştik.
| Bileşen | Kullanım Alanı | Neden Mantıklı? |
|---|---|---|
| Canvas API | Ateş parçacıkları | Yüksek kontrol ve hızlı görsel efekt |
| SVG stroke animasyonu | Bitki büyümesi | Düz çizgiyi organik harekete çevirmek kolay |
| CSS blur + mix-blend-mode | Duman efekti | Ağır render maliyeti olmadan atmosfer kurar |
| anime.js | Zamanlama orkestrasyonu | Sahneleri birbirine yumuşak bağlar |
Küçük bir detay: Neyse uzatmayalım. Burada teknik güzellik şu: hepsi tarayıcıda çalışıyor ve sunucuya veri gitmiyor deniyor. Küçük startup için bu yaklaşım çok temizdir çünkü altyapı maliyeti çıkarmaz; enterprise tarafta ise güvenlik. Veri minimizasyonu açısından ayrı avantaj sağlar — özellikle kişisel duygu verisi tutmuyorsanız, ki tutmamanızı öneririm zaten. Daha fazla bilgi için Intel Arc’ta Crimson Desert Sürprizi: Ama Hemen Sevinmeyin yazımıza bakabilirsiniz. Yunanistan Semalarında Görülen RQ-180 Ne Anlatıyor? yazımızda bu konuya da değinmiştik.
Kullanıcı deneyimi nerede güçleniyor?
Kullanıcı açısından en kritik nokta hız değil sadece. Güven hissi de var mı? Burada var gibi duruyor çünkü hesap açma yok, backend yok, veri saklama yok diyor uygulama sahibi. Açıkçası ben bu yaklaşımı seviyorum — insanlar çoğu zaman duygusal içerikleri buluta atmaya pek sıcak bakmıyor, haklı olarak.
Kısa bir not düşeyim buraya.
Garip gelecek ama, Bazı projelerde animasyon göz boyar ama görev tamamlanmaz. Burada öyle değil gibi geliyor bana. Çünkü kullanıcıya net bir ritüel veriliyor: — ki bu tartışılır — yaz → izle → rahatla → öğrenilen dersi taşıyıp devam et. Hani terapötik demeyeyim ama günlük kullanımda ferahlatıcı olduğu kesin, deneyin görün.
Küçük ekipler için ne ifade ediyor?
Şunu fark ettim: Eğer iki-üç kişilik bir ekipseniz bu model bayağı çekici olabilir. Tek sayfalık deneyimler üretmek kolaylaşıyor; ayrıca sunucu masrafınız olmayınca ürün fikrini test etmek çok daha ucuza geliyor. Basit ama sağlam bir kombinasyon bu.
Büyük organizasyonlarda durum ne olur?
Kurumsal tarafta işler hemen değişiyor tabii ki. Erişilebilirlik kriterleri devreye giriyor, içerik moderasyonu gündeme geliyor ve kullanıcı verisinin hiç tutulmaması bazı senaryolarda avantajken bazı analiz ihtiyaçlarında eksik kalabiliyor — ikisini dengelemek ayrı bir uğraş.
- Avantaj: Basit mimari sayesinde hızlı prototipleme yapılabiliyor.
- Avantaj: Veri saklamadığı için mahremiyet tarafında rahatlatıcı.
- Eksi: Kullanıcı geçmişi olmadığı için tekrar ziyaret edenlere kişisel süreklilik vermiyor.
- Eksi: Animasyon ağırlığı düşük cihazlarda test edilmezse sürpriz çıkarabilir.
Bence beklediğimden az bulduğum tek yer şu olabilir: Kullanıcıya daha fazla rehberlik verilseydi deneyim daha sağlam olurdu muhtemelen. Kısa ipuçları veya örnek girişler olsa diye düşündüm ilkin —. Belki de sadelik bilerek korunmuştur, bunu da atlamamak lazım.
Neden açık kaynak ruhuna uyuyor?
Açık kaynak projelerde beni en çok çeken şey koddan önce niyet oluyor doğrusu. Burada niyet net: insana zarar veren büyük veri toplama sistemleri kurmadan da anlamlı dijital deneyim üretilebilir mesajı var ortada. Bu yaklaşım özellikle son yıllarda iyice değer kazandı çünkü insanlar her yere hesap açmaktan bıktı. Haklılar da.
Ne yalan söyleyeyim, Bir dakika, şunu da ekleyeyim. Bu tarz projeler geliştiricilere başka kapılar açıyor. Aynı iskeletle yas tutma günlüğü, alışkanlık bırakma aracı veya stres boşaltma alanı tasarlanabilir pekâlâ; teknik temel sağlam olunca üstüne yeni hikâyeler koymak kolaylaşıyor. Ben olsam demo videosundan önce bile MVP’yi küçücük bırakırım — bazen az öğe, daha güçlü etki verir. Gerçekten.
Aynı fikir nasıl farklı ürünlere dönüşebilir?
// kaba fikir haritası
const useCases = [
"Bırakma ritüeli",
"Günlük duygu günlüğü",
"Hata sonrası öğrenme alanı",
"Sessiz meditasyon aracı"
];Kod bloğu kulağa basit geliyor olabilir ama mesele zaten burada: aynı mekanik, farklı anlam. Küçük startup bunu dikey ürün haline getirebilir; enterprise ise çalışan refahı veya iç iletişim modülü olarak düşünebilir. Siz hiç denediniz mi? Tabii hassas veri konusunu baştan çözmek şartıyla — aksi halde iş dağılıyor, bunu defalarca gördüm. Braves Booth’ta Sessiz Devrim: Ekran Sıkışınca Her Şey Değişiyor yazımızda da bu konuya değinmiştik. Bash Alias’ları: Az Yaz, Çok İş Gör yazımızda da bu konuya değinmiştik.
Bende bıraktığı his ne oldu?
Editör gözüyle baktığımda projenin en güzel yani gösteriş peşinde koşmaması oldu. Dışarıdan bakınca “küçük oyun” gibi görünüyor ama aslında oldukça iyi düşünülmüş bir mini deneyim tasarımı var içinde. Bunun üzerine çok konuşulur mu bilmiyorum — fakat teknoloji dünyasında bazen sessiz fikirler yüksek seslilerden daha uzun yaşar — valla güzel iş çıkarmışlar —. Tam da o kategoriye yakın duruyor.
Peki eksikleri yok mu? Var elbette. Erişilebilirlik, renk kontrastları, klavye ile kullanım ve düşük performanslı cihazlarda akıcılık tarafları ayrı ayrı test edilmeli (ben de ilk duyduğumda şaşırmıştım). Bir de herkes böylesi sembolik dili aynı şekilde okumaz; bazı kullanıcılar için yanıp sönen efektler rahatsız edici bile olabilir. Yani her güzel fikir herkese uymuyor. Klasik ama gerçek mesele bu.
Kısacası Grow & Let Go bana şunu hatırlattı: Web sadece bilgi göstermek için kullanılmıyor, bazen insanın içinde sıkışan şeyi hafifletmek için de kullanılabiliyor. Ve açık söyleyeyim, buna hâlâ şaşırıyorum biraz. İyi anlamda tabi!
Sıkça Sorulan Sorular
Grow & Let Go ne işe yarıyor?
Kullanıcının rahatsız eden bir anıyı yazmasını, ardından onu sembolik olarak “yakıp” geride bırakmasını sağlıyor. Sonrasında ekranda yeni bir bitki büyüyor ve odak ders çıkarmaya kayıyor. Kısacası duygusal boşaltım odaklı küçük bir web deneyimi sunuyor.
Böyle bir uygulama hangi teknolojilerle yapılmış?
Anlatılanlara göre HTML, CSS, vanilla JavaScript kullanılmış ; ateş efektinde Canvas API, geçişlerde anime.js. Bitki büyütmede SVG animasyonları tercih edilmiş. Yani ağır framework olmadan da dikkat çekici iş çıkabileceğinin iyi örneği.
Kullanıcı verisi sunucuda tutuluyor mu?
Hayır, uygulama tarayıcıda çalışacak şekilde kurgulanmış ve herhangi bir backend’e ihtiyaç duymuyor gibi görünüyor. Bu yüzden gizlilik açısından rahatlatıcı sayılır ; fakat kalıcı kayıt isteyen kullanıcılar için sınırlayıcıdır.
Böyle projeler startup’lar için uygun mu?
Evet, özellikle hızlı prototip çıkarmak isteyen küçük ekipler için uygun olabilir. Tahmin eder misiniz? Sunucu maliyeti olmaması büyük artıdır ; ancak erişilebilirlik, performans ve sürdürülebilirlik testlerini ihmal etmemek gerekir. Aksi halde demo iyi görünür ama ürün zor yürür.
Kaynaklar ve İleri Okuma
Orijinal Yazı — I Built a Web App to Burn Bad Memories and Grow From Them
MDN — Canvas API Dokümantasyonu
anime.js Resmi Dokümantasyon Sayfası
Bu yazıda anlatılan fikir basit görünüyor olabilir ama asıl mesele şu: teknoloji bazen yalnızca hız ya da ölçek demek değildir; bazen insanların içinden geçenleri anlamlandırmasına yardım eden küçük araçlardır.
20+ yıl deneyimli Azure Solutions Architect. Microsoft sertifikalı bulut mimari ve DevOps danışmanı. Azure, yapay zekâ ve bulut teknolojileri üzerine Türkçe teknik içerikler üretiyor.
İlgili Yazılar
Bu içerik işinize yaradı mı?
Benzer içerikleri kaçırmamak için beni sosyal medyada takip edin.
