Kaydırdıkça Şekil Değiştiren Animasyonlu Web Sitesi Yapay Zekâyla Nasıl Yapılır

Kaydırdıkça şekil değiştiren, 3 boyutlu parçacık animasyonlarıyla dolu bir web sitesi artık çok daha ulaşılabilir. Bu yazıda kendi sitemimi Claude ile nasıl yeniden tasarladığımı, hangi referansı kullandığımı ve yapay zekâyı doğru yönlendirmek için ne yapmam gerektiğini paylaşıyorum.

Referans Kaynağı: Stylus Referro Design

İlk adım iyi bir referans bulmak. Ben stylus riferro.design adlı siteyi kullandım. Bu site, 3 boyutlu ve scroll animasyonlu onlarca tasarımı bir arada sunuyor. Her tasarımın içine girince sol altta renk paleti ve tipografi, sağda ise design.md dosyası ve CSS kodları yer alıyor. Yani hem görsel referans hem de teknik detaylar elinizin altında.

Ben bu tasarımlar arasından DALA adlı sitenin stilini beğendim ve oradan ilerlemeye karar verdim.

Claude'a İlk Prompt: Ne Yanlış Gitti?

DALA sitesinin design.md dosyasını kopyalayıp doğrudan Claude'a yapıştırdım. Fakat Claude, mevcut sitemin yalnızca renk paletini değiştirmekle yetindi. Animasyon ve genel yapı hiç değişmemişti.

Sorun şuydu: Claude, referans sitedeki animasyonun nasıl çalıştığını görmemişti. Bunun üzerine Claude'a şu yönlendirmeyi yaptım: "Bu sayfayı aç, animasyonu izle, ondan sonra tasarıma karar ver." Claude sayfayı inceledikten sonra dört sekmeyi, renk paletini ve tipografiyi ayrı ayrı analiz etti. Bu sefer sonuç çok daha yakındı.

Parçacık Teması ve Kişiselleştirme

Claude ilk etapta referans sitedeki gibi noktalardan oluşan bir parçacık tasarımı üretti. Ancak bu tasarım sitemin genel havasıyla pek uyuşmadı. Bunun üzerine Claude'a şunu söyledim:

"Buradaki nesneleri benim Instagram gönderilerimin kapak görselleriyle oluştur. Nesne aynı nesne olsun, ama toz-gaz bulutu yerine kapak görsellerimle yapalım."

Claude bu isteği uyguladı ve ortaya şu çıktı: Sayfa açıldığında Instagram kapak görsellerimden oluşan geometrik bir beyin şekli kendi kendine dönüyor. Sayfayı aşağı kaydırdıkça bu kapaklar güzel bir animasyonla parçalanıyor ve sırasıyla farklı şekillere dönüşüyor: bir ampul, bir dünya ve en altta December 5 logosunu anımsatan bir footer. Her bölümde metin ve içerik alanları kendi sitenize göre düzenlenebiliyor.

Adım Adım Özet

1. Referans seçin: Stylus Riferro Design gibi bir kaynaktan beğendiğiniz bir scroll animasyonu bulun.
2. Teknik dosyayı alın: Seçtiğiniz tasarımın design.md ve renk/tipografi bilgilerini kopyalayın.
3. Claude'a yapıştırın: İlk sonuç istediğiniz gibi değilse Claude'dan referans siteyi bizzat incelemesini isteyin.
4. Kişiselleştirin: Varsayılan parçacıklar yerine kendi görsellerinizi, renklerinizi ve içeriklerinizi kullanmasını söyleyin.
5. Metinleri düzenleyin: Şekiller oturduktan sonra bölüm metinlerini ve başlıkları sitenize göre güncelleyin.

Rehber ve PDF

Bu süreci adım adım belgeleyen, kullandığım promptları ve yapılması gerekenleri açıklayan bir rehber hazırladım. Sitemin Dokümanlar bölümünden erişebilir, oradan doğrudan indirebilirsiniz. Yorumlara "şekil" veya "şükül" yazarsanız PDF'yi DM üzerinden de iletebilirim.

Sonuç

Yapay zekâyla scroll animasyonlu bir site yapmak tamamen mümkün; ancak doğru referansı seçmek ve Claude'u sadece metinle değil, animasyonu bizzat göstererek yönlendirmek kritik bir fark yaratıyor. İlk denemeniz mükemmel olmayabilir — bende de olmadı. Ama birkaç yönlendirmeyle sonuç, başlangıçtan çok daha etkileyici bir yere ulaşabiliyor.