Plantilla de Diseño de Movimiento de Transformación de UI
Una plantilla de prompt integral para crear diseños de movimiento de UI en bucle donde los elementos se transforman a través de varios estados sincronizados con la música.
Instrucción
<inputs>
Pídeme: 8 a 12 estados de UI en los que quiero que la forma se convierta (por ejemplo, botón, cargador, reproductor, control deslizante, interruptor, pestañas, gráfico, paleta de comandos, notificación emergente), blanco y negro puro o un color de acento, y una canción libre de derechos de alrededor de 120 BPM (por ejemplo, Mixkit, gratis para uso comercial).
</inputs>
<direction>
Movimiento de UI nivel Dribbble. Una sola forma, sin cortes: cada estado es el mismo elemento transformando su tamaño, radio y color mientras su contenido cambia con un breve desenfoque. Un cursor impulsa cada cambio con clics y arrastres reales. Lienzo gris cálido claro, componentes en blanco y negro, una fuente de UI limpia (Geist). Resortes por todas partes, un pequeño sobrepaso como máximo. La cámara hace zoom para que cada estado llene el encuadre. El último cuadro es el primer cuadro, por lo que entra en bucle.
Prohibido: easing rebote, ráfagas de partículas, brillos, gradientes en la interfaz de usuario, trazos de iconos desiguales, tiempos muertos, cualquier cosa que parezca una plantilla.
</direction>
<structure>
120 BPM, 7 compases, algo sucede en cada pulso.
Botón → cargador → check → isla dinámica → reproductor de música con una transformación play/pausa → desplaza la barra de progreso → se convierte en un control deslizante de volumen que se estira cuando se arrastra más allá del máximo → un interruptor se activa al ritmo → el pomo se convierte en un indicador de pestaña líquido → las pestañas se abren en un gráfico que se dibuja solo, con una información sobre herramientas al pasar el cursor → colapsa en ⌘K → escribe para filtrar → enter → notificación emergente → vuelve al botón.
</structure>
<build>
1. Un archivo HTML, cuadrado 1440x1440. Cada estilo se calcula desde el tiempo dentro de seek(t): sin transiciones CSS, sin temporizadores, sin estado transportado entre cuadros.
2. Los resortes son respuestas escalonadas de forma cerrada. Un valor que cambia de objetivo muchas veces es la suma de un resorte por cambio, por lo que permanece como una función pura del tiempo.
3. Los dos bordes del indicador de pestañas viajan en diferentes resortes, por lo que el borde delantero se estira por delante del trasero. El mismo truco para el pomo del interruptor.
4. Los arrastres son manipulación directa: mientras el cursor está presionado, el valor se calcula desde su posición. Al soltarlo, regresa con un efecto de resorte desde donde estaba.
5. Analiza la canción con numpy para la cuadrícula de pulsos y comienza en un tiempo fuerte. Coloca cada sonido de UI según su pico medido.
6. Renderiza con Playwright: 4 subcuadros por cuadro, mezclados con ffmpeg tmix para desenfoque de movimiento a 60fps.
7. Renderiza un cuadro por pulso antes del renderizado completo. Corrige cualquier cosa fuera de la cuadrícula, apretada o difícil de leer.
</build>
<gotchas>
Nunca pongas will-change en nada que la cámara escale o el texto se renderice borroso. El texto que cambia dentro de un contenedor en transformación necesita sus propios tiempos de entrada y salida o se superpondrá. Haz que el último cuadro sea idéntico al primero, incluyendo la posición y velocidad del cursor, o el bucle tendrá saltos.
</gotchas>
<start>
Pídeme los inputs, luego muéstrame la lista de estados en la cuadrícula de pulsos antes de escribir cualquier código.
</start>
Cómo usar este prompt
1
Copia el prompt completo de arriba.
2
Abre una plataforma compatible con Claude Opus 5.5, como YouMind, y pega el prompt.
3
Cambia el tema, el estilo o los detalles según tu idea y luego genera.
Este es un prompt de IA gratuito de la biblioteca de prompts de YouMind. Explora miles de prompts de vídeo más, todos gratis para copiar y adaptar.
Que la IA busque entre decenas de miles de prompts. Filtrá por modelo, rango de fechas y palabras clave, y ordená por interacción: vistas, guardados, reposts y más.
Convierte cualquier foto en un prompt de imagen IA detallado. El conversor gratuito de imagen a prompt analiza composición, estilo e iluminación para recrear cualquier estética en segundos.
