
opus 5.5 es increíble para diseño de movimiento
generó cada fotograma de este bucle de UI de 14 segundos mediante código a partir de una sola instrucción
sin editor. sin fotogramas clave manuales.
comparto la instrucción completa + todos los seguimientos gratis
tómalo y cambia los ritmos por tu producto ↓
Dame:
* color del lienzo
* color de la forma
* color de acento
* radio de la forma
* fuentes
* los estados por los que la forma debe morphearse
Usa códigos hex, segundos, relaciones de amortiguación y tamaños en píxeles en lugar de adjetivos.
Crea un bucle de movimiento UI de 14 segundos, 1440x1440, 60 fps, sin interrupciones.
Una sola forma, sin cortes.
La forma se transforma de un estado a otro y nunca se reemplaza.
Cada estado llena el 50% del marco.
La cámara comienza en el beat y se estabiliza más lentamente que la forma.
Utiliza resortes de forma cerrada.
Amortiguación de la forma: 0.72, tiempo de estabilización: 0.35 s.
Amortiguación de la cámara: 1.0, tiempo de estabilización: 0.6 s.
Las transiciones de contenido usan desenfoque de 12 px y se desvanecen durante 0.15 s.
La punta del cursor permanece fija a lo que arrastra.
Utiliza una cuadrícula de ritmo de 0,5 s.
0.0 - el mascot de píxel permanece inactivo
1.0 - el mascot se aplasta en el botón de reproducción
1.5 - cargador
2.0 - se dibuja la marca de verificación
2.5 - desplazamiento de la línea de tiempo
4.0 - el fotograma clave se extiende más allá del final y vuelve a su posición
5.0 - editor bezier
7.0 - el contador avanza de F 000 a F 840
8.5 - la barra de renderizado se llena
10.0 - la paleta de comandos escribe "export mp4"
11.0 - el mensaje emergente dice "840 fotogramas renderizados"
12.0 - el mensaje emergente se encoge y vuelve al mascot
El último fotograma debe ser el primer fotograma.
Escriba un archivo HTML con Canvas 2D.
window.renderAt(t) debe ser una función pura del tiempo.
Sin Math.random.
Sin reloj.
Sin estado persistente.
?t= debe congelar el momento exacto.
Renderice cada fotograma desde renderAt(frame / 60).
Use 4 subfotogramas para el desenfoque de movimiento.
Codifique a H.264 a 60fps.
Corrige el salto del cursor en el bucle con:
t - 14*floor(t/14)
No realices una transición entre naranja y tinta.
Utiliza una ondulación desde el centro a los 1.5 s y desde el punto de clic a los 12.0 s.
Haz que las palabras se intercambien verticalmente.
Inicia el dibujo después del desenfoque.
Dirige el cursor hacia donde estará el objetivo cuando aterrice.
Mantén la velocidad del cursor por debajo de 65 px/frame.
Primero, muéstrame el storyboard.
Luego, escribe el código.
Después del primer render, revisa 5 fotogramas alrededor de cada ritmo y corrige los problemas antes del render final.
