Etkileşimli 3D öğeleri içeren Pokémon temalı UI hareketli filmi

Prompt

P R O M P T:
<inputs>
Benden şunları iste: öne çıkan Pokémon’um veya başlangıç üçlüm, Pokémon temalı 8–12 UI durumu ve eğlenceli bir macera ya da elektronik hissi veren, yaklaşık 120 BPM’lik telifsiz bir şarkı. Şarkının lisansının amaçlanan kullanıma izin verdiğini doğrula.Varsayılan palet: sıcak kırık beyaz, siyah ve Poké Ball kırmızısı. Pokémon çizimleri özgün renklerini korur.
</inputs>

<direction>
Dribbble düzeyinde özenle tasarlanmış, Pokémon’dan ilham alan bir UI hareket filmi. Güzel tasarlanmış, modern bir Pokédex hayal et: eğlenceli, hassas ve anında http://recognizable.Tek bir şekil, hiçbir zaman kesilme: Bir Poké Ball, boyutunu, yarıçapını ve rengini değiştirerek sürekli olarak her arayüz bileşenine dönüşür. Merkezi düğmesi, ayırıcı çizgisi ve dış kabuğu, her yeni durumun kontrollerine ve yapısına dönüşür. İçerik, kısa bir bulanıklık ve dikkatle ayrılmış giriş/çıkış zamanlamasıyla değişir.

Görünür bir imleç, tıklamalar, sürüklemeler ve üzerine gelme hareketleriyle her etkileşimi yönlendirir. Açık sıcak gri bir tuval, temiz Geist tipografisi, tutarlı ikon çizgileri ve net Pokémon çizimleri kullan.

Yalnızca çok küçük bir aşım içeren, sıkı biçimde sönümlenmiş yaylar kullan. Arayüzün büyük ve okunaklı kalması için kamera her durumu akıcı biçimde yeniden kadrajlasın. Bitiş, kusursuz bir döngü için tam olarak açılıştaki Poké Ball’a dönsün.

Yasaklar: aşırı zıplama, parçacık patlamaları, parlamalar, UI çerçevesinde degradeler, uyumsuz ikon çizgileri, boş bekleme süreleri, genel dashboard düzenleri, ani sahne değişiklikleri ve ilgisiz yüzen öğeler.
</direction>

<structure>
120 BPM, 4/4 zaman, 7 ölçü: 28 vuruş, yaklaşık 14 saniye. Her http://beat.Bar 1 — Poké Ball etkinleştirme

1. Kapalı bir Poké Ball merkezde durur; imleç yaklaşır.
2. İmleç merkezi düğmesine tıklar.
3. Düğme dairesel bir tarama yükleyicisine dönüşür.
4. Tarama bir onay işaretine dönüşür ve kabuk kompakt bir Pokédex’e uzar.

Bar 2 — Pokémon keşfi
5. Öne çıkan Pokémon’u göstermek için Pokédex genişler.
6. Adı, numarası ve türü hızlı bir kademeli girişle görünür.
7. İmleç cry/play kontrolüne tıklar.
8. Kompakt bir dalga biçimi canlanırken kontrol, duraklatma düğmesine dönüşür.

Bar 3 — Eğitmen kontrolleri
9. Dalga biçimi düzleşerek bir ses seviyesi kaydırıcısına dönüşür.
10. İmleç, Poké Ball şeklindeki düğmesini maksimuma sürükler.
11. Maksimumun ötesine sürüklemek, kaydırıcıyı elastik biçimde uzatır.
12. Bırakıldığında yerine oturur ve parlak mod anahtarına sıkışarak dönüşür.

Bar 4 — Pokémon ayrıntıları
13. İmleç parlak modu değiştirir; çizim doğru parlak varyanta dönüşür.
14. Anahtar düğmesi sıvı bir sekme göstergesine uzar.
15. İmleç “Stats.” seçeneğini seçer.
16. Kart, temiz bir Pokémon istatistik grafiğine açılır.

Bar 5 — İstatistiklerden aramaya
17. İstatistik çubukları vuruşla senkronize biçimde kendilerini çizer.
18. İmleç bir çubuğun üzerine gelir; okunaklı bir araç ipucu görünür.
19. Grafik aynı kapsayıcının içine geri çekilir.
20. Kapsayıcı, bir Pokédex arama alanına sıkışır.

Bar 6 — Bul ve seç
21. Arama alanı bir komut paletine genişler.
22. Kısa bir Pokémon adı yazılır; eşleşen sonuçlar filtrelenir.
23. İmleç bir sonuç seçer; minyatür çizimi ve türü görünür.
24. Enter onaylar; palet, “Added to team” bildirimine katlanır.

