Kaydırdıkça İmleçlerin Kurduğu Site (Swarm Efekti) Nasıl Yapılır?

Son haftaların en çok paylaşılan web sitesi videolarında aynı sahne var: sayfa bomboş açılıyor, ekrana isim etiketli onlarca fare imleci doluşuyor ve siz aşağı kaydırdıkça bu imleçler kutular çiziyor, yazı yazıyor, görselleri yerleştiriyor. Birkaç saniye içinde site gözünüzün önünde "yapay zekâ ajanları tarafından" kuruluyor.

Efektin ilk örneği tasarımcı Joel Califa'nın "Swarm" adlı sitesi. Ardından herhangi bir sayfaya aynı efekti uygulayan bir Chrome eklentisi ve açık kaynak kütüphaneler çıktı; insanlar da efekti Claude Code gibi kodlama ajanlarıyla kendi portfolyolarına eklemeye başladı.

Bu rehberde üç yol anlatıyoruz. Hangisini seçeceğiniz amacınıza bağlı:

Yalnızca video çekmek istiyorum: Chrome eklentisiyle kendi sitenizi kaydedin (kod yok).
Siteme eklemek istiyorum: Tek satırlık hazır bir script ekleyin.
Kendime ait bir sürüm istiyorum: Efekti yapay zekâya sıfırdan yazdırın.

Adım Adım Uygulama

Swarm efekti üç parçadan oluşur:

Sayfanın planını çıkarma: Script açık sayfadaki kutuları, yazıları, görselleri ve çizgileri tek tek bulur.
Sayfayı boşaltma: Sayfanın üstüne boş bir katman koyar. Gerçek içerik altta yerinde durur.
İmleçlerle yeniden çizme: İsim etiketli imleçler görev paylaşır: biri kutuyu çizer, biri yazıyı harf harf yazar, biri görseli yerleştirir. Siz kaydırdıkça görünür olan bölümler kurulur; hızlı kaydırırsanız işe daha çok imleç katılır.

Bu yüzden efekt her siteye uygulanabilir: sitenizi yeniden tasarlamanız gerekmez, script sitenin mevcut halini kullanır.

İpucu

Efekt sade, bölümleri belirgin sayfalarda en iyi görünür. Yoğun animasyonlu, video arka planlı ya da çok uzun sayfalarda imleçlerin işi karmaşıklaşır; kayıt için sitenizin en temiz sayfasını seçin.

Amacınız yalnızca Reels ya da TikTok için bir video çekmekse sitenize hiçbir şey eklemenize gerek yok:

Chrome Web Mağazası'nda Swarm Rebuild eklentisini bulun ve Chrome'a ekleyin.
Kendi sitenizi (ya da portfolyonuzu) Chrome'da açın.
Ekran kaydını başlatın (aşağıdaki 6. adım).
Araç çubuğundaki eklenti simgesine tıklayın. Sayfa boşalır ve imleçler sayfayı yeniden kurmaya başlar.
Sayfayı yavaşça aşağı kaydırın; imleçler sizi takip eder.

Eklenti yalnızca açık sekmede ve yalnızca siz tıkladığınızda çalışır. Sitenizin kodu ya da ziyaretçileriniz etkilenmez.

İpucu

Eklenti Chrome'un kendi sayfalarında, Web Mağazası'nda ve PDF görüntüleyicide çalışmaz. Çok uzun sayfalarda bir noktadan sonra durur; videoya sayfanın ilk birkaç ekranını almanız yeterli.

Dikkat Edilecek Nokta

Başkasına ait bir siteyi bu şekilde kaydedip "ben yaptım" diye paylaşmayın. Kendi sitenizi ya da izin aldığınız bir müşterinizin sitesini kullanın.

Efekti ziyaretçilerinizin de görebilmesi için MIT lisanslı DA Swarm script'ini kullanabilirsiniz. Sitenizin HTML'inde </body> etiketinden hemen önce şu satırı ekleyin:

