ترتیب دینا: مورفنگ UI اسٹیٹس لوپ

مجھ سے پوچھیں: 8 سے 12 UI اسٹیٹس میں چاہتا ہوں کہ شکل بن جائے (جیسے بٹن، لوڈر، پلیئر، سلائیڈر، ٹوگل، ٹیبز، چارٹ، کمانڈ پیلیٹ، ٹوسٹ)، خالص سیاہ اور سفید یا ایک لہجے کا رنگ، اور 120 BPM کے ارد گرد رائلٹی سے پاک گانا (مثلاً Mixkit، تجارتی استعمال کے لیے مفت)۔

ڈرائبل لیول UI موشن۔ ایک شکل، کبھی نہیں کٹتی: ہر حالت ایک ہی عنصر ہے جو اس کے سائز، رداس اور رنگ کو تبدیل کرتی ہے جبکہ اس کا مواد مختصر دھندلا پن کے ساتھ تبدیل ہوتا ہے۔ ایک کرسر حقیقی کلکس اور ڈریگ کے ساتھ ہر تبدیلی کو چلاتا ہے۔ ہلکا گرم سرمئی کینوس، سیاہ اور سفید اجزاء، ایک صاف UI فونٹ (Geist)۔ ہر جگہ چشمے، زیادہ سے زیادہ ایک چھوٹا سا اوور شوٹ۔ کیمرا زوم ہوتا ہے لہذا ہر ریاست فریم کو بھرتی ہے۔ آخری فریم پہلا فریم ہے، لہذا یہ لوپ ہوجاتا ہے۔
ممنوعہ: باؤنسی ایزنگ، پارٹیکل برسٹ، گلوز، UI کروم پر گریڈیئنٹس، مماثل آئیکن اسٹروک، ڈیڈ ٹائم، کوئی بھی چیز جو ٹیمپلیٹ کی طرح نظر آتی ہے۔

120 BPM ، 7 بارز، ہر بیٹ پر کچھ نہ کچھ ہوتا ہے۔
بٹن → لوڈر → چیک → ڈائنامک آئی لینڈ → میوزک پلیئر پلے/پز مورف کے ساتھ → پروگریس بار کو صاف کریں → یہ ایک والیوم سلائیڈر بن جاتا ہے جو زیادہ سے زیادہ گھسیٹنے پر پھیلا ہوا ہوتا ہے → یہ ⌘K → ٹائپ ٹو فلٹر → enter → ٹوسٹ → بٹن پر واپس سمٹ جاتا ہے۔

1. ایک HTML فائل، مربع 1440x1440۔ ہر طرز کی تلاش (t) کے اندر وقت سے کی جاتی ہے: کوئی CSS ٹرانزیشن، کوئی ٹائمر، فریموں کے درمیان کوئی حالت نہیں۔
2. اسپرنگس بند شکل کے قدم کے جوابات ہیں۔ ایک قدر جو ہدف کو کئی بار تبدیل کرتی ہے وہ فی تبدیلی ایک بہار کا مجموعہ ہے، لہذا یہ وقت کا خالص فعل رہتا ہے۔
3. ٹیب انڈیکیٹر کے دو کنارے مختلف چشموں پر سوار ہوتے ہیں، اس لیے سب سے آگے والا کنارہ پچھلے حصے سے آگے پھیلا ہوا ہے۔ ٹوگل نوب کے لیے ایک ہی چال۔
4. ڈریگ براہ راست ہیرا پھیری ہیں: جب کرسر کو پکڑا جاتا ہے، تو قدر اس کی پوزیشن سے شمار کی جاتی ہے۔ رہائی کے بعد یہ جہاں سے تھا وہاں سے واپس آتا ہے۔
5. بیٹ گرڈ کے لیے نمپی کے ساتھ گانے کا تجزیہ کریں اور ڈاؤن بیٹ پر شروع کریں۔ ہر UI آواز کو اس کی پیمائش شدہ چوٹی کے مطابق رکھیں۔
6. Playwright کے ساتھ رینڈر: 4 سب فریم فی فریم، 60fps پر موشن بلر کے لیے ffmpeg tmix کے ساتھ ملایا گیا۔
7. مکمل رینڈر سے پہلے ایک فریم فی بیٹ رینڈر کریں۔ گرڈ سے دور کسی بھی چیز کو ٹھیک کریں، تنگ یا پڑھنے میں مشکل۔

کیمرہ کے پیمانے یا متن کو دھندلا دینے والی کسی بھی چیز پر کبھی مرضی کی تبدیلی نہ کریں۔ متن جو ایک مورفنگ کنٹینر کے اندر تبدیل ہوتا ہے اس کے اپنے داخلے اور باہر نکلنے کے وقت کی ضرورت ہوتی ہے یا یہ اوورلیپ ہوجاتا ہے۔ آخری فریم کو پہلے کی طرح بنائیں، کرسر کی پوزیشن اور رفتار شامل ہے، یا لوپ سٹٹرز۔

مجھ سے ان پٹ کے لیے پوچھیں، پھر کوئی کوڈ لکھنے سے پہلے مجھے بیٹ گرڈ پر ریاست کی فہرست دکھائیں۔

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).

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.

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.

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.

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.

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

سے پرامپٹ لیا گیا۔ پوسٹ @demonugc.