Motion
Diseño de animación morph de UI
Una película de 14 segundos hecha solo con código donde una forma se transforma en reproductor, pestañas y paleta de comandos, y cada cambio lo provoca un cursor a 120 BPM.
Pensado para
- Diseño de teasers de movimiento de productoBucles cortos que muestran varios estados de la interfaz sin cortes entre pantallas.
- Showreels de microinteraccionesSecuencias que presentan interruptores, deslizadores, pestañas y paletas como una historia conectada.
- Animación de interfaz sincronizada con músicaPiezas donde las acciones del cursor coinciden con una cuadrícula de pulsos fija.
Aspectos destacados del movimiento
- Una forma que nunca se cortaCada estado es una deformación del mismo contenedor, no un cambio de escena.
- Cambios provocados por el cursorCada transición comienza con una acción visible del puntero.
- Un bucle que se cierraEl fotograma final coincide con el primero, así que la reproducción se repite sin saltos.
Vista previa del diseño de animación morph de UI
Cómo una sola forma sostiene toda la película
La película dura 14 segundos a 120 BPM, que las notas de origen dividen en 7 compases. Una sola forma empieza como un botón Generate y luego se convierte en cargador, marca de verificación, dynamic island, reproductor de música, deslizador de volumen, interruptor, indicador de pestañas, gráfico, paleta de comandos y notificación, antes de volver al botón.
La contrapartida es que cada estado debe poder alcanzarse desde el anterior cambiando el tamaño y el redondeo del mismo cuerpo. El contenido que no encaje en ese cambio de forma debe eliminarse o rediseñarse.
| Etapa | Cambio visible | Implicación de diseño |
|---|---|---|
| De botón a cargador y a marca de verificación | El botón Generate pasa a un estado de progreso y después a una confirmación. | Una solicitud, una espera y un resultado se leen como un solo objeto y no como tres pantallas. |
| De dynamic island a reproductor de música | Una píldora compacta se expande hasta una tarjeta oscura con miniatura de álbum, título, barra de progreso y controles de reproducción. | El crecimiento de píldora a tarjeta muestra cómo un contenedor puede albergar tanto un estado de vistazo como uno de detalle. |
| Deslizador, interruptor, pestañas | Un deslizador de volumen se estira más allá de su máximo y le siguen un interruptor y una píldora de pestañas Day / Week / Month. | Los controles pequeños reutilizan el mismo lenguaje redondeado, de modo que el cambio se percibe más en el movimiento que en el estilo. |
| Gráfico, paleta, notificación | Un gráfico se dibuja solo, una paleta escribe “frame” y una notificación cierra el bucle. | Los estados más densos van al final, cuando el espectador ya ha aprendido la lógica de la forma. |
Lectura de los fotogramas del reproductor, las pestañas y la paleta
Tres fotogramas capturados muestran lo distinta que puede verse la misma forma. En el reproductor, una tarjeta negra redondeada lleva una miniatura en degradado, “motion study 02”, una barra de progreso en 0:49 con −2:09 restantes e iconos de anterior, reproducir y siguiente. En el fotograma de pestañas, una píldora blanca contiene Day, Week y Month, con un indicador negro detrás de Day.
En la paleta, la palabra escrita “frame” lleva a dos resultados, “Frame rate · 60fps” y “Every frame is code”, con el primero resaltado.
Estados de reproducción legibles
Las etiquetas de tiempo transcurrido y restante están bajo la barra de progreso. Son contenido ilustrativo de la interfaz dentro de una película de 14 segundos, no la duración del vídeo del showcase. Mantén ambas etiquetas claras al adaptar el reproductor a un lienzo más pequeño.
El indicador de pestañas es un objeto en movimiento
La píldora negra de Day está dentro de una pista blanca mientras el cursor pasa sobre Month. Como el indicador es una forma independiente, puede deslizarse y estirarse entre etiquetas en lugar de intercambiar resaltados.
El texto de la paleta coincide con la película
Los resultados “Frame rate · 60fps” y “Every frame is code” hablan de la propia pieza. Reutiliza esa idea, pero sustituye los textos por el vocabulario de tu producto.
Construcción guiada por el tiempo y sus contrapartidas
Las notas de origen describen una única función render(t) que dibuja todo el fotograma a partir del tiempo de la línea de tiempo maestra. Cada valor visible es una función pura de t, que usa curvas de suavizado, resortes o fotogramas clave, y ningún estado se arrastra entre fotogramas. Por eso, al retroceder se reproducen fotogramas idénticos.
Esto hace que la exportación sea predecible, pero exige más al autor. Las interacciones que serían triviales con controladores de eventos, como el hover o la escritura, deben escribirse como fotogramas clave temporizados.
Mantén un solo reloj
La línea de tiempo maestra de GSAP es el único reloj. Las capas leen su tiempo actual en lugar de ejecutar sus propios temporizadores.
Suma resortes por cada cambio
Las notas de adaptación piden sumar resortes por cada cambio, de modo que los movimientos superpuestos se mezclen en lugar de reiniciarse.
Deja que el cursor lo provoque todo
Cada cambio de estado necesita una acción del puntero antes. Sin esa regla, los morphs parecen decoración y no interacción.
Origen y alcance
Esta es una recreación y adaptación oficial en código de OpenDesign de una pieza de movimiento publicada originalmente por @twoclipping en X. Se reconstruye en código a partir de la pieza publicada, y la banda sonora de 14 segundos es una partitura original, no audio del origen. El crédito es una referencia factual y no implica aval del autor original.
Es un estudio de movimiento renderizado, no un producto de interfaz utilizable. El reproductor, el gráfico y la paleta de la película no responden a la entrada. La plantilla procede de un flujo de trabajo de vídeo propuesto de OpenDesign; su disponibilidad depende de la versión instalada.
Adaptar el morph a tu propio producto
Las notas sugieren sustituir los estados de la definición SHAPE y sus contenidos, manteniendo las tres reglas: una forma que nunca se corta, resortes sumados por cada cambio y un cursor detrás de cada cambio. Empieza enumerando los cinco estados de producto que más necesitas mostrar y ordénalos del contenedor más pequeño al más grande.
Mantén idénticos el primer y el último estado si quieres un bucle. Si tus estados difieren mucho en tamaño, espera que los fotogramas intermedios se vean estirados y reduce el tempo en consecuencia.
Elige menos estados, pero más sólidos
La película muestra unos diez estados en 14 segundos. Un teaser de producto con cuatro estados da más tiempo en pantalla a cada uno.
Cambia el tema en un solo lugar
El texto, la paleta y los tiempos están en constantes al principio de la referencia, así que cambiar el lienzo gris cálido o los componentes negros es una edición pequeña.
Evita los efectos pesados de canvas
Las notas advierten de que los degradados grandes y el ruido por píxel encarecen cada fotograma capturado, lo que ralentiza la exportación a MP4.
Cómo crear un diseño de animación morph de UI en OpenDesign
Define la forma y sus estados
Enumera los estados por los que debe pasar tu único contenedor, desde un botón compacto hasta su forma más grande. Decide qué acción del puntero activa cada cambio y fija el tempo antes de dibujar nada.
Prompt sugeridoCrea una película de movimiento de UI en bucle de 14 segundos sobre un lienzo de 1920x1080 en gris claro cálido. Usa una sola forma redondeada en blanco y negro que nunca se corte. A 120 BPM, haz que se transforme de un botón Generate en un cargador, una marca de verificación, un reproductor de música con barra de progreso, una píldora de pestañas Day / Week / Month y una paleta de comandos que escribe una palabra corta. Un cursor visible debe provocar cada cambio. Haz que el último fotograma coincida con el primero para que haya bucle. Usa solo texto de ejemplo y no añadas datos reales ni controles funcionales.
Haz que todo dependa del tiempo
Pide que cada valor visible se calcule a partir del tiempo de la línea de tiempo, de modo que retroceder produzca fotogramas idénticos. Mantén el texto, la paleta y los tiempos como constantes editables en un solo lugar.
Revisa el sonido, el bucle y el ritmo
Comprueba que el fotograma final sea igual al inicial, que las acciones del cursor coincidan con los pulsos y que los estados densos no vayan con prisa. Usa solo audio que tengas permiso para utilizar, o deja la película en silencio.
Exportar y obtener un enlace para compartir
Exporta tu diseño terminado y luego usa Compartir en OpenDesign para obtener un enlace. Abre el enlace en una ventana del navegador independiente y comprueba que la versión prevista y sus recursos estén disponibles antes de enviarlo.
Vídeo de motion del logo con historia del arte
Una película de OpenDesign de 15 segundos en 16:9 mantiene reconocible un único logotipo circular con cursor a través de looks rápidos inspirados en la historia del arte y termina con un logotipo fijo en blanco sobre negro.
Motion
Vídeo animado para un hito de la comunidad
Un vídeo animado de OpenDesign de 30 segundos pasa de la revelación de las 100K estrellas a un mosaico de colaboradores, un montaje de producto y una invitación final a escribir un prompt.
Motion
Diseño de vídeo con motion futurista
Un reel renderizado en azul eléctrico con túnel de palabras, cuenta atrás SET y final cromado FUTURE, rehecho en código sobre una cuadrícula de cortes a 120 BPM. Consulta su ritmo y cómo adaptarlo.
Motion
Diseño de showreel de motion designer
Un showreel de 15 segundos a 128 BPM recreado en código, con cortes de color secos, un HUD en vivo y siete capítulos sincronizados con los compases. Descubre cómo funcionan el ritmo, la tipografía y la paleta.
Motion