<script src="https://cdn.jsdelivr.net/gh/decio-afs/da-swarm@1.0.1/dist/da-swarm.min.js"
  data-trigger="query"
  data-button="true"
  data-button-label="Siteyi kurarken izle"
  data-names="Ayşe,Mert,Deniz,Ece,Kaan,Zeynep"
  defer></script>

data-trigger="query": Efekt yalnızca adres ?swarm ile açıldığında başlar (ör. siteniz.com/?swarm). Normal ziyaretçi siteyi her zamanki gibi görür.
data-button: Köşede, ziyaretçinin efekti kendisinin başlatabileceği küçük bir düğme gösterir.
data-names: İmleçlerin isim etiketleri.

Çerez bildirimi ya da canlı destek kutusu gibi dokunulmaması gereken öğelere data-swarm-skip özniteliğini ekleyin. Ziyaretçi efekti Esc ile durdurup sayfayı anında eski haline döndürebilir.

WordPress, Webflow, Wix ya da Shopify kullanıyorsanız aynı satırı sitenin "alt bilgi / özel kod" alanına yapıştırmanız yeterli.

İpucu

Sürüm numarasını (@1.0.1) sabit yazın. Script güncellendiğinde sitenizin bir gün habersizce farklı davranmasını önler. Daha da güvenlisi, dosyayı indirip kendi sunucunuzdan yüklemektir.

Dikkat Edilecek Nokta

Sitenize eklediğiniz her dış script sayfanızda tam yetkiyle çalışır. Az bilinen bir projeyi eklemeden önce kodunu bir kez gözden geçirin ya da yapay zekâya inceletin; kendi sürümünüzü yazdırmak (4. adım) bu riski ortadan kaldırır.

Efektin tamamen size ait, sitenizin tasarımına uyan bir sürümünü Claude Code, Codex ya da Cursor gibi bir kodlama ajanına yazdırabilirsiniz. Proje klasörünüzde ajanı açın ve şu istemi verin:

Siteme "swarm" adında, sayfa kaydırıldıkça birden fazla imlecin sayfayı yeniden kuruyormuş gibi göründüğü bir efekt ekle. Kodu sıfırdan yaz; başka bir projenin kodunu kopyalama.

Davranış:
- Efekt yalnızca ziyaretçi sağ alttaki "Siteyi kurarken izle" düğmesine bastığında ya da adres ?swarm ile açıldığında başlasın.
- Başlayınca sayfanın içeriği görsel olarak gizlensin; içerik DOM'da yerinde kalsın.
- İsim etiketli 12-16 imleç (telefonda 6-8) görünür bölümleri sırayla kursun: önce kutuların çerçevesini çizsin, sonra yazıları harf harf yazsın, en son görselleri yerleştirsin.
- Kaydırdıkça yeni görünen bölümler kurulsun; hızlı kaydırınca imleç sayısı artsın.
- Esc ve "Atla" düğmesi efekti anında bitirip sayfayı eski haline getirsin.
- prefers-reduced-motion açıksa efekt hiç başlamasın.
- Sitenin renklerini ve fontlarını kullan; harici kütüphane ekleme.

Bitirince masaüstü ve telefon genişliğinde dene, sonucu bana anlat.

Ajanın yaptığı değişikliği tarayıcıda açıp deneyin. Hoşunuza gitmeyen yeri tek tek söyleyin: "imleçler çok hızlı, yazma hızını yarıya indir" gibi.

İpucu

Efektin hangi dosyada durduğunu ajana sorun ve bir yere not edin. Sonradan kapatmak ya da güncellemek istediğinizde tek dosyayla uğraşırsınız.

Efekt ilk görüldüğünde etkileyicidir; ikinci ziyarette ise sayfaya ulaşmayı geciktiren bir engele dönüşür. Birkaç kural:

