एप्पल लिक्विड ग्लास यूआई मोशन डिज़ाइन प्रॉम्प्ट

<role> आप एक वरिष्ठ UI मोशन डिज़ाइनर और क्रिएटिव टेक्नोलॉजिस्ट हैं। आप कोड में UI एनिमेशन बनाते हैं, फ्रेम-सटीक, और उन्हें स्वयं वीडियो में रेंडर करते हैं। </role> <inputs> शैली: Apple Liquid Glass। संदर्भ प्लेटफ़ॉर्म: iOS 26, iPadOS 26, macOS Tahoe 26। प्रारूप: 1440x1440, 60fps, निर्बाध लूप। गीत: "Digital Clouds" by Alejandro Magaña (A. M.), Mixkit से, Mixkit लाइसेंस के तहत मुफ्त। यदि फ़ाइल संलग्न नहीं है, तो मुझसे केवल वही माँगें और कुछ नहीं। गति: लगभग 120 BPM, 8 बार, और हर बीट पर कुछ होता है। फ़ाइल से वास्तविक गति मापें। यदि यह 120 से भिन्न है, तो बीट मैप को बीट्स में रखें और मापे गए ग्रिड से हर समय प्राप्त करें। पैलेट: लाइट मोड सिस्टम मटेरियल। - लेबल: #1D1D1F। द्वितीयक लेबल: #6E6E73। अपारदर्शी सतहें: सफेद। - एक एक्सेंट, #0A84FF, केवल ऑन, एक्टिव और चयनित अवस्थाओं के लिए उपयोग किया जाता है। - डायनामिक आइलैंड एकमात्र शुद्ध काला तत्व है। कैनवास: macOS Tahoe शैली की वॉलपेपर। - बड़े, नरम रंग क्षेत्र: गहरा नीला #1B3A8C, टील #2BB3B1, बैंगनी #7B5CFF, और एक गर्म आड़ू हाइलाइट #FFB38A। - धीमी पैरालक्स गति: अधिकतम 12px प्रति बार। - इतना संतृप्त कि कांच स्पष्ट रूप से इसे अपवर्तित करे, इतना शांत कि यह टेक्स्ट के पीछे बैठ सके। फ़ॉन्ट: 20px और उससे ऊपर के लिए SF Pro Display, 20px से नीचे के लिए SF Pro Text, यदि स्थानीय रूप से इंस्टॉल हो। अन्यथा Fontsource से Inter उपयोग करें: शीर्षकों के लिए 600, लेबल के लिए 500, बॉडी के लिए 400। डिस्प्ले आकारों पर -1% ट्रैकिंग और किसी भी बदलते नंबर के लिए टेबुलर नंबर उपयोग करें। आइकन: SF Symbols जैसा एक सेट SVG के रूप में, मध्यम वज़न आसन्न टेक्स्ट से मेल खाता हुआ, प्रति अवस्था एक सुसंगत ऑप्टिकल आकार। आवश्यक प्रतीक: play, pause, speaker with 3 waves, house, heart, chart bars, person, magnifier, note, checkmark। पॉइंटर: एक iPadOS अनुकूली पॉइंटर। - एक 22px पारभासी ग्रे वृत्त (#8E8E93 45% पर)। - यह किसी भी नियंत्रण पर होवर करते ही उसमें स्नैप (चुंबकत्व) करता है और उस नियंत्रण की हाइलाइट आकृति बन जाता है। - यह टेक्स्ट फ़ील्ड में I-बीम बन जाता है। - दबाने पर यह 10% सिकुड़ जाता है। </inputs> <direction> Apple कीनोट और WWDC Liquid Glass सत्र-स्तरीय UI मोशन। एक तत्व, कभी कट नहीं। हर अवस्था एक ही तत्व है जो अपने आकार, कोने की त्रिज्या, सामग्री और रंग को बदलता है, जबकि इसकी सामग्री छोटे ब्लर के साथ बदलती है। पॉइंटर वास्तविक क्लिक, होल्ड और ड्रैग के साथ हर बदलाव को चलाता है। सामग्री: - Liquid Glass एक लेंस है, फ्रॉस्टेड प्लास्टिक नहीं। यह वॉलपेपर को अपवर्तित करता है, और झुकाव किनारे पर सबसे मजबूत होता है। - हल्की फ्रॉस्टिंग और 10–16% सफेद टिंट। - ऊपर-बाएँ से प्रकाशित एक 1px स्पेक्युलर रिम, नीचे-दाएँ एक हल्का काउंटर-हाइलाइट। तत्व के हिलने पर हाइलाइट बदलता है। - एक नरम संपर्क छाया: 0 10 30 12% काले रंग पर। - कांच कभी कांच पर नहीं बैठता। कांच पर सामग्री वाइब्रेंट या ठोस फिल का उपयोग करती है। - कोने संकेंद्रित हैं: आंतरिक त्रिज्या = बाहरी त्रिज्या − पैडिंग। - जब कांच की आकृतियाँ विभाजित या विलीन होती हैं, तो वे बूंदों की तरह जुड़ती हैं (चिकना संघ), कभी क्रॉसफ़ेड नहीं। मोशन भाषा: - हर जगह Apple जैसे स्प्रिंग्स: - मॉर्फ: response 0.45, damping 0.86। - प्रेस: response 0.25, damping 0.72। - पॉइंटर स्नैप: response 0.3, damping 0.9। - ओवरशूट अधिकतम 3% है। - दबाने पर, कांच उठता है और फूलता है (स्केल 1.06–1.12, चमकीला रिम)। यह कभी सिकुड़ता नहीं है। - होल्ड पर एक टॉगल नॉब एक स्पष्ट, बड़ा कांच लेंस बन जाता है जो अपनी यात्रा की दिशा में फैलता है। - टैब बार चयन एक कांच की बूंद है जो ड्रैग करते समय अपने नीचे के आइकन को बड़ा करती है। - स्लाइडर पकड़े जाने पर मोटे हो जाते हैं और अपनी सीमा से आगे रबर-बैंड करते हैं। कैमरा: - प्रत्येक अवस्था फ्रेम का लगभग 60% भरती है, और वॉलपेपर हमेशा कांच के चारों ओर दिखाई देती है। - कैमरा मूवमेंट response 0.6, damping 1.0 का उपयोग करता है। - गहराई के लिए वॉलपेपर कैमरा ज़ूम के 70% पर स्केल करती है। अंतिम फ्रेम पहला फ्रेम है, पॉइंटर स्थिति और वेग सहित। निषिद्ध: उछालभरी या लोचदार ईज़िंग, 3% से अधिक ओवरशूट, कण विस्फोट, नियॉन चमक, UI क्रोम पर रंगीन ग्रेडिएंट (कांच का स्पेक्युलर रिम एकमात्र ग्रेडिएंट है), भारी ड्रॉप शैडो, कांच पर कांच, बेमेल कोने की त्रिज्या, बेमेल आइकन वज़न, इमोजी, अवस्थाओं के बीच क्रॉसफ़ेड, आधी बीट से अधिक मृत समय, कुछ भी जो टेम्पलेट या Dribbble क्लोन जैसा दिखता है। </direction> <structure> 120 BPM, 8 बार, 32 बीट्स। बीट मैप, प्रति बीट एक पंक्ति: 1. एक कांच कैप्सूल बटन "Continue" वॉलपेपर पर तैरता है। पॉइंटर अंदर ग्लाइड करता है। 2. पॉइंटर बटन में स्नैप करता है और उसकी हाइलाइट बन जाता है। 3. क्लिक: कांच उठता है और फूलता है, रिम चमकता है। 4. कैप्सूल एक वृत्त में सिकुड़ता है और एक घूमती हुई एक्टिविटी रिंग बन जाता है। 5. रिंग पूरी होती है, एक्सेंट से भरती है। 6. यह एक चेकमार्क में बदल जाता है जो स्वयं को खींचता है। 7. वृत्त एक काले डायनामिक आइलैंड में फैलता है, कॉम्पैक्ट: बाईं ओर एल्बम आर्ट, दाईं ओर एक लाइव वेवफ़ॉर्म। 8. क्लिक: आइलैंड अब प्लेइंग में विस्तारित होता है ("Digital Clouds", "A. M.", प्रगति 0:42 / 1:41)। 9. प्ले क्लिक करें: प्ले आइकन पॉज़ में बदल जाता है, स्वैप के बजाय पाथ मॉर्फ के साथ। 10. प्रोग्रेस बार पकड़ें: यह मोटा हो जाता है, और समय लेबल रास्ते से हट जाते हैं। 11. प्रत्यक्ष हेरफेर के साथ आगे स्क्रब करें। समय टेबुलर नंबरों में गिना जाता है। 12. रिलीज़: बार स्प्रिंग करके पतला हो जाता है, और प्लेबैक नई स्थिति से जारी रहता है। 13. आइलैंड एक स्पीकर आइकन के साथ कांच वॉल्यूम स्लाइडर में घुल जाता है। 14. ऊपर ड्रैग करें: फिल पॉइंटर का अनुसरण करती है, और स्पीकर तरंगें एक-एक करके दिखाई देती हैं। 15. अधिकतम से आगे ड्रैग करें: पूरा स्लाइडर रबर-बैंड और फैलता है, अग्रणी किनारा पहले। 16. रिलीज़: यह 100% पर अपनी लंबाई में वापस स्प्रिंग करता है। 17. स्लाइडर एक टॉगल (ट्रैक प्लस नॉब) में बदल जाता है, बंद। इसका लेबल "Focus" है। 18. होल्ड: नॉब एक स्पष्ट, बड़ा कांच लेंस बन जाता है जो ट्रैक को उसके माध्यम से दिखाता है। 19. बीट पर चालू करें: लेंस अपनी यात्रा की दिशा में फैलता है, और ट्रैक एक्सेंट से भर जाता है। 20. नॉब एक बूंद के रूप में अलग हो जाता है और 4 टैब वाले तैरते कांच टैब बार का चयन लेंस बन जाता है: Home, Health, Activity, Profile। 21. लेंस को टैब्स पर ड्रैग करें। अग्रणी किनारा पीछे वाले किनारे से आगे फैलता है, और आइकन लेंस के नीचे बड़े होते हैं। 22. लेंस "Activity" पर स्थिर होता है, और इसका आइकन एक्सेंट हो जाता है। 23. टैब बार ऊपर की ओर "Activity" शीर्षक वाले कांच विजेट कार्ड में बढ़ता है, संकेंद्रित त्रिज्या के साथ। 24. एक 7-दिवसीय बार चार्ट (M T W T F S S) बाएँ से दाएँ स्टैगर में उठता है। 25. गुरुवार पर होवर करें: एक कांच टूलटिप बबल "8,412 steps" दिखाता है, बार से जुड़ा हुआ। 26. शुक्रवार पर होवर करें: टूलटिप स्लाइड करके "11,036 steps" तक गिनता है। 27. ⌘Space: कार्ड एक Tahoe Spotlight बार में सिकुड़ जाता है जिसमें मैग्नीफायर आइकन होता है। 28. "ne" टाइप करें: परिणाम सूची फ़िल्टर होती है (New Note, Network, News), और पंक्तियाँ अंदर और बाहर स्प्रिंग करती हैं। 29. "w" टाइप करें: "New Note" एक चयनित एक्सेंट पंक्ति के रूप में शीर्ष पर उठता है। 30. Enter: पंक्ति दबती और उठती है। 31. Spotlight बार ऊपर से एक कांच अधिसूचना बैनर में गिरता है: एक Notes आइकन, "Note created", "now"। 32. बैनर वापस "Continue" कैप्सूल में सिकुड़ जाता है। पॉइंटर अपनी फ्रेम-1 स्थिति और वेग पर लौटता है। </structure> <build> 1. 1440x1440 पर एक HTML फ़ाइल। सब कुछ seek(t) के अंदर समय से परिकलित होता है: कोई CSS ट्रांज़िशन नहीं, कोई टाइमर नहीं, फ्रेम के बीच कोई स्थिति नहीं। 2. स्प्रिंग्स Apple मापदंडों के साथ बंद-रूप भीगी हुई चरण प्रतिक्रियाएँ हैं: ω = 2π/response, ζ = dampingFraction। - एक मान जिसे कई बार रीटार्गेट किया जाता है, वह प्रति रीटार्गेट एक स्प्रिंग का योग है, इसलिए यह समय का शुद्ध कार्य बना रहता है। - रिलीज़ वर्तमान मान और वर्तमान वेग से शुरू होती हैं। 3. असममित किनारे: टैब लेंस, टॉगल नॉब और स्लाइडर स्ट्रेच में से प्रत्येक का अग्रणी किनारा response 0.28 पर और पीछे वाला किनारा response 0.42 पर होता है। 4. ड्रैग प्रत्यक्ष हेरफेर हैं। - होल्ड करते समय, मान पॉइंटर स्थिति का एक फ़ंक्शन है, सीमा से आगे रबर-बैंडिंग के साथ: offset = limit + (1 − 1/(x·0.55/d + 1))·d। - रिलीज़ पर यह जहाँ से भी था वहाँ से वापस स्प्रिंग करता है। 5. कांच WebGL2 पास में रेंडर किया जाता है, CSS backdrop-filter से नहीं: - वॉलपेपर को पहले से परिकलित ब्लर मिप चेन के साथ एक टेक्सचर पर खींचा जाता है। - हर कांच की आकृति एक गोल-आयत SDF है। विलय और विभाजन k = 24px के साथ smooth-min का उपयोग करते हैं। - अपवर्तन SDF ग्रेडिएंट के साथ नमूने को ऑफसेट करता है। ऑफसेट किनारे के 14px के भीतर सबसे मजबूत होता है और लेंस मोटाई द्वारा स्केल किया जाता है। - फ्रॉस्ट एक मिप-स्तर पूर्वाग्रह है। - क्रोमैटिक विपथन अधिकतम 1px है, केवल रिम पर। - स्पेक्युलर रिम ऊपर-बाएँ प्रकाश के विरुद्ध SDF सामान्य से आता है। - डायनामिक आइलैंड उसी पास में एक अपारदर्शी SDF है। - टेक्स्ट, आइकन, चार्ट और पॉइंटर कैनवास के ऊपर स्पष्ट SVG/DOM परतें हैं, उसी कैमरा मैट्रिक्स के अंतर्गत। 6. मॉर्फिंग कंटेनर के अंदर सामग्री स्वैप: - बाहर निकलने में 120ms लगते हैं: ब्लर 6px, स्केल 0.96, फेड। - प्रवेश 60ms बाद अपने स्वयं के स्प्रिंग के साथ शुरू होता है। - बाहर निकलने और प्रवेश करने वाला टेक्स्ट कभी ओवरलैप नहीं होता। 7. ऑडियो: - बीट ग्रिड के लिए numpy के साथ गीत का विश्लेषण करें (ऑनसेट लिफाफा प्लस ऑटोकोरिलेशन), और मापी गई डाउनबीट पर शुरू करें। - numpy के साथ Apple-सूक्ष्म UI ध्वनियाँ संश्लेषित करें: क्लिक के लिए नरम टैप, स्क्रब डिटेंट के लिए टिक, अधिकतम वॉल्यूम पर कम डिटेंट, प्रति टाइप किए गए अक्षर के लिए एक कीबोर्ड क्लिक, और अधिसूचना के लिए एक हल्की दो-नोट चाइम। - प्रत्येक ध्वनि को उसके मापे गए शिखर पर रखें, ट्रैक के नीचे लगभग 18dB मिलाया गया। 8. Playwright के साथ 1440x1440 पर 4 सबफ्रेम प्रति फ्रेम (240fps) रेंडर करें। - ffmpeg के साथ 60fps में ब्लेंड करें: tmix=frames=4, select='not(mod(n\,4))', setpts=N/60/TB। - H.264 yuv420p, crf 16, AAC 192k और faststart के साथ एनकोड करें। 9. पूर्ण रेंडर से पहले, प्रति बीट एक स्टिल (32) संपर्क शीट के रूप में रेंडर करें। ग्रिड से हटकर, तंग, वॉलपेपर पर अस्पष्ट, या गैर-संकेंद्रित त्रिज्या वाली किसी भी चीज़ को ठीक करें। </build> <gotchas> - कांच और DOM परतों को प्रति फ्रेम एक कैमरा मैट्रिक्स साझा करना चाहिए, अन्यथा सामग्री अपने कांच से भटक जाती है। - चमकीले वॉलपेपर पैच पर कांच पठनीयता को मार देता है। भारी टिंट के बजाय, नमूना वॉलपेपर ल्यूमिनेंस के आधार पर टेक्स्ट के नीचे एक अनुकूली मंद जोड़ें। - डायनामिक आइलैंड कभी कांच नहीं है। - मॉर्फ पार करने वाले आइकन अपना ऑप्टिकल आकार बनाए रखते हैं। कंटेनर को स्केल करें, ग्लिफ़ को नहीं। - टूलटिप कैमरा मूव के माध्यम से अपने बार से जुड़ा रहता है, स्क्रीन से नहीं। - Spotlight में टाइप किए गए अक्षर पॉइंटर के I-बीम के साथ प्रवेश करते हैं; कैरेट आधी बीट्स पर ब्लिंक करता है। - कैमरा स्केल करने वाली किसी भी चीज़ पर will-change कभी न लगाएं, या टेक्स्ट धुंधला रेंडर होता है। - अंतिम फ्रेम को पहले फ्रेम के समान बनाएं, पॉइंटर सहित, या लूप हकलाता है। </gotchas> <start> यदि गीत फ़ाइल गायब है, तो उसे माँगें। फिर BPM और डाउनबीट मापें, और मुझे बीट मैप एक तालिका (बीट, समय, अवस्था, पॉइंटर क्रिया, ध्वनि) के रूप में दिखाएं, मापे गए ग्रिड से स्नैप किया हुआ, कोई कोड लिखने से पहले। मेरी OK की प्रतीक्षा करें। </start>