Bar 7 — Poké Ball’a dönüş
25. Bildirimin onay işareti, Poké Ball’un merkezi düğmesine dönüşür.
26. Bildirim büzülür; kenarları dairesel kabuğa dönüşür.
27. Kırmızı üst yarı, beyaz alt yarı ve siyah ayırıcı çizgi yerlerine oturur.
28. Döngü kapanırken imleç, açılıştaki konum ve hızı eşleştiren yumuşak bir yoldan geri döner.

Seçilen Pokémon’u baştan sona tutarlı biçimde kullan. Görünür metni bu hızda okunabilecek kadar kısa tut.
</structure>

<build>
1. Kare 1440×1440 boyutunda, tek başına çalışan bir HTML dosyası oluştur. Her animasyonlu stili seek(t) içinde zamandan hesapla: CSS geçişleri, zamanlayıcılar veya kareler arasında taşınan durum kullanma.
2. Sekans boyunca tek bir kalıcı dış öğe kullan. İç çizimleri, etiketleri ve kontrolleri değişebilir, ancak ana silüet her durumu görünür biçimde birbirine bağlamalıdır.
3. Kapalı biçimli yay adım tepkileri kullan. Hedeflerin tekrarlı biçimde değiştiği durumlarda, animasyonun saf bir zaman fonksiyonu olarak kalması için her değişiklik için bir yay tepkisi topla.
4. Sekme göstergesinin iki kenarına farklı yaylar ver; böylece ön kenar arka kenarın önüne uzansın. Aynı tekniği anahtar düğmesine de uygula.
5. Sürüklemeleri doğrudan manipülasyon olarak uygula: basılı tutulurken değerler imleç konumunu takip etsin. Bırakıldığında, bırakma konumu ve hızıyla eşleşen kapalı biçimli bir yay kullan.
6. Sağlanan şarkıyı numpy ile analiz ederek vuruş ızgarasını tahmin et, downbeat’i doğrula ve sekansı hizala. Tempo 120 BPM’den farklıysa zamanlamayı gerçek müziğe uyarla.
7. Lisanslı UI sesleri kullan ve ölçülen geçici tepe noktalarını tıklamalar, onaylar ve dönüşüm vurgularıyla hizala.
8. Playwright ile her çıktı karesi için dört alt karede render al. Hareket bulanıklığı için her dört karelik grubu ffmpeg ile 60fps videoda harmanla.
9. Tam videodan önce her vuruş için bir önizleme karesi render al. Sıkışık, okunaksız, görsel olarak bağlantısız veya vuruş ızgarasının dışında kalan her şeyi düzelt.
10. Render işleminin ağ isteklerine bağlı olmaması için çizimleri ve fontları HTML’in içine paketle.
</build><gotchas>
Kameranın ölçeklediği hiçbir öğeye will-change ekleme; metin bulanıklaşabilir.Giden ve gelen içerik için ayrı zamanlamalar kullan; böylece dönüşüm sırasında etiketler hiçbir zaman üst üste binmesin.

Doğru Pokémon çizimlerini, adlarını, türlerini, parlak renklerini ve istatistiklerini kullan. Varyantlar uydurma veya kapsayıcı şekil değiştirdiğinde karakter çizimlerini esnetme.

Ana kapsayıcının her geçiş boyunca tanınabilir kalmasını sağla. Pokémon çizimi, dönüşen arayüzün içindeki içeriktir; kalıcı şeklin yerine geçmez.

Döngü sınırını tam olarak eşleştir: geometri, içerik, kamera, imleç konumu ve imleç hızı. [0, duration) aralığını, bitiş karesini tekrarlamadan dışa aktar. Ses döngüsünü de temiz biçimde oluştur.
</gotchas>

<start>
Benden girdileri iste, ardından herhangi bir kod yazmadan önce önerilen Pokémon durum listesini 28 vuruşluk ızgara üzerinde göster.
</start>

<inputs>
Ask me for: my featured Pokémon or starter trio, 8–12 Pokémon-themed UI states, and a royalty-free song around 120 BPM with a playful adventure or electronic feel. Confirm that the song’s license permits the intended use.Default palette: warm off-white, black, and Poké Ball red. Pokémon artwork keeps its original colors.
</inputs>

<direction>
A Pokémon-inspired UI motion film with Dribbble-level polish. Imagine a beautifully designed modern Pokédex: playful, precise, and instantly http://recognizable.One shape, never cut: a Poké Ball continuously morphs into every interface component by changing its size, radius, and color. Its central button, dividing line, and outer shell become the controls and structure of each new state. Content swaps with a short blur and carefully separated enter/exit timing.

