Müzikle senkronize olarak döngüsel UI hareket tasarımları oluşturmak için kapsamlı bir istem şablonu; burada öğeler çeşitli durumlar arasında dönüşür.
Komut
<inputs>
Benden şunları iste: Şeklin dönüşmesini istediğim 8 ila 12 UI durumu (ör. buton, yükleyici, oynatıcı, kaydırıcı, anahtar, sekmeler, grafik, komut paleti, bildirim), tamamen siyah-beyaz mı yoksa tek bir vurgu rengi mi kullanılacağı ve telif hakkı içermeyen yaklaşık 120 BPM'lik bir şarkı (ör. Mixkit, ticari kullanım için ücretsiz).
</inputs>
<direction>
Dribbble seviyesinde UI hareketi. Tek bir şekil, asla kesinti yok: Her durum, içeriği kısa bir bulanıklıkla değişirken boyutunu, yarıçapını ve rengini dönüştüren aynı öğedir. Bir imleç, gerçek tıklamalar ve sürüklemelerle her değişikliği yönlendirir. Açık sıcak gri tuval, siyah-beyaz bileşenler, tek bir temiz UI yazı tipi (Geist). Her yerde yaylar, en fazla küçük bir taşma. Kamera, her durumun çerçeveyi doldurması için yakınlaşır. Son kare ilk karedir, böylece döngü devam eder.
Yasak olanlar: Zıplatan easing efektleri, parçacık patlamaları, parlamalar, UI kabuklarında gradyanlar, uyumsuz simge çizgileri, ölü zaman, şablon gibi görünen her şey.
</direction>
<structure>
120 BPM, 7 ölçü, her vuruşta bir şey olur.
Buton → yükleyici → onay işareti → dinamik ada → play/pause dönüşümü olan müzik oynatıcı → ilerleme çubuğunu sürükle → maksimum değeri aşınca uzayan bir ses kaydırıcısına dönüşür → anahtar vuruşta açılır → düğme sıvı sekme göstergesine dönüşür → sekmeler, üzerine gelindiğinde ipucu gösteren kendi kendini çizen bir grafiğe açılır → ⌘K'ya daralır → filtrelemek için yaz → enter → bildirim → tekrar butona dön.
</structure>
<build>
1. Tek bir HTML dosyası, kare 1440x1440. Her stil seek(t) içinde zamandan hesaplanır: CSS geçişleri yok, zamanlayıcı yok, kareler arasında taşınan durum yok.
2. Yaylar kapalı form adım tepkileridir. Hedefi birçok kez değişen bir değer, her değişiklik için bir yay toplamıdır, bu nedenle saf bir zaman fonksiyonu olarak kalır.
3. Sekme göstergesinin iki kenarı farklı yaylarda hareket eder, böylece ön kenar arka kenardan önce uzar. Anahtar düğmesi için de aynı teknik kullanılır.
4. Sürüklemeler doğrudan manipülasyondur: İmleç basılı tutulurken değer konumundan hesaplanır. Bırakıldığında, bulunduğu yerden yaylanarak geri döner.
5. Şarkıyı numpy ile analiz et, vuruş ızgarasını belirle ve bir downbeat'te başla. Her UI sesini ölçülen tepe noktasına göre yerleştir.
6. Playwright ile render al: Kare başına 4 alt kare, 60fps'de hareket bulanıklığı için ffmpeg tmix ile karıştırılır.
7. Tam renderdan önce vuruş başına bir kare render al. Izgarada olmayan, sıkışık veya okunması zor her şeyi düzelt.
</build>
<gotchas>
Kameranın ölçeklendirdiği veya metnin bulanıklaştığı hiçbir öğeye will-change ekleme. Dönüşen bir konteyner içinde değişen metin, üst üste binmemesi için kendi giriş ve çıkış zamanlamasına ihtiyaç duyar. Döngünün takılmaması için son kareyi ilk kareyle birebir aynı yap, imleç dahil.
</gotchas>
<start>
Benden girdileri iste, ardından kod yazmadan önce state listesiyle birlikte bana bir plan sun.
</start>
Bu prompt nasıl kullanılır
1
Yukarıdaki tam prompt'u kopyalayın.
2
Claude Opus 5.5'i destekleyen bir platform açın (örneğin YouMind) ve prompt'u yapıştırın.
3
Konuyu, stili veya ayrıntıları fikrinize göre değiştirin ve üretin.
Bu, YouMind'ın prompt kütüphanesinden ücretsiz bir AI prompt'udur. Kopyalayıp uyarlayabileceğiniz binlerce videolar prompt'u daha keşfedin.
Yapay zekanın on binlerce komutu taramasına izin ver. Modele, tarih aralığına ve anahtar kelimeye göre filtrele; görüntülenme, kaydetme, paylaşım gibi etkileşim metriklerine göre sırala.
Her fotoğrafı ayrıntılı bir AI görsel prompt'una dönüştürün. Ücretsiz görselden prompt'a dönüştürücü kompozisyonu, stili ve ışığı analiz eder; istediğiniz görünümü saniyeler içinde yeniden yaratırsınız.
