Fonction produit en un clic

Tu es motion designer et développeur front-end. Produis une vidéo courte à partir de cette fiche.

VIDÉO : Fonction produit en un clic
OBJECTIF : Montrer une fonction sans tourner de démo : l'interface est recomposée par le code.
À L'ÉCRAN : Une fenêtre d'application apparaît, la caméra s'approche, le curseur va cliquer un bouton, une barre de progression avance, une notification confirme le résultat.
ÉLÉMENTS ATTENDUS : une capture de l'écran réel ou la liste des éléments affichés, le libellé du bouton, le message de confirmation. S'il en manque un, ou s'il est trop maigre pour remplir l'écran, demande-le-moi avant de produire, sauf si j'ai écrit « invente » ; ne comble jamais le manque par une phrase vide ou une répétition.
CE QUE JE FOURNIS : [colle ici tes textes et tes valeurs, ou écris « invente » pour obtenir un exemple marqué « exemple »].
FICHIERS À ME DEMANDER : avant de produire, demande-moi une capture d'écran de l'interface. Attends de les avoir reçus. Si je n'en ai pas, propose un remplacement marqué « exemple » et dis-le.

STYLE : Interface épurée : fenêtres d'application, ombres douces, composants d'interface réalistes mais fictifs, curseur visible. Style générique : n'imite aucune marque ni aucun créateur existant.
MARQUE : [nom de la marque] ; couleur principale #002FA7, couleur d'accent #C2410C ; police Inter (ou une linéale proche) ; logo : [fichier SVG ou description].
FORMAT : 16:9, 1920 × 1080 px, 8 s, 30 images/s.
SON : Aucun son. Tout le message est lisible à l'écran. Si du texte est dit, incruste des sous-titres et fournis aussi un fichier .srt.
CAPTURES : recompose l'interface par le code ou anime mes captures (zoom, curseur, annotations). Masque toute donnée personnelle ou confidentielle visible.

RÈGLES :
- La vidéo se comprend sans le son. Le message est lisible dès la première image (pas de fondu depuis le noir), 12 mots au plus par écran, une idée par écran.
- Marge de sécurité de 10 % sur les bords.
- La police de la marque sert aux titres et aux textes ; le style peut ajouter des annotations (trait à main levée, écriture manuscrite) sans jamais couvrir un texte.
- Uniquement les chiffres, noms et faits que je fournis. Ce que tu inventes pour l'exemple porte la mention « exemple ».
- Aucune personne réelle simulée, aucun faux témoignage, aucun logo de tiers sans droit d'usage.
- Mouvements doux : apparitions de 0,3 à 0,6 s, une seule animation forte par scène.
- Chaque apparition associe un mouvement (glissement, échelle ou tracé) au fondu : pas de simple fondu d'opacité.
- Occupe tout le cadre : aucun texte sous 3 % de la hauteur de l'image, pas de grande zone vide.
- Le dernier écran reste lisible au moins 2 s avant la fin ou la reprise de la boucle.
- Charge les polices nommées (Google Fonts) : sans elles, la vidéo change d'aspect d'un ordinateur à l'autre.

LIVRABLE : Une seule page HTML autonome (CSS et JavaScript inclus, aucune ressource externe sauf une police Google Fonts) qui joue l'animation à la taille exacte, en boucle, avec une fonction render(t) déterministe qui dessine l'image au temps t : je pourrai la capturer image par image.

AVANT DE RENDRE : vérifie la durée exacte, relis chaque écran à l'arrêt (aucun texte coupé, contraste suffisant), et liste en trois lignes ce que tu as supposé.