Loop di UI in morphing guidato da un cursore che clicca
<direction> Realizza un video quadrato di 14 secondi (1440x1440, 30 fps): un loop di motion UI senza giunture, tutto disegnato, senza stacchi. Una forma arrotondata continua a trasformarsi da un componente di interfaccia al successivo: pulsante, loader, spunta, pillola isola, lettore musicale, cursore del volume, toggle, schede, grafico, pillola di ricerca, palette di comandi, toast e di nuovo il pulsante. Un cursore sullo schermo guida ogni cambiamento e clicca e trascina davvero. L'ultimo fotogramma deve coincidere con il primo per fare il loop. Lo stile è pulito e calmo: una tela lavanda, componenti inchiostro profondo e bianchi e un solo font UI pulito. L'unico colore viene dal mio logo, che fa da copertina dell'album. Succede qualcosa su quasi ogni battito a circa 120 BPM. Evita bagliori, gradienti sull'interfaccia, particelle, easing rimbalzanti, stacchi e voce. Tutte le parole a schermo qui sotto sono esempi da sostituire con le mie. Tieni ognuna più o meno della stessa lunghezza perché il layout regga. </direction> <structure> 0.0-0.6 s: un pulsante a pillola inchiostro profondo "Open app" (circa 640x200 px, testo bianco da 62 px). Il cursore scivola da in basso a destra e lo preme a 0.46 s, e il pulsante scende al 96%. 0.6-1.25 s: si riduce in un cerchio da 230 px con un arco bianco che gira, poi una spunta bianca si disegna da sola. 1.25-1.75 s: il cerchio si allunga in una pillola isola (circa 860x210) con il mio logo come piccolo quadrato arrotondato a sinistra e cinque barre bianche di forma d'onda che rimbalzano a destra. 1.75-3.7 s: l'isola si apre in una scheda lettore inchiostro profondo (circa 990x630, angoli da 72 px). Il logo cresce in una copertina da 224 px come elemento condiviso, accanto al titolo "Ideas in motion" e a "[your site]" in lavanda tenue. Sotto ci sono una sottile barra di avanzamento bianca con un cursore, "01" e "03" agli estremi e icone indietro / pausa / avanti. Il cursore clicca su pausa, che diventa play con una rapida sfocatura, poi clicca di nuovo per tornare a pausa. Poi afferra il cursore, che cresce del 25%, e lo trascina da circa un terzo fino quasi alla fine. 3.7-5.25 s: la scheda collassa in una larga pillola del volume (circa 1070x186) con un'icona di altoparlante. Il cursore trascina il livello quasi a zero, di nuovo su e oltre il massimo. L'intera pillola si allunga verso destra come gomma, fino a circa 170 px, poi torna indietro con un piccolo ondeggiamento al rilascio. 5.25-6.25 s: diventa un toggle (circa 520x260). Il pomello appare grigio al centro, poi scatta su on, off, on, off, con una pressione ogni volta. On è una traccia inchiostro profondo con il pomello bianco a destra. Off è una traccia chiara #E9E4F2 con il pomello a sinistra. 6.25-7.25 s: il pomello cresce fino a diventare l'indicatore inchiostro profondo di una barra di schede bianca "Pick" / "Describe" / "Export". Il cursore clicca su "Describe", poi su "Export". L'indicatore si allunga in avanti e recupera, e l'etichetta sotto diventa bianca. 7.25-9.7 s: la barra di schede si apre in una scheda grafico bianca (circa 1100x840), con le schede spostate in alto e l'indicatore diventato una piccola pillola. Un grande numero in grassetto scorre "01", "02", "03" con una leggera sfocatura sopra la didascalia "Refine in words, then export". Nel frattempo una linea inchiostro profondo si disegna da sinistra a destra in circa mezzo secondo su un'area lavanda e quattro linee sottili. Il cursore scorre lungo la linea con un tooltip inchiostro profondo che dice "01", "02", "03" lungo il percorso, seguito da un punto e da una guida tratteggiata. Cliccando su "Describe" il numero scorre a "02" con la didascalia "Describe your idea", e la curva si trasforma in una più bassa e più ondulata. 9.7-10.1 s: la scheda collassa in una pillola di ricerca bianca con un'icona di ricerca, "Edit in words" e "⌘K" a destra. 10.1-11.75 s: la pillola si apre in una palette di comandi (circa 1060x830). In alto c'è una riga di ricerca con il segnaposto "Describe your idea" e un cursore lampeggiante, poi una linea sottile. Seguono cinque righe, che entrano a 40 ms l'una dall'altra, ciascuna con una tessera icona lavanda: "Pick a template ⌘N", "MP4 export ⌘E", "Ideas in motion", "Live preview", "Your AI motion designer ↵". La parola "motion" viene digitata una lettera per tasto, a circa 0.1 s di distanza e leggermente irregolare, con il cursore fisso mentre si digita. La parola digitata deve corrispondere esattamente a due righe. Le righe che non corrispondono più svaniscono sfocate, le due corrispondenti scorrono verso l'alto, il pannello si accorcia con una molla e la vista si avvicina. Un'evidenziazione lavanda si posa sulla prima corrispondenza, scende fino a "Your AI motion designer" e diventa inchiostro profondo con Invio. 11.75-12.6 s: la palette si ripiega passando per una tinta più chiara in un toast inchiostro profondo (circa 970x180) con una spunta bianca e "Your AI motion designer", mentre la vista si rilassa. 12.6-14 s: il testo del toast si sfoca in "Open app" e la pillola si riduce di nuovo fino al pulsante iniziale. Resta fino alla fine, con il cursore a riposo in basso a destra, così l'ultimo fotogramma coincide con il primo. </structure> <composition> La tela è lavanda #F0EDFF con un morbido bagliore bianco appena sopra il centro e una leggera vignettatura. I componenti sono inchiostro profondo #1C0B5D o pannelli bianchi #FFFFFF. Il testo attenuato è #6B6385, e le linee sottili e lo stato off del toggle sono #E9E4F2. Tutti i pannelli proiettano ombre lunghe e morbide tinte d'inchiostro. Gli unici accenti di colore sono i colori del mio logo, qui rosa #FB2D89 e arancione #FE9117, quindi usa i colori del tuo logo. Il logo appare come il piccolo quadrato arrotondato dell'isola e come la copertina del lettore. Imposta tutto il testo in Geist, e i piccoli numeri del lettore in Geist Mono. Il cursore è una freccia quasi nera (#0D0B1E) con contorno bianco. Tutto resta centrato sulla tela. </composition> <techniques> L'unica forma cambia larghezza, altezza, raggio degli angoli e colore su molle rigide: circa 0.25 s per assestarsi, con un overshoot al massimo di circa l'1%. Tutto ciò che sta dentro ogni stato entra ed esce in 0.1 s con 10 px di sfocatura, così il testo non si sovrappone mai mentre il contenitore cambia dimensione. Anche i cambi di testo, come da pausa a play e dal testo del toast di nuovo a "Open app", passano per una rapida sfocatura. Il cursore si muove su curve morbide e si riduce di circa il 14% mentre il suo pulsante è premuto. Il logo passa dall'isola alla copertina del lettore come elemento condiviso. La pillola del volume si allunga come gomma quando viene tirata oltre il massimo, poi torna indietro con un piccolo ondeggiamento. Il bordo anteriore del pomello del toggle segue una molla più rigida di quello posteriore, così il pomello si allunga mentre si muove. L'indicatore delle schede si allunga in avanti e recupera allo stesso modo. I numeri del grafico scorrono con una leggera sfocatura, la linea si disegna da sinistra a destra in circa 0.5 s, e la curva si trasforma nella nuova forma al cambio di scheda. Le righe della palette entrano a 40 ms l'una dall'altra, e le righe filtrate svaniscono sfocate. La camera resta ferma, tranne un dolce avvicinamento del 17% mentre la palette è corta, che si rilassa quando si forma il toast. </techniques> <music> Genera un brano strumentale vivace rockabilly / country-rock in mi bemolle a circa 120 BPM, lungo esattamente quanto il video. Ha un groove boom-chick, con la cassa sul battito e il rullante sugli ottavi in mezzo, e licks di chitarra solista twang sopra basso e batteria. Parte a piena energia dal primo fotogramma e resta costante. Posiziona le azioni del cursore e le trasformazioni sulla sua griglia ritmica. A circa 13.4 s la band si ferma su un colpo con un crash e lo lascia risuonare, così il loop riparte a tempo. </music> <sound> Effetti sonori composti per l'immagine, sopra la musica: - Ogni pressione del cursore fa clic con un tic breve e brillante e un piccolo squillo intonato. Ogni rilascio dà un tic più morbido e più acuto. Entrambi sono panoramizzati dolcemente con il cursore. - Un minuscolo blip quando appare la spunta. - Un piatto invertito che cresce fino al clic sulla scheda "Export". - Un morbido boom basso quando si apre la scheda del grafico. - La ricerca è digitata a macchina da scrivere: due tasti per ⌘K, un clack per ogni lettera digitata, un tasto più leggero per la freccia giù e un Invio pesante con un piccolo campanello da macchina da scrivere. - Uno zip di ritorno del carrello quando la palette si ripiega nel toast, che finisce con un clunk quando il toast atterra. - Un boom profondo e uno splash sotto lo stop finale. Gli alti della musica calano per un attimo sotto ogni clic e tasto così da farli sentire. Niente voce. Mix a circa -14 LUFS, con true peak sotto -1 dBTP. </sound> <references> Loop fluidi di morphing d'interfaccia con una sola forma, come negli showreel di UI di prodotto e nelle transizioni in stile Dynamic Island, dove un contenitore continua a rimodellarsi nel componente successivo in un'unica inquadratura continua. </references>
