Morphing d’interface continu en boucle (Master Prompt @twoclipping)

Rôle

Tu es un directeur de création en motion design et ingénieur créatif senior expert en animations d'interfaces de classe mondiale (Dribbble, Apple, Stripe) et en rendu de code haute précision (HTML, CSS springs, Canvas, Remotion et Playwright).

Contexte

Je veux créer une vidéo motion design d'interface produit fluide en boucle infinie (1440x1440 ou 1080x1080). L'animation met en scène une forme unique qui ne subit aucun cut ni fondu, et se métamorphose d'état en état au rythme de la musique sous l'action d'un curseur réaliste.

Tâche

<inputs> Demande-moi d'abord : 8 à 12 états d'interface que la forme doit adopter (ex: bouton, loader, coche de validation, dynamic island, lecteur audio, curseur de volume, commutateur toggle, onglets, graphique de données, palette de commande ⌘K, toast de notification), une palette noir & blanc pur ou avec une seule couleur d'accent [couleur d'accent], et un morceau musical libre de droits calé à environ 120 BPM [lien ou tempo musical]. </inputs> <direction> Niveau de motion design digne de Dribbble. Une seule forme continue, jamais de coupure (cut) : chaque état est le même élément qui métamorphose sa taille, son rayon de bordure (border-radius) et sa couleur pendant que son contenu permute avec un très court flou directionnel. Un curseur souris pilote chaque changement avec de vrais clics et glissements (drags). Fond gris chaud lumineux (#f4f4f2), composants noirs et blancs, une police d'interface nette et épurée (Geist ou Inter). Des ressorts physiques (springs) partout, avec un dépassement minime (overshoot subtil). La caméra effectue un zoom pour que chaque état remplisse l'écran. La dernière image est identique à la première, pour une boucle parfaite. Strictement banni : amortissements rebondissants exagérés (bouncy easing de template), explosions de particules, lueurs néon artificielles, dégradés criards sur les bordures UI, épaisseurs de traits d'icônes disparates, temps morts, et tout ce qui ressemble à un modèle préfabriqué. </direction> <structure> Tempo à 120 BPM, 7 mesures musicales, un événement visuel se produit sur chaque temps fort (beat). Bouton → loader circulaire → coche validée → dynamic island → lecteur audio avec métamorphose play/pause → balayage de la barre de progression → transformation en curseur de volume qui s'étire élastiquement quand on tire au-delà du maximum → bascule d'un interrupteur toggle sur le temps fort → le curseur de l'interrupteur devient un indicateur liquide d'onglets → les onglets s'ouvrent en un graphique qui se trace de lui-même avec infobulle au survol → repli en palette de commande ⌘K → saisie de texte pour filtrer → touche entrée → toast de confirmation → retour instantané au bouton initial. </structure> <build> 1. Un fichier HTML unique, format carré 1440x1440. Chaque style est calculé mathématiquement à partir du temps à l'intérieur d'une fonction seek(t) : aucune transition CSS asynchrone, aucun setTimeout/setInterval, aucun état persistant entre les images. 2. Les ressorts physiques (springs) sont des réponses scalaires analytiques à forme fermée (closed-form step responses). Une valeur changeant plusieurs fois de cible est la somme d'un ressort par impulsion, restant ainsi une fonction mathématique pure du temps. 3. Les deux bords de l'indicateur d'onglets sont régis par des ressorts asymétriques : le bord d'attaque s'étire en avant du bord arrière pour créer l'effet de goutte liquide. Même principe pour le curseur du toggle. 4. Les glissements (drags) sont des manipulations directes : tant que le curseur est enfoncé, la valeur est calculée depuis sa position. Au relâchement, elle revient par ressort élastique depuis son point d'arrêt. 5. Analyse de la grille rythmique de la musique pour démarrer sur un temps fort (downbeat). Chaque bruitage sonore d'interface (click, whoosh, pop) est positionné sur son pic acoustique mesuré. 6. Rendu par Playwright : 4 sous-images calculées par frame, fusionnées avec le filtre tmix de ffmpeg pour un flou de mouvement (motion blur) cinématographique naturel à 60 images par seconde. 7. Génération d'une image fixe par temps fort avant le rendu vidéo final pour corriger immédiatement tout décalage, surcharge ou problème de lisibilité. </build> <gotchas> Ne jamais appliquer will-change sur un élément que la caméra met à l'échelle, sous peine de rendre le texte flou. Le texte qui permute dans un conteneur en métamorphose nécessite son propre timing d'entrée et de sortie calibré, sinon les mots se chevauchent. La dernière image doit être rigoureusement identique à la première (position et vélocité du curseur incluses), sinon la boucle bégaye. </gotchas> <start> Demande-moi d'abord les paramètres d'entrée (<inputs>), puis présente-moi la liste détaillée des états calés sur la grille rythmique avant d'écrire la moindre ligne de code. </start>

Format

Le code complet prêt à l'emploi (HTML autonome avec fonction seek(t) et script de capture Playwright/Remotion), précédé du dialogue pas-à-pas pour caler vos états d'interface sur mesure.