Web sitesi animasyonları, kod tabanlı hareketli videolar ve ses tasarımı için topladığın kaynaklar ve hazır prompt'lar. Her prompt'un yanında kopyala butonu var; Claude Code'a doğrudan yapıştırabilirsin.
Örnek: Elinde 5 maddelik bir eğitim içeriği var, örneğin "Müşteriye teklif verirken yapılan 5 hata". Bunu Instagram için kısa, animasyonlu bir videoya çevirmek istiyorsun.
Bu içerikten kısa bir animasyonlu video yapmak istiyorum. Kime: [örn. yeni başlayan freelancer'lar] Nerede oynatılacak: [örn. Instagram Reels, dikey 9:16] Süre: [örn. 45 saniye] İçerik: 1. [madde] 2. [madde] 3. [madde] 4. [madde] 5. [madde] Referans: [video bağlantısı veya https://showheyohtaki.github.io/motion-prompt/ kütüphanesinden seçtiğim efekt adları] Marka: [renkler, yazı tipi, logo dosyası] Önce bana storyboard göster: her sahnenin kaç saniye sürdüğünü ve ekranda hangi kelimelerin görüneceğini yaz. Ben onaylamadan hiçbir şey oluşturma. Onaydan sonra HyperFrames ile kod animasyonu olarak oluştur (yüklü değilse önce yükle). Tüm metinleri, renkleri ve süreleri tek bir yerde tut; sonradan "2. sahneyi yavaşlat" dediğimde sadece onu değiştir. Taslaktan saniyede bir kare yakalayıp kontrol et, sorunları düzelt, sonra 1080p MP4 olarak dışa aktar.
Daha fazla ayrıntı istersen aşağıdaki bölümlere geç; buradaki 5 adım ilk videon için yeterli.
Bir proje için video ya da animasyonlu site hazırlarken önerilen sıra:
Bir Japon geliştiricinin hazırladığı, AI'ye doğrudan verilebilecek bir GitHub kaynak kütüphanesi. Animasyon tasarımındaki profesyonel terimleri derliyor; her efektin çalışan bir gösterimi var.
Bu animasyon efekt kütüphanesini incele: https://showheyohtaki.github.io/motion-prompt/ Bana efektleri kategorilere göre kısaca listele. Ben seçtikten sonra seçtiğim efektleri [SAYFA / BİLEŞEN] üzerinde uygula. Kütüphanedeki terim adlarını ve parametreleri referans al, kendi yorumunla değiştirme.
Site yaparken referans alınacak galeriler. Bir bölüm tasarlatırken Claude'a "şu galerideki şu örneğe benzer" diye bağlantı vermek, uzun tarif yazmaktan daha hızlı sonuç verir.
Openverse API'si üzerinden, API anahtarı gerekmeden ücretsiz ses dosyası aranabiliyor. Geçişler için whoosh, patlama, tıklama ve ortam sesi (room tone) gibi efektler burada bulunuyor.
Aşağıdaki satırı proje talimatlarına (örneğin CLAUDE.md'ye) ya da ses tasarımı prompt'una ekle. Proje kütüphanesinde uygun ses yoksa Claude kendisi aramaya başlar.
Proje için uygun bir ses efekti yoksa, Openverse'i ara (https://api.openverse.org). Yalnızca license=cc0,by,pdm ve source=freesound,jamendo olan sonuçları kullan ve her ses türünü yalnızca bir kez ara (anonim kullanım günde 200 aramayla sınırlıdır). Her karenin eylemine en uygun olanı seç, seçilen URL'yi curl ile sfx/ klasörüne indir ve her sonucun attribution alanını credits.txt'ye olduğu gibi kopyala.
Opus 5.5'in hareketli videolarda ucuz elektronik bip'ler üretmesini engeller. Model sesi duyamadığı için her adımı ölçmesini ister: lisanslı müzik, vuruş tespiti, vuruşa hizalı kesmeler, hazır ses efektleri ve yayın standardında ses seviyesi.
Bu videoya ses ekle. Duyamıyorsun, o yüzden her adımı ölç ve hisse göre hareket etme. Eksikse önce ffmpeg ve librosa'yı yükle. 1. Lisanslı müzik kullan: Sana verdiğim bir parça veya Mixkit'in ücretsiz lisansı altındaki bir parça. Kaynağı ve lisansı not et. Müziği veya ses efektlerini kodda sentezleme. 2. Librosa ile vuruşları bul. Bazen ara vuruşa kilitlenir, o yüzden 120 Hz altındaki dalga formunu vuruş ızgarasına karşı çiz ve birkaç bara zoom yap. Eğer kick davullar hizalanmıyorsa, tüm ızgarayı kaydır. 3. Büyük hareketleri, sahne kesmelerini ve başlıkların görünmesini vuruşlara yerleştir. Animasyonu değiştirebiliyorsan değiştir. Değiştiremiyorsan, müziğin başladığı yeri kaydır. 4. Her kesmeye ve büyük harekete hazır bir ses efekti dosyası ver: Hareket için whoosh, nesneler göründüğünde pop, tıklamalar için click, yazma için typing sesleri. Önce projenin mevcut ses kütüphanesini kullan (örneğin HyperFrames'in birlikte gönderdiği), yoksa bana sor. 5. Seslendirme varsa en yüksek ses o olur ve biri konuşurken müzik kısılır. Ses efektleri müziğin üstünde oturur. Genel olarak yaklaşık -16 LUFS hedefle, tepe noktaları -4 dBFS altında olsun; böylece AAC sıkıştırmasından sonra veya telefonun mono hoparlöründe hiçbir şey kırpılmasın. Dışa aktarılan MP4'ü ffmpeg'in ebur128 filtresiyle ölç. WAV'ı ölçme. 6. Dışa aktarılan MP4'ten ffmpeg ile her cue'dan önce ve sonra bir kare al ve karşılaştırmak için dalga formunu çiz. Sonra kulaklıkla kontrol etmem için 5 zaman damgası seç. Bana iyi ses geldiğini söyleme.
Openverse satırını (bölüm 03) bu prompt'un 4. adımının sonuna eklersen, kütüphanede ses yoksa sana sormak yerine Openverse'te arar.
Anthropic, Claude Motion için bir başlangıç kılavuzu yayınladı. Motion bir video modeli kullanmıyor; metinlerini, grafiklerini, şekillerini ve görsellerini kodla canlandırıyor. Her animasyon kod olduğu için tek bir kelimeyi, sayıyı veya sahne süresini değiştirdiğinde geri kalan her şey aynı kalıyor.
Bu kılavuzu oku: https://support.claude.com/en/articles/17454997-get-started-with-claude-motion Sonra Claude Motion'ın yaklaşımını takip et ve bu projenin README'sini, açılış sayfasını, katılım akışını, son sürüm notlarını ve içindeki grafikleri incele. Animasyona dönüştürmeye değer üç tür şey bul: 1. Tek bir ekran görüntüsünün açıklayamayacağı bir akış, örneğin yeni bir kullanıcının başlamak için attığı adımlar. 2. Çıplak bir sayı olarak etkisiz kalan bir değişiklik, örneğin yeni sürümün eskisine göre hızı. 3. Son sürümden gösterilmeye en değer yeni özellik. Projede bunlardan biri yoksa sadece bunu söyle. Zorlama. Her fikir için kılavuzu takip et: kime yönelik olduğunu, nerede oynatılacağını ve ne kadar süreceğini söyle; sonra her sahnenin kaç saniye sürdüğünü ve ekranda hangi kelimelerin, sayıların ve ekran görüntülerinin görüneceğini belirten bir storyboard yaz. Yalnızca projedeki gerçek içerikleri kullan. Fikirleri bana ne kadar faydalı olacaklarına göre sırala. Ben birini seçtikten sonra onu HyperFrames ile kod animasyonu olarak oluştur (yüklü değilse önce yükle); tüm metinleri, sayıları ve zamanlamaları tek bir yerde tut. Daha sonra "ikinci sahneyi yavaşlat" veya "bu sayıyı %18'e değiştir" dediğimde sadece o tek şeyi değiştir. Önce bir taslak oluştur, saniyede bir kare yakala ve incele, sorunları düzelt, sonra 1080p MP4 olarak dışa aktar. Önce bana storyboard'ları göster. Ben seçene kadar hiçbir şey oluşturma.
Francesco'nun (@francescoinweb3) makalesindeki ana fikir: Claude'u kod yazan bir sohbet aracı olarak değil, odalardan oluşan bir prodüksiyon stüdyosu olarak düşün. "Hangi uygulamayı açayım" yerine "hangi odadayım" diye sor. Her şey tek asistanda olduğu için dosyalar arasında aktarım yok; tablodaki sayıyı değiştirip grafiği güncellemeyi unutma sorunu ortadan kalkıyor.
Veri kaynağını veya CRM'i bağla, soruyu düz dille sor. Claude sorguyu yazar, çalıştırır, panoyu kurar. Her grafik kendi sorgusunu taşır; bir sayının nereden geldiği her zaman görülebilir.
Bir rapor, grafik veya ürün tanıtımı ver; kısa bir animasyon ve Reels, Shorts ya da sunum için MP4 çıkarır. Animasyon kod olarak yazıldığı için:
Claude ile aynı belge, sunum veya tasarım üzerinde birlikte çalışırsın. Önce hikâyeyi burada yaz, video ve grafiklerin geleceği yerleri boş bırak, sonra diğer iki odadan doldur. Böylece bir şey anlatmayan güzel kliplerle uğraşmazsın.
Motion'a erişimin yoksa bile aşağıdaki açık kaynak skill'lerle (Remotion, GSAP, Lottie) bugün aynı yöntemle çalışabilirsin.
Skill'ler, Claude'a zanaatı (yumuşatma, zamanlama, öğelerin giriş sırası) ve bir animasyon kütüphanesini baştan sona kullanmayı öğreten talimat paketleri. On tanesinin hepsi gerekmez; yaptığın işe uyan iki üçü yeter.
Bu videoyu referans olarak inceliyorum: [BAĞLANTI / DOSYA] Neden işe yaradığını çözümle ve bana bir şartname yaz: toplam tempo, ilk hareketin hangi saniyede geldiği, metinlerin ekrana nasıl girdiği (yön, hız, yumuşatma), sahne kesmelerinin sıklığı ve doruk noktasının ne zaman geldiği. Her maddeyi ölçülebilir değerlerle (saniye, sıra, süre) yaz. Bu şartnameyi daha sonra kendi animasyonumda kullanacağım.
Makalenin özeti: Artık video üretmiyorsun, derliyorsun. Gerçek veriden, gerçek bir referansa göre, değiştirebileceğin kodla.