A visible cursor drives every interaction with clicks, drags, and hover gestures. Use a light warm-gray canvas, clean Geist typography, consistent icon strokes, and crisp Pokémon artwork.

Use tightly damped springs with only a tiny overshoot. The camera smoothly reframes each state so the interface stays large and readable. The ending returns exactly to the opening Poké Ball for a seamless loop.

Banned: excessive bouncing, particle bursts, glows, gradients on UI chrome, mismatched icon strokes, dead time, generic dashboard layouts, abrupt scene changes, and unrelated floating elements.
</direction>

<structure>
120 BPM, 4/4 time, 7 bars: 28 beats, approximately 14 seconds. Something intentional happens on every http://beat.Bar 1 — Poké Ball activation

1. A closed Poké Ball sits centered; the cursor approaches.
2. The cursor clicks its central button.
3. The button becomes a circular scanning loader.
4. The scan resolves into a check, and the shell stretches into a compact Pokédex.

Bar 2 — Pokémon discovery
5. The Pokédex expands to reveal the featured Pokémon.
6. Its name, number, and type appear in a quick stagger.
7. The cursor clicks the cry/play control.
8. The control morphs into pause while a compact waveform animates.

Bar 3 — Trainer controls
9. The waveform flattens into a volume slider.
10. The cursor drags its Poké Ball-shaped knob to maximum.
11. Dragging beyond maximum elastically stretches the slider.
12. On release, it settles and compresses into a shiny-mode toggle.

Bar 4 — Pokémon details
13. The cursor flips shiny mode; the artwork changes to the correct shiny variant.
14. The toggle knob stretches into a liquid tab indicator.
15. The cursor selects “Stats.”
16. The card opens into a clean Pokémon stat chart.

Bar 5 — Stats to search
17. Stat bars draw themselves in sync with the beat.
18. The cursor hovers over a bar; a readable tooltip appears.
19. The chart retracts into the same container.
20. The container compresses into a Pokédex search field.

Bar 6 — Find and select
21. The search field expands into a command palette.
22. A short Pokémon name is typed; matching results filter.
23. The cursor selects a result, revealing its miniature artwork and type.
24. Enter confirms; the palette folds into an “Added to team” toast.

Bar 7 — Return to the Poké Ball
25. The toast’s confirmation mark becomes the Poké Ball’s central button.
26. The toast contracts; its edges become the circular shell.
27. The red upper half, white lower half, and black dividing line settle into place.
28. The cursor returns along a smooth path, matching the opening position and velocity as the loop wraps.

Use the chosen Pokémon consistently throughout. Keep visible text brief enough to read at this pace.
</structure>

<build>
1. Build one self-contained HTML file with a square 1440×1440 composition. Compute every animated style from time inside seek(t): no CSS transitions, timers, or state carried between frames.
2. Keep one persistent outer element throughout the sequence. Its internal artwork, labels, and controls may change, but the main silhouette must visibly connect every state.
3. Use closed-form spring step responses. For repeated target changes, sum one spring response per change so animation remains a pure function of time.
4. Give the tab indicator’s two edges different springs so the leading edge stretches ahead of the trailing edge. Apply the same technique to the toggle knob.
5. Make drags direct manipulation: while held, values follow cursor position. On release, use a closed-form spring matching the release position and velocity.
6. Analyze the supplied song with numpy to estimate the beat grid, verify the downbeat, and align the sequence. If the tempo differs from 120 BPM, adapt the timing to the actual music.
7. Use licensed UI sounds and align their measured transient peaks with clicks, confirmations, and morph accents.
8. Render with Playwright at four subframes per output frame. Blend each group of four with ffmpeg into a 60fps video for motion blur.
9. Render one preview frame per beat before the full video. Fix anything cramped, unreadable, visually disconnected, or off the beat grid.
10. Package artwork and fonts inside the HTML so rendering does not depend on network requests.
</build><gotchas>
Never put will-change on anything the camera scales; text can become blurry.Give outgoing and incoming content separate timing so labels never overlap during a morph.

Use accurate Pokémon artwork, names, types, shiny colors, and stats. Do not invent variants or stretch character artwork when the container changes shape.

Keep the main container recognizable through every transition. Pokémon artwork is content inside the morphing interface, not a replacement for the persistent shape.

Match the loop boundary exactly: geometry, content, camera, cursor position, and cursor velocity. Export the interval [0, duration) without duplicating the endpoint frame. Make the audio loop cleanly too.
</gotchas>

<start>
Ask me for the inputs, then show me the proposed Pokémon state list on the 28-beat grid before writing any code.
</start>