Bucle de UI morfeante guiado por un cursor que hace clic
<direction> Haz un vídeo cuadrado de 14 segundos (1440x1440, 30 fps): un bucle de motion de UI sin costuras, todo dibujado, sin cortes. Una forma redondeada se va transformando de un componente de interfaz en el siguiente: botón, cargador, check, píldora isla, reproductor de música, deslizador de volumen, interruptor, pestañas, gráfico, píldora de búsqueda, paleta de comandos, toast y de vuelta al botón. Un cursor en pantalla dirige cada cambio y hace clic y arrastra de verdad. El último fotograma debe coincidir con el primero para que haga bucle. El aspecto es limpio y sereno: un lienzo lavanda, componentes en tinta profunda y blanco y una sola fuente de UI limpia. El único color viene de mi logo, que hace de portada de álbum. Pasa algo en casi cada pulso a unos 120 BPM. Evita brillos, degradados en el cromo de la UI, partículas, easing con rebote, cortes y voz. Todas las palabras en pantalla de abajo son ejemplos que hay que sustituir por las mías. Mantén cada una de una longitud parecida para que el diseño aguante. </direction> <structure> 0.0-0.6 s: un botón píldora de tinta profunda «Open app» (unos 640x200 px, texto blanco de 62 px). El cursor se desliza desde abajo a la derecha y lo pulsa a los 0.46 s, y el botón baja al 96 %. 0.6-1.25 s: se encoge en un círculo de 230 px con un arco blanco que gira, y luego un check blanco se dibuja solo. 1.25-1.75 s: el círculo se estira en una píldora isla (unos 860x210) con mi logo como un pequeño cuadrado redondeado a la izquierda y cinco barras blancas de onda que saltan a la derecha. 1.75-3.7 s: la isla se abre en una tarjeta de reproductor de tinta profunda (unos 990x630, esquinas de 72 px). El logo crece hasta una portada de 224 px como elemento compartido, junto al título «Ideas in motion» y «[your site]» en lavanda suave. Debajo hay una fina barra de progreso blanca con un control, «01» y «03» en los extremos e iconos de anterior / pausa / siguiente. El cursor hace clic en pausa, que se convierte en play con un desenfoque rápido, y luego vuelve a hacer clic para dejarlo en pausa. Después agarra el control, que crece un 25 %, y lo arrastra desde un tercio aproximadamente hasta casi el final. 3.7-5.25 s: la tarjeta se colapsa en una píldora ancha de volumen (unos 1070x186) con un icono de altavoz. El cursor arrastra el nivel casi a cero, de nuevo arriba y más allá del máximo. Toda la píldora se estira hacia la derecha como goma, hasta unos 170 px, y vuelve de golpe con un pequeño bamboleo al soltar. 5.25-6.25 s: se convierte en un interruptor (unos 520x260). El control aparece gris en el centro, luego cambia a encendido, apagado, encendido, apagado, con una pulsación cada vez. Encendido es una pista de tinta profunda con el control blanco a la derecha. Apagado es una pista pálida #E9E4F2 con el control a la izquierda. 6.25-7.25 s: el control crece hasta el indicador de tinta profunda de una barra de pestañas blanca «Pick» / «Describe» / «Export». El cursor hace clic en «Describe» y luego en «Export». El indicador se estira por delante y se pone al día, y la etiqueta de debajo se vuelve blanca. 7.25-9.7 s: la barra de pestañas se abre en una tarjeta de gráfico blanca (unos 1100x840), con las pestañas arriba y el indicador convertido en una pequeña píldora. Un número grande y en negrita rueda «01», «02», «03» con un ligero desenfoque sobre el pie «Refine in words, then export». Mientras tanto, una línea de tinta profunda se dibuja de izquierda a derecha en medio segundo sobre un área lavanda y cuatro líneas finas. El cursor recorre la línea con un tooltip de tinta profunda que dice «01», «02», «03» por el camino, seguido de un punto y una guía discontinua. Al hacer clic en «Describe», el número rueda a «02» con el pie «Describe your idea», y la curva se transforma en otra más baja y ondulada. 9.7-10.1 s: la tarjeta se colapsa en una píldora de búsqueda blanca con un icono de búsqueda, «Edit in words» y «⌘K» a la derecha. 10.1-11.75 s: la píldora se abre en una paleta de comandos (unos 1060x830). Arriba hay una fila de búsqueda con el marcador «Describe your idea» y un cursor parpadeante, y luego una línea fina. Siguen cinco filas, que entran con 40 ms de diferencia, cada una con un icono sobre una baldosa lavanda: «Pick a template ⌘N», «MP4 export ⌘E», «Ideas in motion», «Live preview», «Your AI motion designer ↵». La palabra «motion» se escribe letra por letra, a unos 0.1 s de distancia y algo irregular, con el cursor fijo mientras se escribe. La palabra escrita debe coincidir exactamente con dos filas. Las filas que ya no coinciden se desenfocan y desaparecen, las dos coincidentes suben, el panel se acorta con un rebote y la vista se acerca. Un resaltado lavanda se sitúa en la primera coincidencia, baja hasta «Your AI motion designer» y se vuelve tinta profunda al pulsar Enter. 11.75-12.6 s: la paleta se pliega pasando por un tono más claro hasta un toast de tinta profunda (unos 970x180) con un check blanco y «Your AI motion designer», mientras la vista se retira suavemente. 12.6-14 s: el texto del toast se desenfoca hasta convertirse en «Open app» y la píldora se encoge de nuevo hasta el botón inicial. Se mantiene hasta el final, con el cursor en reposo abajo a la derecha, de modo que el último fotograma coincide con el primero. </structure> <composition> El lienzo es lavanda #F0EDFF con un suave resplandor blanco justo por encima del centro y una viñeta tenue. Los componentes son de tinta profunda #1C0B5D o paneles blancos #FFFFFF. El texto atenuado es #6B6385, y las líneas finas y el estado apagado del interruptor son #E9E4F2. Todos los paneles proyectan sombras largas y suaves teñidas de tinta. Los únicos acentos de color son los colores de mi logo, aquí rosa #FB2D89 y naranja #FE9117, así que usa los colores de tu logo. El logo aparece como el pequeño cuadrado redondeado de la isla y como la portada del reproductor. Todo el texto va en Geist, y los números pequeños del reproductor en Geist Mono. El cursor es una flecha casi negra (#0D0B1E) con contorno blanco. Todo se mantiene centrado en el lienzo. </composition> <techniques> La única forma cambia de ancho, alto, radio de esquina y color con muelles firmes: unos 0.25 s para asentarse, con un rebasamiento de como mucho un 1 %. Todo lo que hay dentro de cada estado entra y sale en 0.1 s con 10 px de desenfoque, de modo que el texto nunca se superpone mientras el contenedor cambia de tamaño. Los cambios de texto, como de pausa a play y del texto del toast de vuelta a «Open app», también pasan por un desenfoque rápido. El cursor se mueve en curvas suaves y se encoge un 14 % mientras se mantiene pulsado su botón. El logo pasa de la isla a la portada del reproductor como elemento compartido. La píldora de volumen se estira como goma cuando se tira más allá del máximo y luego vuelve de golpe con un pequeño bamboleo. El borde delantero del control del interruptor usa un muelle más rígido que el trasero, así que el control se estira al moverse. El indicador de pestañas se estira por delante y se pone al día del mismo modo. Los números del gráfico ruedan con un ligero desenfoque, la línea se dibuja de izquierda a derecha en unos 0.5 s y la curva se transforma en su nueva forma al cambiar de pestaña. Las filas de la paleta entran con 40 ms de diferencia y las filas filtradas se desenfocan hasta desaparecer. La cámara se queda quieta, salvo un suave acercamiento del 17 % mientras la paleta es corta, que se relaja al formarse el toast. </techniques> <music> Genera un tema instrumental animado de rockabilly / country-rock en mi bemol a unos 120 BPM, exactamente tan largo como el vídeo. Tiene un groove boom-chick, con el bombo en el pulso y la caja en las corcheas intermedias, y licks de guitarra solista con mucho twang sobre el bajo y la batería. Empieza con toda la energía en el primer fotograma y se mantiene constante. Coloca las acciones del cursor y las transformaciones sobre su rejilla de pulso. A unos 13.4 s la banda se detiene en un golpe con un crash y lo deja sonar, para que el bucle vuelva a empezar a tiempo. </music> <sound> Efectos de sonido compuestos para la imagen, sobre la música: - Cada pulsación del cursor hace clic con un tic corto y brillante y un pequeño timbre afinado. Cada liberación da un tic más suave y agudo. Ambos se panoramizan suavemente con el cursor. - Un pequeño blip cuando aparece el check. - Un platillo invertido que crece hasta el clic en la pestaña «Export». - Un suave bum grave cuando se abre la tarjeta del gráfico. - La búsqueda se teclea en una máquina de escribir: dos teclas para ⌘K, un clac por cada letra tecleada, una tecla más ligera para la flecha abajo y un Enter pesado con una pequeña campanilla de máquina de escribir. - Un zip de retorno de carro cuando la paleta se pliega en el toast, que termina en un clonc cuando el toast aterriza. - Un bum profundo y un splash bajo la parada final. Los agudos de la música bajan un instante bajo cada clic y tecla para que se oigan. Sin voz. Mezcla a unos -14 LUFS, con pico real por debajo de -1 dBTP. </sound> <references> Bucles fluidos de interfaz con una sola forma que se transforma, como los showreels de UI de producto y las transiciones al estilo Dynamic Island, donde un contenedor se va remodelando en el siguiente componente en un único plano continuo. </references>
