Boucle d'interface morphing pilotée par un curseur qui clique
<direction> Réalise une vidéo carrée de 14 secondes (1440x1440, 30 i/s) : une boucle de motion UI sans raccord, entièrement dessinée, sans coupes. Une forme arrondie se transforme sans cesse d'un composant d'interface au suivant : bouton, loader, coche, pilule île, lecteur de musique, curseur de volume, interrupteur, onglets, graphique, pilule de recherche, palette de commandes, toast, puis retour au bouton. Un curseur à l'écran pilote chaque changement et clique et glisse pour de vrai. La dernière image doit correspondre à la première pour que ça boucle. Le style est net et calme : un fond lavande, des composants encre profond et blancs et une seule police d'interface propre. La seule couleur vient de mon logo, qui tient lieu de pochette d'album. Il se passe quelque chose sur presque chaque temps, à environ 120 BPM. Évite les halos, les dégradés sur l'interface, les particules, les easings rebondissants, les coupes et la voix. Tous les mots à l'écran ci-dessous sont des exemples à remplacer par les miens. Garde-les à peu près de la même longueur pour que la mise en page tienne. </direction> <structure> 0.0-0.6 s : un bouton pilule encre profond « Open app » (environ 640x200 px, texte blanc de 62 px). Le curseur glisse depuis le bas à droite et appuie dessus à 0.46 s, et le bouton descend à 96 %. 0.6-1.25 s : il se réduit en un cercle de 230 px avec un arc blanc qui tourne, puis une coche blanche se dessine toute seule. 1.25-1.75 s : le cercle s'étire en pilule île (environ 860x210) avec mon logo en petit carré arrondi à gauche et cinq barres de forme d'onde blanches qui rebondissent à droite. 1.75-3.7 s : l'île s'ouvre en une carte de lecteur encre profond (environ 990x630, coins de 72 px). Le logo grandit en pochette de 224 px comme élément partagé, à côté du titre « Ideas in motion » et de « [your site] » en lavande douce. En dessous se trouvent une fine barre de progression blanche avec une poignée, « 01 » et « 03 » à ses extrémités, et des icônes précédent / pause / suivant. Le curseur clique sur pause, qui devient lecture par un flou rapide, puis clique pour revenir à pause. Il saisit ensuite la poignée, qui grandit de 25 %, et la fait glisser d'environ un tiers jusqu'à presque la fin. 3.7-5.25 s : la carte s'effondre en une large pilule de volume (environ 1070x186) avec une icône de haut-parleur. Le curseur fait glisser le niveau presque à zéro, puis vers le haut et au-delà du maximum. Toute la pilule s'étire vers la droite comme du caoutchouc, jusqu'à environ 170 px, puis revient avec un petit rebond au relâchement. 5.25-6.25 s : elle devient un interrupteur (environ 520x260). La poignée apparaît grise au milieu, puis bascule sur on, off, on, off, avec un appui à chaque fois. On est une piste encre profond avec la poignée blanche à droite. Off est une piste pâle #E9E4F2 avec la poignée à gauche. 6.25-7.25 s : la poignée grandit en indicateur encre profond d'une barre d'onglets blanche « Pick » / « Describe » / « Export ». Le curseur clique sur « Describe », puis sur « Export ». L'indicateur s'étire en avant et rattrape son retard, et l'étiquette en dessous devient blanche. 7.25-9.7 s : la barre d'onglets s'ouvre en une carte de graphique blanche (environ 1100x840), avec les onglets déplacés en haut et l'indicateur devenu une petite pilule. Un grand nombre en gras défile « 01 », « 02 », « 03 » avec un léger flou au-dessus de la légende « Refine in words, then export ». Pendant ce temps, une ligne encre profond se dessine de gauche à droite en environ une demi-seconde sur une zone lavande et quatre traits fins. Le curseur parcourt la ligne avec une infobulle encre profond indiquant « 01 », « 02 », « 03 » au passage, suivie d'un point et d'un repère en pointillés. Un clic sur « Describe » fait défiler le nombre jusqu'à « 02 » avec la légende « Describe your idea », et la courbe se transforme en une autre, plus basse et plus ondulée. 9.7-10.1 s : la carte s'effondre en une pilule de recherche blanche avec une icône de recherche, « Edit in words » et « ⌘K » à droite. 10.1-11.75 s : la pilule s'ouvre en une palette de commandes (environ 1060x830). En haut, une ligne de recherche avec le texte indicatif « Describe your idea » et un curseur clignotant, puis un trait fin. Cinq lignes suivent, entrant à 40 ms d'intervalle, chacune avec une tuile d'icône lavande : « Pick a template ⌘N », « MP4 export ⌘E », « Ideas in motion », « Live preview », « Your AI motion designer ↵ ». Le mot « motion » est tapé lettre par lettre, à environ 0.1 s d'écart et légèrement irrégulier, avec le curseur fixe pendant la frappe. Le mot tapé doit correspondre à exactement deux lignes. Les lignes qui ne correspondent plus disparaissent dans un flou, les deux correspondantes remontent, le panneau se raccourcit avec un ressort et la vue se rapproche. Une surbrillance lavande se pose sur la première correspondance, descend jusqu'à « Your AI motion designer » et devient encre profond sur Entrée. 11.75-12.6 s : la palette se replie en passant par une teinte plus claire pour devenir un toast encre profond (environ 970x180) avec une coche blanche et « Your AI motion designer », tandis que la vue se détend. 12.6-14 s : le texte du toast se brouille en « Open app » et la pilule se réduit de nouveau jusqu'au bouton du début. Elle tient jusqu'à la fin, avec le curseur au repos en bas à droite, de sorte que la dernière image correspond à la première. </structure> <composition> Le fond est lavande #F0EDFF avec une douce lueur blanche juste au-dessus du milieu et une légère vignette. Les composants sont encre profond #1C0B5D ou panneaux blancs #FFFFFF. Le texte atténué est #6B6385, et les traits fins et l'état off de l'interrupteur sont #E9E4F2. Tous les panneaux projettent de longues ombres douces teintées d'encre. Les seuls accents de couleur sont les couleurs de mon logo, ici rose #FB2D89 et orange #FE9117, donc utilise les couleurs de ton logo. Le logo apparaît comme le petit carré arrondi de l'île et comme la pochette du lecteur. Tout le texte est en Geist, et les petits chiffres du lecteur en Geist Mono. Le curseur est une flèche presque noire (#0D0B1E) avec un contour blanc. Tout reste centré sur le fond. </composition> <techniques> La forme unique change de largeur, de hauteur, de rayon de coin et de couleur sur des ressorts serrés : environ 0.25 s pour se stabiliser, avec au plus environ 1 % de dépassement. Ce qui se trouve dans chaque état apparaît et disparaît en 0.1 s avec un flou de 10 px, de sorte que le texte ne se chevauche jamais pendant que le conteneur se redimensionne. Les changements de texte, comme de pause à lecture et du texte du toast de retour à « Open app », passent aussi par un flou rapide. Le curseur se déplace sur des courbes fluides et rétrécit d'environ 14 % tant que son bouton est maintenu. Le logo passe de l'île à la pochette du lecteur comme élément partagé. La pilule de volume s'étire comme du caoutchouc quand on tire au-delà du maximum, puis revient avec un petit rebond. Le bord d'attaque de la poignée de l'interrupteur suit un ressort plus raide que son bord de fuite, si bien que la poignée s'étire en route. L'indicateur d'onglets s'étire en avant et rattrape son retard de la même façon. Les nombres du graphique défilent avec un léger flou, la ligne se dessine de gauche à droite en environ 0.5 s, et la courbe se transforme vers sa nouvelle forme au changement d'onglet. Les lignes de la palette entrent à 40 ms d'intervalle, et les lignes filtrées disparaissent dans un flou. La caméra reste fixe, sauf un doux zoom avant de 17 % tant que la palette est courte, qui se relâche quand le toast se forme. </techniques> <music> Génère un morceau instrumental entraînant de rockabilly / country-rock en mi bémol à environ 120 BPM, exactement aussi long que la vidéo. Il a un groove boom-chick, avec la grosse caisse sur le temps et la caisse claire sur les croches intermédiaires, et des licks de guitare solo twangy par-dessus la basse et la batterie. Il démarre à pleine énergie dès la première image et reste constant. Cale les actions du curseur et les transformations sur sa grille rythmique. Vers 13.4 s, le groupe s'arrête sur un seul coup avec une cymbale crash et la laisse résonner, pour que la boucle revienne en rythme. </music> <sound> Effets sonores composés pour l'image, par-dessus la musique : - Chaque appui du curseur fait un clic avec un tic court et brillant et une petite résonance tonale. Chaque relâchement donne un tic plus doux et plus aigu. Les deux sont légèrement panoramiqués avec le curseur. - Un minuscule bip quand la coche apparaît. - Une cymbale inversée qui monte jusqu'au clic sur l'onglet « Export ». - Un doux boum grave quand la carte du graphique s'ouvre. - La recherche est tapée à la machine à écrire : deux touches pour ⌘K, un clac par lettre tapée, une touche plus légère pour la flèche vers le bas, et une Entrée lourde avec une petite clochette de machine à écrire. - Un zip de retour chariot quand la palette se replie en toast, finissant par un clonc quand le toast se pose. - Un boum profond et un splash sous l'arrêt final. Les aigus de la musique baissent un instant sous chaque clic et chaque touche pour qu'ils se distinguent. Pas de voix. Mixage à environ -14 LUFS, avec un true peak inférieur à -1 dBTP. </sound> <references> Des boucles fluides de morphing d'interface à forme unique, comme dans les showreels d'UI produit et les transitions de style Dynamic Island, où un conteneur se remodèle sans cesse en le composant suivant dans un seul plan continu. </references>
