İmleç tarafından yönlendirilen birbirine sorunsuz bir şekilde dönüşen etkileşimli 3D kullanıcı arayüzü öğeleri

Prompt

<inputs>
Benden şunları iste: şeklin dönüşmesini istediğim 8 ila 12 UI durumu (ör. button, loader, player, slider, toggle, tabs, chart, command palette, toast), saf siyah ve beyaz ya da tek bir vurgu rengi ve yaklaşık 120 BPM hızında, telifsiz bir şarkı (ör. Mixkit, ticari kullanım için ücretsiz).
</inputs>

<direction>
Dribbble düzeyinde UI hareketi. Tek şekil, asla kesme: her durum, boyutunu, yarıçapını ve rengini değiştiren, içeriği kısa bir bulanıklıkla değişen aynı öğenin morphing hâlidir. Bir imleç, gerçek tıklamalar ve sürüklemelerle her değişimi yönetir. Açık sıcak gri bir tuval, siyah ve beyaz bileşenler, tek ve temiz bir UI fontu (Geist). Her yerde spring kullan, en fazla çok küçük bir overshoot olsun. Her durumun kareyi doldurması için kamera yakınlaşır. Son kare ilk kareyle aynı olur, böylece döngü oluşturur.
Yasaklar: zıplayan easing, parçacık patlamaları, glow efektleri, UI chrome üzerinde gradientler, uyumsuz ikon çizgi kalınlıkları, boş geçen süre ve şablon gibi görünen her şey.
</direction>

<structure>
120 BPM, 7 ölçü, her vuruşta bir şey olur.
Button → loader → check → dynamic island → play/pause morph özelliğine sahip music player → progress bar'ı scrub et → maksimum değerin ötesine sürüklendiğinde uzayan bir volume slider'a dönüşür → bir toggle vuruşta açılır → knob, liquid tab indicator'a dönüşür → tabs açılarak kendini çizen bir chart'a dönüşür; hover sırasında bir tooltip görünür → ⌘K'ya çöker → filtrelemek için yaz → enter → toast → button'a geri dön.
</structure>

<build>
1. Tek bir HTML dosyası, kare 1440x1440. Her stil seek(t) içinde zamandan hesaplanır: CSS transition yok, timer yok, kareler arasında taşınan state yok.
2. Spring'ler closed-form step response olarak tanımlanır. Hedefi birçok kez değişen bir değer, her değişim için bir spring'in toplamıdır; böylece zamanın saf bir fonksiyonu olarak kalır.
3. Tab indicator'ın iki kenarı farklı spring'leri izler; böylece öndeki kenar arkadaki kenarın önüne uzar. Toggle knob için de aynı yöntemi kullan.
4. Sürüklemeler doğrudan manipülasyondur: imleç basılı tutulduğu sürece değer, imlecin konumundan hesaplanır. Bırakıldığında bulunduğu noktadan spring ile geri döner.
5. Beat grid'ini analiz etmek için şarkıyı numpy ile analiz et ve bir downbeat'te başlat. Her UI sesini ölçülen peak noktasına yerleştir.
6. Playwright ile render al: hareket bulanıklığı için 60fps'te, kare başına 4 alt kareyi ffmpeg tmix ile harmanla.
7. Tam render'dan önce beat başına bir kare render al. Grid dışındaki, sıkışık veya okunması zor her şeyi düzelt.
</build>

<gotchas>
Kameranın ölçeklediği veya metnin bulanık render edildiği hiçbir öğeye will-change ekleme. Morphing container içinde değişen metnin kendine ait giriş ve çıkış zamanlaması olmalı; aksi takdirde metinler üst üste biner. Son kareyi, imleç konumu ve hızı da dâhil olmak üzere, ilk kareyle tamamen aynı yap; yoksa döngü takılır.
</gotchas>

<start>
Benden girdileri iste, ardından herhangi bir kod yazmadan önce state listesini beat grid üzerinde göster.
</start>

<inputs>
Ask me for: 8 to 12 UI states I want the shape to become (e.g. button, loader, player, slider, toggle, tabs, chart, command palette, toast), pure black and white or one accent color, and a royalty-free song around 120 BPM (e.g. Mixkit, free for commercial use).
</inputs>

<direction>
Dribbble-level UI motion. One shape, never cut: every state is the same element morphing its size, radius and color while its content swaps with a short blur. A cursor drives every change with real clicks and drags. Light warm-gray canvas, black and white components, one clean UI font (Geist). Springs everywhere, a tiny overshoot at most. The camera zooms so each state fills the frame. The last frame is the first frame, so it loops.
Banned: bouncy easing, particle bursts, glows, gradients on UI chrome, mismatched icon strokes, dead time, anything that looks like a template.
</direction>

<structure>
120 BPM, 7 bars, something happens on every beat.
Button → loader → check → dynamic island → music player with a play/pause morph → scrub the progress bar → it becomes a volume slider that stretches when dragged past max → a toggle flips on the beat → the knob becomes a liquid tab indicator → the tabs open into a chart that draws itself, with a tooltip on hover → it collapses into ⌘K → type to filter → enter → toast → back to the button.
</structure>

<build>
1. One HTML file, square 1440x1440. Every style is computed from time inside seek(t): no CSS transitions, no timers, no state carried between frames.
2. Springs are closed-form step responses. A value that changes target many times is the sum of one spring per change, so it stays a pure function of time.
3. The tab indicator's two edges ride different springs, so the leading edge stretches ahead of the trailing one. Same trick for the toggle knob.
4. Drags are direct manipulation: while the cursor is held, the value is computed from its position. On release it springs back from wherever it was.
5. Analyze the song with numpy for the beat grid and start on a downbeat. Place every UI sound by its measured peak.
6. Render with Playwright: 4 subframes per frame, blended with ffmpeg tmix for motion blur at 60fps.
7. Render one frame per beat before the full render. Fix anything off the grid, cramped or hard to read.
</build>

<gotchas>
Never put will-change on anything the camera scales or the text renders blurry. Text that swaps inside a morphing container needs its own enter and exit timing or it overlaps. Make the last frame identical to the first, cursor position and speed included, or the loop stutters.
</gotchas>

<start>
Ask me for the inputs, then show me the state list on the beat grid before you write any code.
</start>