Prompt de diseño de movimiento UI de Liquid Glass de Apple

<role> Eres un diseñador de motion UI senior y tecnólogo creativo. Construyes animaciones de UI en código, cuadro a cuadro, y las renderizas a video tú mismo. </role> <inputs> Estilo: Apple Liquid Glass. Plataformas de referencia: iOS 26, iPadOS 26, macOS Tahoe 26. Formato: 1440x1440, 60fps, bucle sin costuras. Canción: "Digital Clouds" de Alejandro Magaña (A. M.), de Mixkit, gratuita bajo la Licencia Mixkit. Si el archivo no está adjunto, pídemelo y nada más. Tempo: alrededor de 120 BPM, 8 compases, y algo sucede en cada pulso. Mide el tempo real del archivo. Si difiere de 120, mantén el mapa de pulsos en pulsos y deriva cada tiempo de la cuadrícula medida. Paleta: materiales de sistema en modo claro. - Etiquetas: #1D1D1F. Etiquetas secundarias: #6E6E73. Superficies opacas: blanco. - Un acento, #0A84FF, usado solo para estados activos, encendidos y seleccionados. - La Dynamic Island es el único elemento negro puro. Lienzo: un fondo de pantalla estilo macOS Tahoe. - Grandes campos de color suaves: azul profundo #1B3A8C, verde azulado #2BB3B1, violeta #7B5CFF, y un resaltado melocotón cálido #FFB38A. - Deriva de paralaje lenta: 12px por compás como máximo. - Lo suficientemente saturado para que el vidrio lo refracte visiblemente, lo suficientemente calmado para estar detrás del texto. Fuente: SF Pro Display para 20px y más, SF Pro Text por debajo de 20px, si está instalada localmente. De lo contrario, usa Inter de Fontsource: 600 para títulos, 500 para etiquetas, 400 para cuerpo. Usa -1% de tracking en tamaños de display y números tabulares para cualquier número que cambie. Iconos: un conjunto de estilo SF Symbols dibujado como SVG, peso medio acorde al texto adyacente, un tamaño óptico consistente por estado. Símbolos necesarios: play, pausa, altavoz con 3 ondas, casa, corazón, barras de gráfico, persona, lupa, nota, marca de verificación. Puntero: un puntero adaptativo de iPadOS. - Un círculo gris translúcido de 22px (#8E8E93 al 45%). - Se ajusta (magnetismo) a cualquier control sobre el que se cierne y se convierte en la forma de resaltado de ese control. - Se convierte en una I-beam en campos de texto. - Se encoge un 10% al presionar. </inputs> <direction> Motion de UI a nivel de keynote de Apple y sesión de Liquid Glass de WWDC. Un elemento, nunca cortado. Cada estado es el mismo elemento transformando su tamaño, radio de esquina, material y color, mientras su contenido se intercambia con un desenfoque corto. El puntero impulsa cada cambio con clics reales, pulsaciones sostenidas y arrastres. Material: - Liquid Glass es una lente, no plástico esmerilado. Refracta el fondo de pantalla, y la curvatura es más fuerte en el borde. - Esmerilado ligero y un tinte blanco del 10–16%. - Un borde especular de 1px iluminado desde la parte superior izquierda, con un contra-resaltado más tenue en la parte inferior derecha. El resaltado se desplaza a medida que el elemento se mueve. - Una sombra de contacto suave: 0 10 30 al 12% de negro. - El vidrio nunca se apoya sobre vidrio. El contenido sobre vidrio usa rellenos vibrantes o sólidos. - Las esquinas son concéntricas: radio interno = radio externo − padding. - Cuando las formas de vidrio se dividen o fusionan, se unen como gotas (unión suave), nunca con fundido cruzado. Lenguaje de movimiento: - Muelles de estilo Apple en todas partes: - Transformaciones: response 0.45, damping 0.86. - Pulsaciones: response 0.25, damping 0.72. - Ajuste del puntero: response 0.3, damping 0.9. - El sobreimpulso es como máximo del 3%. - Al presionar, el vidrio se eleva y se hincha (escala 1.06–1.12, borde más brillante). Nunca se encoge. - Una perilla de alternancia al mantenerla presionada se convierte en una lente de vidrio clara y ampliada que se estira en su dirección de viaje. - La selección de la barra de pestañas es una gota de vidrio que magnifica los iconos debajo de ella mientras se arrastra. - Los controles deslizantes se engrosan al agarrarlos y se estiran como goma más allá de sus límites. Cámara: - Cada estado llena aproximadamente el 60% del encuadre, y el fondo de pantalla siempre es visible alrededor del vidrio. - Los movimientos de cámara usan response 0.6, damping 1.0. - El fondo de pantalla se escala al 70% del zoom de la cámara para dar profundidad. El último cuadro es el primer cuadro, incluidos la posición y la velocidad del puntero. Prohibido: easing rebotante o elástico, sobreimpulso superior al 3%, ráfagas de partículas, brillos de neón, degradados de color en el cromo de la UI (el borde especular del vidrio es el único degradado), sombras paralelas pesadas, vidrio sobre vidrio, radios de esquina no coincidentes, pesos de iconos no coincidentes, emoji, fundidos cruzados entre estados, tiempo muerto superior a medio pulso, cualquier cosa que parezca una plantilla o un clon de Dribbble. </direction> <structure> 120 BPM, 8 compases, 32 pulsos. Mapa de pulsos, una línea por pulso: 1. Un botón de cápsula de vidrio "Continuar" flota sobre el fondo de pantalla. El puntero se desliza. 2. El puntero se ajusta al botón y se convierte en su resaltado. 3. Clic: el vidrio se eleva y se hincha, el borde se ilumina. 4. La cápsula se contrae en un círculo y se convierte en un anillo de actividad giratorio. 5. El anillo se completa, llenándose con el acento. 6. Se transforma en una marca de verificación que se dibuja a sí misma. 7. El círculo se estira en una Dynamic Island negra, compacta: carátula del álbum a la izquierda, una forma de onda en vivo a la derecha. 8. Clic: la isla se expande en Now Playing ("Digital Clouds", "A. M.", progreso 0:42 / 1:41). 9. Clic en play: el icono de play se transforma en pausa, con una transformación de trazado en lugar de un intercambio. 10. Agarra la barra de progreso: se engrosa y las etiquetas de tiempo se apartan. 11. Adelanta con manipulación directa. El tiempo cuenta en números tabulares. 12. Suelta: la barra vuelve a ser delgada con un muelle, y la reproducción continúa desde la nueva posición. 13. La isla se disuelve en un control deslizante de volumen de vidrio con un icono de altavoz. 14. Arrastra hacia arriba: el relleno sigue al puntero y las ondas del altavoz aparecen una a una. 15. Arrastra más allá del máximo: todo el control deslizante se estira como goma y se alarga, con el borde delantero primero. 16. Suelta: vuelve con un muelle a su longitud al 100%. 17. El control deslizante se transforma en una alternancia (pista más perilla), apagada. Su etiqueta es "Focus". 18. Mantén presionado: la perilla se convierte en una lente de vidrio clara y ampliada que muestra la pista a través de ella. 19. Cambia en el pulso: la lente se estira en su dirección de viaje y la pista se llena con el acento. 20. La perilla se desprende como una gota y se convierte en la lente de selección de una barra de pestañas de vidrio flotante con 4 pestañas: Home, Health, Activity, Profile. 21. Arrastra la lente a través de las pestañas. El borde delantero se estira por delante del borde trasero, y los iconos se magnifican bajo la lente. 22. La lente se asienta en "Activity" y su icono se vuelve acento. 23. La barra de pestañas crece hacia arriba en una tarjeta de widget de vidrio titulada "Activity", con radios concéntricos. 24. Un gráfico de barras de 7 días (L M X J V S D) se eleva en una escala escalonada de izquierda a derecha. 25. Pasa el cursor sobre el jueves: una burbuja de información de vidrio muestra "8,412 pasos", anclada a la barra. 26. Pasa el cursor sobre el viernes: la información se desliza y cuenta hasta "11,036 pasos". 27. ⌘Espacio: la tarjeta se colapsa en una barra de Spotlight de Tahoe con un icono de lupa. 28. Escribe "ne": la lista de resultados se filtra (New Note, Network, News), y las filas entran y salen con muelles. 29. Escribe "w": "New Note" sube a la parte superior como una fila seleccionada con acento. 30. Enter: la fila se presiona y se eleva. 31. La barra de Spotlight se convierte en un banner de notificación de vidrio que cae desde la parte superior: un icono de Notas, "Note created", "now". 32. El banner se contrae de nuevo en la cápsula "Continuar". El puntero regresa a su posición y velocidad del cuadro 1. </structure> <build> 1. Un archivo HTML a 1440x1440. Todo se calcula a partir del tiempo dentro de seek(t): sin transiciones CSS, sin temporizadores, sin estado entre cuadros. 2. Los muelles son respuestas escalonadas amortiguadas de forma cerrada con parámetros de Apple: ω = 2π/response, ζ = dampingFraction. - Un valor que se reorienta muchas veces es la suma de un muelle por reorientación, para que siga siendo una función pura del tiempo. - Las liberaciones comienzan desde el valor actual y la velocidad actual. 3. Bordes asimétricos: la lente de pestañas, la perilla de alternancia y el estiramiento del control deslizante tienen cada uno su borde delantero en response 0.28 y su borde trasero en response 0.42. 4. Los arrastres son manipulación directa. - Mientras se mantiene presionado, el valor es una función de la posición del puntero, con estiramiento de goma más allá de los límites: offset = limit + (1 − 1/(x·0.55/d + 1))·d. - Al soltar, vuelve con un muelle desde donde estaba. 5. El vidrio se renderiza en un pase de WebGL2, no con CSS backdrop-filter: - El fondo de pantalla se dibuja en una textura con una cadena de mipmaps precomputada y desenfocada. - Cada forma de vidrio es un SDF de rectángulo redondeado. La fusión y división usan smooth-min con k = 24px. - La refracción desplaza la muestra a lo largo del gradiente del SDF. El desplazamiento es más fuerte dentro de los 14px del borde y se escala por el grosor de la lente. - El esmerilado es un sesgo de nivel de mipmap. - La aberración cromática es de como máximo 1px, solo en el borde. - El borde especular proviene de la normal del SDF contra una luz superior izquierda. - La Dynamic Island es un SDF opaco en el mismo pase. - El texto, los iconos, los gráficos y el puntero son capas SVG/DOM nítidas sobre el lienzo, bajo la misma matriz de cámara. 6. Los intercambios de contenido dentro de un contenedor en transformación: - La salida tarda 120ms: desenfoque 6px, escala 0.96, desvanecimiento. - La entrada comienza 60ms después con su propio muelle. - El texto de salida y entrada nunca se superpone. 7. Audio: - Analiza la canción con numpy (envolvente de onset más autocorrelación) para la cuadrícula de pulsos, y comienza en un tiempo fuerte medido. - Sintetiza sonidos de UI sutiles de Apple con numpy: toques suaves para clics, tics para los topes de avance, un tope grave en el volumen máximo, un clic de teclado por letra escrita, y un timbre suave de dos notas para la notificación. - Coloca cada sonido en su pico medido, mezclado unos 18dB por debajo de la pista. 8. Renderiza con Playwright a 1440x1440 con 4 subcuadros por cuadro (240fps). - Mezcla a 60fps con ffmpeg: tmix=frames=4, select='not(mod(n\,4))', setpts=N/60/TB. - Codifica H.264 yuv420p, crf 16, con AAC 192k y faststart. 9. Antes del render completo, renderiza una imagen fija por pulso (32) como una hoja de contactos. Corrige cualquier cosa fuera de la cuadrícula, apretada, ilegible sobre el fondo de pantalla, o con radios no concéntricos. </build> <gotchas> - El vidrio y las capas DOM deben compartir una matriz de cámara por cuadro, o el contenido se desvía de su vidrio. - El vidrio sobre un parche brillante del fondo de pantalla mata la legibilidad. Añade un oscurecimiento adaptativo bajo el texto basado en la luminancia muestreada del fondo de pantalla, en lugar de un tinte más pesado. - La Dynamic Island nunca es vidrio. - Los iconos que cruzan una transformación mantienen su tamaño óptico. Escala el contenedor, no los glifos. - La información permanece anclada a su barra a través del movimiento de cámara, no a la pantalla. - Los caracteres escritos en Spotlight entran con la I-beam del puntero; el cursor parpadea en los medios pulsos. - Nunca pongas will-change en nada que la cámara escale, o el texto se renderiza borroso. - Haz que el último cuadro sea idéntico al primero, incluido el puntero, o el bucle tartamudea. </gotchas> <start> Si el archivo de la canción falta, pídelo. Luego mide el BPM y el tiempo fuerte, y muéstrame el mapa de pulsos como una tabla (pulso, tiempo, estado, acción del puntero, sonido), ajustado a la cuadrícula medida, antes de escribir cualquier código. Espera mi aprobación. </start>