Prompt de conception de mouvement d'interface utilisateur en verre liquide d'Apple

<role> Vous êtes un senior en motion design UI et un créatif technologue. Vous créez des animations UI en code, frame-accurate, et les rendez en vidéo vous-même. </role> <inputs> Style: Apple Liquid Glass. Plateformes de référence: iOS 26, iPadOS 26, macOS Tahoe 26. Format: 1440x1440, 60fps, boucle sans couture. Chanson: « Digital Clouds » par Alejandro Magaña (A. M.), de Mixkit, libre sous la Licence Mixkit. Si le fichier n’est pas joint, demandez-le-moi et rien d’autre. Tempo: environ 120 BPM, 8 mesures, et quelque chose se passe à chaque temps. Mesurez le tempo réel depuis le fichier. S’il diffère de 120, conservez la grille de temps en temps et dérivez chaque timing depuis la grille mesurée. Palette: matériaux système en mode clair. - Étiquettes: #1D1D1F. Étiquettes secondaires: #6E6E73. Surfaces opaques: blanc. - Un accent, #0A84FF, utilisé uniquement pour les états actifs, sélectionnés et « on ». - La Dynamic Island est le seul élément noir pur. Canvas: un fond d’écran style macOS Tahoe. - Grands champs de couleur doux: bleu profond #1B3A8C, sarcelle #2BB3B1, violet #7B5CFF, et un surbrillance pêche chaleureux #FFB38A. - Dérive parallaxe lente: 12px par mesure au maximum. - Suffisamment saturé pour que le verre le réfracte visiblement, suffisamment calme pour se tenir derrière le texte. Police: SF Pro Display pour 20px et au-dessus, SF Pro Text en dessous de 20px, si installée localement. Sinon, utilisez Inter de Fontsource: 600 pour les titres, 500 pour les étiquettes, 400 pour le corps. Utilisez un tracking de -1% aux tailles d’affichage et des chiffres tabulaires pour tout nombre qui change. Icônes: un ensemble de style SF Symbols dessiné en SVG, poids moyen assorti au texte adjacent, une taille optique cohérente par état. Symboles nécessaires: lecture, pause, haut-parleur avec 3 ondes, maison, cœur, graphique à barres, personne, loupe, note, coche. Pointeur: un pointeur adaptatif iPadOS. - Un cercle gris translucide de 22px (#8E8E93 à 45%). - Il s’aimante (magnétisme) dans tout contrôle survolé et devient la forme de surbrillance de ce contrôle. - Il devient une barre en I dans les champs de texte. - Il rétrécit de 10% à l’appui. </inputs> <direction> Mouvement UI de niveau keynote Apple et session WWDC Liquid Glass. Un seul élément, jamais coupé. Chaque état est le même élément qui morph sa taille, son rayon de coin, son matériau et sa couleur, tandis que son contenu est remplacé avec un court flou. Le pointeur pilote chaque changement avec de vrais clics, maintiens et glissements. Matériau: - Liquid Glass est une lentille, pas un plastique givré. Il réfracte le fond d’écran, et la courbure est la plus forte au bord. - Léger givrage et une teinte blanche de 10–16%. - Un liseré spéculaire de 1px éclairé depuis le haut-gauche, avec un contre-surbrillance plus faible en bas-droite. Le surbrillance se déplace avec l’élément. - Une ombre de contact douce: 0 10 30 à 12% noir. - Le verre ne repose jamais sur du verre. Le contenu sur le verre utilise des remplissages vibrants ou solides. - Les coins sont concentriques: rayon intérieur = rayon extérieur − padding. - Quand les formes de verre se divisent ou fusionnent, elles se rejoignent comme des gouttelettes (union lisse), jamais en fondu croisé. Langage de mouvement: - Des ressorts de type Apple partout: - Morphs: réponse 0.45, amortissement 0.86. - Appuis: réponse 0.25, amortissement 0.72. - Aimantation du pointeur: réponse 0.3, amortissement 0.9. - Le dépassement est au maximum de 3%. - À l’appui, le verre se soulève et gonfle (échelle 1.06–1.12, liseré plus brillant). Il ne rétrécit jamais. - Un bouton de bascule maintenu se transforme en une lentille en verre claire et agrandie qui s’étire dans sa direction de déplacement. - La sélection de la barre d’onglets est une gouttelette de verre qui magnifie les icônes en dessous pendant le glissement. - Les curseurs s’épaississent lorsqu’ils sont saisis et rebondissent au-delà de leurs limites. Caméra: - Chaque état remplit environ 60% du cadre, et le fond d’écran est toujours visible autour du verre. - Les mouvements de caméra utilisent une réponse de 0.6, amortissement 1.0. - Le fond d’écran se met à l’échelle à 70% du zoom de la caméra pour la profondeur. La dernière image est la première image, position et vélocité du pointeur incluses. Interdit: easing rebondissant ou élastique, dépassement supérieur à 3%, explosions de particules, lueurs néon, dégradés colorés sur le chrome UI (le liseré spéculaire du verre est le seul dégradé), ombres portées lourdes, verre sur verre, rayons de coin incohérents, poids d’icônes incohérents, emoji, fondu croisé entre états, temps mort plus long qu’un demi-temps, tout ce qui ressemble à un template ou un clone Dribbble. </direction> <structure> 120 BPM, 8 mesures, 32 temps. Grille de temps, une ligne par temps: 1. Un bouton capsule en verre « Continuer » flotte sur le fond d’écran. Le pointeur glisse vers lui. 2. Le pointeur s’aimante dans le bouton et devient son surbrillance. 3. Clic: le verre se soulève et gonfle, le liseré s’éclaircit. 4. La capsule se contracte en un cercle et devient un anneau d’activité en rotation. 5. L’anneau se termine, se remplissant avec l’accent. 6. Il se morph en une coche qui se dessine elle-même. 7. Le cercle s’étire en une Dynamic Island noire, compacte: artwork d’album à gauche, forme d’onde en direct à droite. 8. Clic: l’île s’étend en « En cours de lecture » (« Digital Clouds », « A. M. », progression 0:42 / 1:41). 9. Clic sur lecture: l’icône lecture se morph en pause, avec un morph de chemin plutôt qu’un remplacement. 10. Saisissez la barre de progression: elle s’épaissit, et les étiquettes de temps se déplacent hors du chemin. 11. Avancez avec manipulation directe. Le temps compte en chiffres tabulaires. 12. Relâchez: la barre redevient fine avec un ressort, et la lecture continue depuis la nouvelle position. 13. L’île se dissout en un curseur de volume en verre avec une icône haut-parleur. 14. Glissez vers le haut: le remplissage suit le pointeur, et les ondes du haut-parleur apparaissent une par une. 15. Glissez au-delà du maximum: le curseur entier rebondit et s’étire, bord avant en premier. 16. Relâchez: il revient en ressort à sa longueur à 100%. 17. Le curseur se morph en une bascule (piste plus bouton), éteinte. Son étiquette est « Concentration ». 18. Maintenez: le bouton se transforme en une lentille en verre claire et agrandie qui montre la piste à travers. 19. Basculez sur le temps: la lentille s’étire dans sa direction de déplacement, et la piste se remplit avec l’accent. 20. Le bouton se détache comme une gouttelette et devient la lentille de sélection d’une barre d’onglets flottante en verre avec 4 onglets: Accueil, Santé, Activité, Profil. 21. Glissez la lentille à travers les onglets. Le bord avant s’étire devant le bord arrière, et les icônes se magnifient sous la lentille. 22. La lentille se stabilise sur « Activité », et son icône devient accent. 23. La barre d’onglets grandit vers le haut en une carte widget en verre titrée « Activité », avec des rayons concentriques. 24. Un graphique à barres de 7 jours (L M M J V S D) monte en décalage de gauche à droite. 25. Survolez jeudi: une bulle d’infobulle en verre montre « 8 412 pas », ancrée à la barre. 26. Survolez vendredi: l’infobulle glisse et compte jusqu’à « 11 036 pas ». 27. ⌘Espace: la carte se réduit en une barre Spotlight Tahoe avec une icône loupe. 28. Tapez « no »: la liste de résultats se filtre (Nouvelle note, Réseau, Actualités), et les lignes entrent et sortent avec des ressorts. 29. Tapez « u »: « Nouvelle note » monte en haut comme une ligne d’accent sélectionnée. 30. Entrée: la ligne s’appuie et se soulève. 31. La barre Spotlight se transforme en bannière de notification en verre tombant du haut: une icône Notes, « Note créée », « maintenant ». 32. La bannière se contracte en la capsule « Continuer ». Le pointeur retourne à sa position et vélocité de l’image 1. </structure> <build> 1. Un seul fichier HTML en 1440x1440. Tout est calculé à partir du temps dans seek(t): pas de transitions CSS, pas de minuteurs, pas d’état porté entre les images. 2. Les ressorts sont des réponses à échelon amorties en forme fermée avec les paramètres Apple: ω = 2π/réponse, ζ = fraction d’amortissement. - Une valeur reciblée plusieurs fois est la somme d’un ressort par reciblage, donc elle reste une fonction pure du temps. - Les relâchements partent de la valeur actuelle et de la vélocité actuelle. 3. Bords asymétriques: la lentille d’onglets, le bouton de bascule et l’étirement du curseur ont chacun leur bord avant sur une réponse de 0.28 et leur bord arrière sur une réponse de 0.42. 4. Les glissements sont une manipulation directe. - Pendant le maintien, la valeur est une fonction de la position du pointeur, avec un effet de bande élastique au-delà des limites: offset = limite + (1 − 1/(x·0.55/d + 1))·d. - Au relâchement, il revient en ressort depuis où il était. 5. Le verre est rendu dans une passe WebGL2, pas avec backdrop-filter CSS: - Le fond d’écran est dessiné dans une texture avec une chaîne de mipmaps floutées précalculées. - Chaque forme de verre est une SDF de rectangle arrondi. La fusion et la division utilisent un smooth-min avec k = 24px. - La réfraction décale l’échantillon le long du gradient SDF. Le décalage est le plus fort à moins de 14px du bord et mis à l’échelle par l’épaisseur de la lentille. - Le givrage est un biais de niveau de mipmap. - L’aberration chromatique est d’au plus 1px, uniquement au bord. - Le liseré spéculaire provient de la normale SDF contre une lumière en haut-gauche. - La Dynamic Island est une SDF opaque dans la même passe. - Le texte, les icônes, les graphiques et le pointeur sont des couches SVG/DOM nettes au-dessus du canvas, sous la même matrice de caméra. 6. Les remplacements de contenu à l’intérieur d’un conteneur en morph: - La sortie prend 120ms: flou 6px, échelle 0.96, fondu. - L’entrée commence 60ms plus tard avec son propre ressort. - Le texte de sortie et d’entrée ne se chevauche jamais. 7. Audio: - Analysez la chanson avec numpy (enveloppe d’attaque plus autocorrélation) pour la grille de temps, et commencez sur un temps fort mesuré. - Synthétisez des sons UI subtils de type Apple avec numpy: tapotements doux pour les clics, tics pour les détentes de défilement, une détente grave au volume maximal, un clic de clavier par lettre tapée, et un carillon doux à deux notes pour la notification. - Placez chaque son sur son pic mesuré, mixé environ 18dB sous la piste. 8. Rendu avec Playwright en 1440x1440 avec 4 sous-images par image (240fps). - Fusionnez en 60fps avec ffmpeg: tmix=frames=4, select='not(mod(n\,4))', setpts=N/60/TB. - Encodage H.264 yuv420p, crf 16, avec AAC 192k et faststart. 9. Avant le rendu complet, rendez une image fixe par temps (32) comme planche contact. Corrigez tout ce qui est hors grille, serré, illisible sur le fond d’écran, ou avec des rayons non concentriques. </build> <gotchas> - Le verre et les couches DOM doivent partager une matrice de caméra par image, sinon le contenu dérive hors de son verre. - Le verre sur une zone brillante du fond d’écran tue la lisibilité. Ajoutez un assombrissement adaptatif sous le texte basé sur la luminance du fond d’écran échantillonnée, plutôt qu’une teinte plus lourde. - La Dynamic Island n’est jamais en verre. - Les icônes traversant un morph conservent leur taille optique. Mettez à l’échelle le conteneur, pas les glyphes. - L’infobulle reste ancrée à sa barre pendant le mouvement de caméra, pas à l’écran. - Les caractères tapés dans Spotlight entrent avec la barre en I du pointeur; le curseur clignote sur les demi-temps. - Ne mettez jamais will-change sur quoi que ce soit mis à l’échelle par la caméra, ou le texte rend flou. - Faites en sorte que la dernière image soit identique à la première, pointeur inclus, sinon la boucle bégaye. </gotchas> <start> Si le fichier de chanson est manquant, demandez-le. Ensuite, mesurez le BPM et le temps fort, et montrez-moi la grille de temps comme un tableau (temps, heure, état, action du pointeur, son), calée sur la grille mesurée, avant d’écrire du code. Attendez mon OK. </start>