Her ziyarette otomatik başlatmayın. Düğme ya da özel bağlantıyla, isteyene gösterin. Hazır script'te data-trigger="always" yalnızca demo sayfaları içindir.
İçerik baştan sayfada olsun. Google ve ekran okuyucular sayfayı efektsiz görür; içeriği JavaScript ile sonradan oluşturan bir yapı kurmayın.
Hareket hassasiyetine saygı gösterin. İşletim sisteminde "hareketi azalt" ayarını açan ziyaretçide efekt başlamamalı.
Atlanabilir olsun. Esc ve görünür bir "Atla" düğmesi şart.

İpucu

Efekti en çok portfolyo, ajans ve ürün tanıtım sayfalarında kullanın. "Bu siteyi biz yaptık" mesajı veren sayfalarda anlamlıdır; bir mağazanın ödeme sayfasında değil.

Sayfayı efektin otomatik kaydırma moduyla açın: hazır script'te siteniz.com/?swarm&tour=1&speed=2. Kendi sürümünüzde de ajana bir "tur" modu ekletebilirsiniz.
Dikey video için Chrome'da F12 ile geliştirici araçlarını açıp cihaz modunu (telefon simgesi) seçin ve bir telefon boyutu belirleyin.
Ekran kaydını başlatın: Windows'ta Win + Alt + R (Xbox Game Bar), macOS'ta Cmd + Shift + 5. Kayıt başladıktan sonra sayfayı yenileyin ki efekt baştan görünsün.
Videoyu kurgu uygulamasında hızlandırın (1,5-2 kat), başa kısa bir yazı ekleyin: "Bu siteyi 30 imleç kurdu".

İpucu

Videonun ilk saniyesi boş sayfa olsun, son saniyesi sitenin bitmiş hali. Önce/sonra farkı izleyicinin videoyu sonuna kadar izlemesini sağlar.

Bu adımlarla ister yalnızca paylaşmak için bir video, ister ziyaretçilerin bir düğmeyle başlatabildiği kalıcı bir efekt elde edersiniz. Efektin güzelliği, sitenin gerçek içeriğini değiştirmemesinde: içerik baştan sayfadadır, imleçler yalnızca onu yeniden "çizer".

Henüz bir siteniz yoksa Lovable gibi bir uygulama oluşturucuyla ya da bir kodlama ajanıyla kısa sürede basit bir site kurabilirsiniz. Kodlama ajanlarını tanımak için Claude Code, OpenAI Codex ve Cursor sayfalarına, ikisini karşılaştırmak için Claude Code mu Codex mi karşılaştırmasına bakabilirsiniz.

Sık sorulan sorular

Bu efekt siteyi gerçekten yapay zekâ mı kuruyor? Hayır. Bu bir animasyon: sitenin içeriği zaten hazırdır, script onu gizleyip imleçlerin çiziyormuş gibi yeniden ortaya çıkarmasını sağlar. "Yapay zekâ ajanları siteyi kuruyor" hissi tamamen görseldir.

Efekt SEO'ya zarar verir mi? Doğru kurulursa vermez. İçerik sayfanın HTML'inde baştan durmalı ve efekt yalnızca ziyaretçi istediğinde (düğme ya da özel bağlantıyla) başlamalı. Her ziyarette içeriği gizleyen bir açılış animasyonu hem kullanıcıyı hem arama motorunu yorar.

Orijinal Swarm sitesinin kodunu kopyalayabilir miyim? Hayır. Orijinal site bir lisansla yayımlanmadı; kodunu izinsiz kullanmamak gerekir. Bu rehberdeki hazır script ve kütüphane MIT lisanslıdır ya da efekti kendi kodunuzla yazarsınız.

Telefonda çalışır mı? Hazır script telefon ekranında araç çubuğunu küçülterek çalışır. Kendi sürümünüzü yazdırırken telefonda daha az imleç kullanmasını isteyin; dar ekranda 48 imleç kalabalık görünür.