Opus 5.5 est fou pour le motion design : il a généré chaque image de cette boucle UI de 14 secondes à partir d’un seul prompt, sans éditeur ni keyframes manuels. Je partage gratuitement le prompt complet et toutes les suites. Utilisez-le et remplacez les rythmes par ceux de votre produit ↓
Donne-moi :
* couleur du canevas
* couleur de la forme
* couleur d'accent
* rayon de la forme
* polices
* les états par lesquels la forme doit se morphoser
Créez une boucle de mouvement UI sans rupture de 14 secondes, 1440x1440, 60 images par seconde.
Une seule forme, zéro coupure.
La forme se morphing d'un état à l'autre et n'est jamais remplacée.
Chaque état remplit 50 % de l'image.
La caméra commence sur le beat et se stabilise plus lentement que la forme.
Utilisez des ressorts à forme fermée.
Amortissement de la forme : 0,72, temps de stabilisation : 0,35 s.
Amortissement de la caméra : 1,0, temps de stabilisation : 0,6 s.
Les changements de contenu utilisent un flou de 12 px et une transition en fondu sur 0,15 s.
Le pointeur du curseur reste fixé à ce qu'il traîne.
Utilisez une grille de battements de 0,5 s.
0,0 - le mascotte pixel attend
1,0 - le mascotte s'écrase sur le bouton de lecture
1,5 - chargement
2,0 - la coche s'affiche
2,5 - défilement de la ligne de temps
4,0 - la keyframe s'étend au-delà de la fin et revient en place
5,0 - éditeur bézier
7,0 - le compteur passe de F 000 à F 840
8,5 - la barre de rendu se remplit
10,0 - la palette de commandes tape « export mp4 »
11,0 - la notification affiche « 840 images rendues »
12,0 - la notification se réduit et retourne dans le mascotte
La dernière image doit être la première image.
Écrivez un fichier HTML avec Canvas 2D.
window.renderAt(t) doit être une fonction pure du temps.
Pas de Math.random.
Pas d'horloge.
Pas d'état conservé.
?t= doit figer l'instant exact.
Rendre chaque image à partir de renderAt(frame / 60).
Utilisez 4 sous-images pour le flou de mouvement.
Encoder en H.264 à 60 images par seconde.
Corrigez le saut du curseur à la boucle avec :
t - 14*floor(t/14)
Ne mélangez pas l’orange dans l’encre.
Utilisez une ondulation depuis le centre à 1,5 s et depuis le point de clic à 12,0 s.
Faites défiler les changements de mots verticalement.
Démarrez le dessin après l’effet de flou.
Dirigez le curseur vers l’endroit où la cible sera lorsqu’elle atterrira.
Gardez la vitesse du curseur sous 65 px/trame.
Montre-moi d'abord le storyboard.
Ensuite, écris le code.
Après le premier rendu, vérifie 5 images autour de chaque battement et corrige les problèmes avant le rendu final.