Apple Liquid Glass UI Motion Design Prompt

<role> Sie sind ein leitender UI-Motion-Designer und Creative Technologist. Sie erstellen UI-Animationen in Code, frame-genau, und rendern sie selbst zu Video. </role> <inputs> Stil: Apple Liquid Glass. Referenzplattformen: iOS 26, iPadOS 26, macOS Tahoe 26. Format: 1440x1440, 60fps, nahtloser Loop. Song: "Digital Clouds" von Alejandro Magaña (A. M.), von Mixkit, kostenlos unter der Mixkit-Lizenz. Wenn die Datei nicht angehängt ist, fragen Sie mich danach und sonst nichts. Tempo: etwa 120 BPM, 8 Takte, und auf jedem Beat passiert etwas. Messen Sie das tatsächliche Tempo aus der Datei. Wenn es von 120 abweicht, behalten Sie die Beat-Map in Beats bei und leiten Sie jede Zeit aus dem gemessenen Raster ab. Palette: System-Materialien im hellen Modus. - Labels: #1D1D1F. Sekundäre Labels: #6E6E73. Deckende Flächen: Weiß. - Ein Akzent, #0A84FF, nur für Ein-, Aktiv- und Ausgewählt-Zustände verwendet. - Die Dynamic Island ist das einzige reine Schwarz-Element. Canvas: Ein macOS Tahoe-Stil Wallpaper. - Große, weiche Farbfelder: tiefes Blau #1B3A8C, Türkis #2BB3B1, Violett #7B5CFF und ein warmer Pfirsich-Highlight #FFB38A. - Langsamer Parallax-Drift: höchstens 12px pro Takt. - Gesättigt genug, dass das Glas es sichtbar bricht, ruhig genug, um hinter Text zu sitzen. Schrift: SF Pro Display für 20px und darüber, SF Pro Text unter 20px, falls lokal installiert. Andernfalls Inter von Fontsource: 600 für Titel, 500 für Labels, 400 für Fließtext. Verwenden Sie -1% Tracking bei Display-Größen und tabellarische Zahlen für jede Zahl, die sich ändert. Icons: Ein SF-Symbols-ähnlicher Satz als SVG gezeichnet, mittlere Gewichtung passend zum angrenzenden Text, eine konsistente optische Größe pro Zustand. Benötigte Symbole: Play, Pause, Lautsprecher mit 3 Wellen, Haus, Herz, Balkendiagramm, Person, Lupe, Note, Häkchen. Zeiger: Ein iPadOS-adaptiver Zeiger. - Ein 22px durchscheinender grauer Kreis (#8E8E93 bei 45%). - Er rastet (Magnetismus) in jedes Steuerelement ein, das er überfährt, und wird zur Highlight-Form dieses Steuerelements. - Er wird in Textfeldern zu einem I-Balken. - Er schrumpft beim Drücken um 10%. </inputs> <richtung> Apple-Keynote- und WWDC-Liquid-Glass-Session-Level-UI-Motion. Ein Element, nie geschnitten. Jeder Zustand ist dasselbe Element, das Größe, Eckenradius, Material und Farbe morphiert, während sein Inhalt mit einem kurzen Blur wechselt. Der Zeiger treibt jede Änderung mit echten Klicks, Halten und Ziehen. Material: - Liquid Glass ist eine Linse, kein mattiertes Plastik. Es bricht das Wallpaper, und die Biegung ist am Rand am stärksten. - Leichte Mattierung und ein 10-16% Weißanteil. - Ein 1px spiegelnder Rand, von oben links beleuchtet, mit einem schwächeren Gegen-Highlight unten rechts. Das Highlight verschiebt sich, wenn sich das Element bewegt. - Ein weicher Kontaktschatten: 0 10 30 bei 12% Schwarz. - Glas liegt nie auf Glas. Inhalt auf Glas verwendet leuchtende oder deckende Füllungen. - Ecken sind konzentrisch: innerer Radius = äußerer Radius - Padding. - Wenn sich Glasformen teilen oder vereinen, verbinden sie sich wie Tröpfchen (glatte Vereinigung), nie als Crossfade. Bewegungssprache: - Überall Apple-ähnliche Federn: - Morphs: Response 0.45, Dämpfung 0.86. - Drücke: Response 0.25, Dämpfung 0.72. - Zeiger-Snap: Response 0.3, Dämpfung 0.9. - Überschwingen ist höchstens 3%. - Beim Drücken hebt sich das Glas und schwillt an (Skalierung 1.06-1.12, hellerer Rand). Es schrumpft nie. - Ein Umschaltknopf wird beim Halten zu einer klaren, vergrößerten Glaslinse, die sich in Bewegungsrichtung dehnt. - Die Tab-Bar-Auswahl ist ein Glas-Tröpfchen, das die Icons darunter beim Ziehen vergrößert. - Slider werden beim Greifen dicker und gummibandartig über ihre Grenzen hinaus. Kamera: - Jeder Zustand füllt etwa 60% des Frames, und das Wallpaper ist immer sichtbar um das Glas herum. - Kamerabewegungen verwenden Response 0.6, Dämpfung 1.0. - Das Wallpaper skaliert mit 70% des Kamera-Zooms für Tiefe. Der letzte Frame ist der erste Frame, Zeigerposition und -geschwindigkeit eingeschlossen. Verboten: Hüpfende oder elastische Easings, Überschwingen über 3%, Partikelausbrüche, Neon-Glows, farbige Verläufe auf UI-Chrome (der spiegelnde Glasrand ist der einzige Verlauf), schwere Schlagschatten, Glas auf Glas, nicht übereinstimmende Eckenradien, nicht übereinstimmende Icon-Gewichtungen, Emojis, Crossfades zwischen Zuständen, Totzeit länger als ein halber Beat, alles, was wie eine Vorlage oder ein Dribbble-Klon aussieht. </richtung> <struktur> 120 BPM, 8 Takte, 32 Beats. Beat-Map, eine Zeile pro Beat: 1. Ein Glas-Kapsel-Button "Weiter" schwebt auf dem Wallpaper. Der Zeiger gleitet herein. 2. Der Zeiger rastet in den Button ein und wird zu dessen Highlight. 3. Klick: Das Glas hebt sich und schwillt an, der Rand hellt sich auf. 4. Die Kapsel zieht sich zu einem Kreis zusammen und wird zu einem sich drehenden Aktivitätsring. 5. Der Ring vervollständigt sich und füllt sich mit Akzent. 6. Er morphiert zu einem Häkchen, das sich selbst zeichnet. 7. Der Kreis dehnt sich zu einer schwarzen Dynamic Island, kompakt: Albumcover links, eine Live-Wellenform rechts. 8. Klick: Die Insel expandiert zu Now Playing ("Digital Clouds", "A. M.", Fortschritt 0:42 / 1:41). 9. Klick auf Play: Das Play-Icon morphiert zu Pause, mit einem Pfad-Morph statt eines Austauschs. 10. Den Fortschrittsbalken greifen: Er wird dicker, und die Zeitlabels weichen aus. 11. Vorwärts scrubben mit direkter Manipulation. Die Zeit zählt in tabellarischen Zahlen. 12. Loslassen: Der Balken federt dünn zurück, und die Wiedergabe läuft von der neuen Position weiter. 13. Die Insel löst sich in einen Glas-Lautstärkeregler mit Lautsprecher-Icon auf. 14. Nach oben ziehen: Die Füllung folgt dem Zeiger, und die Lautsprecherwellen erscheinen eine nach der anderen. 15. Über das Maximum ziehen: Der gesamte Slider gummibandartig und dehnt sich, Vorderkante zuerst. 16. Loslassen: Er federt auf seine Länge bei 100% zurück. 17. Der Slider morphiert zu einem Umschalter (Bahn plus Knopf), aus. Sein Label ist "Fokus". 18. Halten: Der Knopf wird zu einer klaren, vergrößerten Glaslinse, die die Bahn durchscheinen lässt. 19. Auf den Beat umschalten: Die Linse dehnt sich in Bewegungsrichtung, und die Bahn füllt sich mit Akzent. 20. Der Knopf löst sich als Tröpfchen und wird zur Auswahllinse einer schwebenden Glas-Tab-Bar mit 4 Tabs: Start, Gesundheit, Aktivität, Profil. 21. Die Linse über die Tabs ziehen. Die Vorderkante dehnt sich vor der Hinterkante, und die Icons werden unter der Linse vergrößert. 22. Die Linse setzt sich auf "Aktivität", und ihr Icon wird zum Akzent. 23. Die Tab-Bar wächst nach oben zu einer Glas-Widget-Karte mit dem Titel "Aktivität", mit konzentrischen Radien. 24. Ein 7-Tage-Balkendiagramm (M D M D F S S) steigt in einem links-nach-rechts-Staffelung auf. 25. Donnerstag überfahren: Eine Glas-Tooltip-Blase zeigt "8.412 Schritte", verankert am Balken. 26. Freitag überfahren: Der Tooltip gleitet hinüber und zählt auf "11.036 Schritte". 27. ⌘Leertaste: Die Karte kollabiert zu einer Tahoe-Spotlight-Leiste mit Lupen-Icon. 28. "ne" tippen: Die Ergebnisliste filtert (Neue Notiz, Netzwerk, News), und Zeilen federn rein und raus. 29. "w" tippen: "Neue Notiz" steigt als ausgewählte Akzent-Zeile nach oben. 30. Enter: Die Zeile drückt und hebt sich. 31. Die Spotlight-Leiste fällt als Glas-Benachrichtigungsbanner von oben: ein Notizen-Icon, "Notiz erstellt", "jetzt". 32. Das Banner zieht sich zurück zur "Weiter"-Kapsel. Der Zeiger kehrt zu seiner Frame-1-Position und -Geschwindigkeit zurück. </struktur> <bau> 1. Eine HTML-Datei bei 1440x1440. Alles wird aus der Zeit innerhalb von seek(t) berechnet: keine CSS-Transitions, keine Timer, kein Zustand zwischen Frames. 2. Federn sind geschlossene gedämpfte Sprungantworten mit Apple-Parametern: ω = 2π/response, ζ = dampingFraction. - Ein Wert, der mehrfach neu zielgerichtet wird, ist die Summe einer Feder pro Neuzielrichtung, sodass er eine reine Funktion der Zeit bleibt. - Loslassen startet vom aktuellen Wert und der aktuellen Geschwindigkeit. 3. Asymmetrische Kanten: Die Tab-Linse, der Umschaltknopf und die Slider-Dehnung haben jeweils ihre Vorderkante auf Response 0.28 und ihre Hinterkante auf Response 0.42. 4. Ziehen ist direkte Manipulation. - Während des Haltens ist der Wert eine Funktion der Zeigerposition, mit Gummiband-Verhalten über Grenzen hinaus: offset = limit + (1 - 1/(x·0.55/d + 1))·d. - Beim Loslassen federt er von dort zurück, wo er war. 5. Glas wird in einem WebGL2-Pass gerendert, nicht mit CSS backdrop-filter: - Das Wallpaper wird in eine Textur mit einer vorberechneten, geblurten Mip-Kette gezeichnet. - Jede Glasform ist eine abgerundete-Rechteck-SDF. Vereinigen und Teilen verwenden Smooth-Min mit k = 24px. - Brechung versetzt die Abtastung entlang des SDF-Gradienten. Der Versatz ist innerhalb von 14px vom Rand am stärksten und wird durch die Linsendicke skaliert. - Mattierung ist ein Mip-Level-Bias. - Chromatische Aberration ist höchstens 1px, nur am Rand. - Der spiegelnde Rand kommt von der SDF-Normalen gegen ein Licht von oben links. - Die Dynamic Island ist eine deckende SDF im selben Pass. - Text, Icons, Diagramme und der Zeiger sind scharfe SVG/DOM-Ebenen über dem Canvas, unter derselben Kameramatrix. 6. Inhaltswechsel innerhalb eines morphierenden Containers: - Exit dauert 120ms: Blur 6px, Skalierung 0.96, Ausblenden. - Enter beginnt 60ms später mit eigener Feder. - Exit- und Enter-Text überlappen sich nie. 7. Audio: - Analysieren Sie den Song mit numpy (Onset-Hüllkurve plus Autokorrelation) für das Beat-Raster und starten Sie auf einem gemessenen Downbeat. - Synthetisieren Sie Apple-dezente UI-Sounds mit numpy: weiche Taps für Klicks, Ticks für Scrub-Rasten, ein tiefes Rasten bei maximaler Lautstärke, ein Tastaturklick pro getipptem Buchstaben und ein sanfter Zweiton-Klang für die Benachrichtigung. - Platzieren Sie jeden Sound auf seinem gemessenen Peak, etwa 18dB unter dem Track gemischt. 8. Rendern mit Playwright bei 1440x1440 mit 4 Unterframes pro Frame (240fps). - Auf 60fps mit ffmpeg mischen: tmix=frames=4, select='not(mod(n\,4))', setpts=N/60/TB. - H.264 yuv420p codieren, crf 16, mit AAC 192k und faststart. 9. Vor dem vollständigen Rendern einen Standbild pro Beat (32) als Kontaktbogen rendern. Alles korrigieren, was außerhalb des Rasters liegt, gequetscht ist, über dem Wallpaper unleserlich ist oder nicht-konzentrische Radien hat. </bau> <fallen> - Das Glas und die DOM-Ebenen müssen pro Frame eine gemeinsame Kameramatrix teilen, sonst driftet der Inhalt von seinem Glas ab. - Glas über einem hellen Wallpaper-Bereich tötet die Lesbarkeit. Fügen Sie eine adaptive Abdunklung unter dem Text hinzu, basierend auf der abgetasteten Wallpaper-Luminanz, statt einer stärkeren Tönung. - Die Dynamic Island ist nie Glas. - Icons, die einen Morph kreuzen, behalten ihre optische Größe. Skalieren Sie den Container, nicht die Glyphen. - Der Tooltip bleibt während der Kamerabewegung an seinem Balken verankert, nicht am Bildschirm. - Getippte Zeichen in Spotlight erscheinen mit dem I-Balken des Zeigers; der Cursor blinkt auf halben Beats. - Setzen Sie niemals will-change auf etwas, das die Kamera skaliert, sonst wird Text unscharf gerendert. - Machen Sie den letzten Frame identisch mit dem ersten, Zeiger eingeschlossen, sonst stottert der Loop. </fallen> <start> Wenn die Songdatei fehlt, fragen Sie danach. Dann messen Sie BPM und Downbeat und zeigen Sie mir die Beat-Map als Tabelle (Beat, Zeit, Zustand, Zeigeraktion, Sound), auf das gemessene Raster gesnappt, bevor Sie Code schreiben. Warten Sie auf mein OK. </start>