ui-motion-reel

UI motion reel

Un reel est une scène HTML rendue image par image. Chaque valeur animée (taille de forme, rayon, couleur, zoom de caméra, curseur, contrôles) est un ressort amorti simulé une fois en amont à 8× la fréquence d'images, de sorte que n'importe quelle image peut être rendue indépendamment et en parallèle. La bande son est synthétisée à partir de la même timeline, de sorte que chaque battement, clic et whoosh s'aligne avec l'image.

Les éléments fournis :

• assets/engine/reel.js : le moteur (ressorts, mesure, script de curseur, caméra, échanges de flou de contenu, survol et pression, boucle sans couture, compteurs odomètre, l'ensemble d'icônes).
• assets/engine/score.js : une piste originale bouclable (nappes, arpège pincé, basse, batterie, montées, cloches) plus un design sonore UI (clics, whooshes, frappes, crans, glissés), rendu avec OfflineAudioContext.
• assets/template/index.html : une scène de démarrage de 24 s avec chaque type d'interaction : liste avec survols de lignes, glissé de curseur, bascule, odomètre, anneau de confirmation par maintien, pilule de succès, carte récapitulative, retour à la boucle.
• scripts/setup.sh : crée un dossier de reel (moteur + modèle + scripts + dépendances Node).
• scripts/render.mjs : images, audio, et un rendu MP4 parallèle avec la bande son mixée et normalisée en loudness.
• scripts/qa.mjs : planche contact, vérification de la jointure de boucle brute, bandes de transition, loudness et spectrogramme.
• references/api.md : la référence complète de la configuration Reel.define. Lisez-la avant d'écrire une scène.
• references/craft.md : les règles de motion et de design, ainsi que les erreurs déjà commises et corrigées. Lisez-la avant de concevoir des états.
• references/score.md : comment façonner la musique et le design sonore, et comment vérifier un mix que vous ne pouvez pas entendre.
• references/examples/stockback.html : le reel original de 60 s et 14 états dont ce skill a été extrait (une application fintech de reçus à actions). Lisez-le pour des idées de contenu et une chorégraphie plus dense. Il est antérieur à l'API du moteur, alors copiez les motifs, pas le code.

Flux de travail

1. Apprenez d'abord le produit. Lisez le site ou le code du produit pour sa palette, ses polices, son logo et les 5 à 8 moments qui racontent son histoire (la saisie, la « magie », la preuve, la récompense). Utilisez du texte et des données réels lorsque c'est possible : des chiffres et des logos réels rendent le reel crédible. Si l'utilisateur a demandé un look spécifique, celui-ci prévaut sur le look du produit.

2. Scénarisez les états avant d'écrire le balisage. Pour chaque état, décidez de sa taille (w, h, radius), de son remplissage (l'une des 3-4 couleurs de la palette), du zoom de la caméra (pour qu'il remplisse environ 80 % de la hauteur ou largeur du cadre), de la durée, et de ce que fait le curseur. Visez 45-60 s et 10-14 états pour un reel complet, ou 20-30 s et 5-7 états pour un teaser. À 120 BPM, un temps vaut 0,5 s et une mesure vaut 2 s. Faites en sorte que chaque durée d'état soit un multiple de 0,5 s et placez les grands moments sur les barres de mesure (multiples de 2 s) pour que la musique puisse les frapper. Les durées doivent s'additionner exactement pour donner le total.

3. Créez la structure. bash ~/.claude/skills/ui-motion-reel/scripts/setup.sh <projet>/video, puis modifiez <projet>/video/index.html. Ne modifiez pas les fichiers du moteur sauf si le reel a besoin d'une fonctionnalité du moteur ; si c'est le cas, changez la copie dans le projet et mentionnez-le.

4. Construisez la scène en suivant references/api.md : un bloc .content par état (id="c-<id>", data-w/data-h égaux à la largeur/hauteur de l'état), des identifiants sur tout ce que le curseur cible ou que vous animez, puis Reel.define({...}) avec les états, les événements du curseur, les canaux personnalisés (curseurs, bascules, maintiens, scrubs) et des fonctions update par état pour l'animation interne.

5. Examinez les images tôt et souvent. node render.mjs --stills 0,1.5,4,... puis regardez-les (construisez une planche contact avec node qa.mjs --every 2). Vérifiez chaque état au repos et quelques images à mi-morphose. Rendre des images prend quelques secondes ; un rendu complet prend environ une minute et demie pour 60 s sur 6 workers.

6. Scorez-le. Définissez score (progression, hits sur les états clés, breaks) et un crochet sfx pour les sons spécifiques à la scène (frappes, crans, compteurs, glissés). node render.mjs --audio, puis node qa.mjs et lisez la ligne de loudness et out/qa/spectrum.png (voir references/score.md : vous ne pouvez pas écouter, donc vous jugez le mix par les chiffres et les images).

7. Rendu et QA. node render.mjs --mp4 --with-audio --out <nom>.mp4, puis node qa.mjs --transitions --video out/<nom>.mp4. Confirmez que la jointure de boucle brute est 1.000000, regardez transitions.png pour les morphoses grises à mi-chemin ou le contenu qui déborde du cadre, et regardez la planche contact une fois de plus.

8. Livrez le MP4 (et une copie 720p si un transfert de fichier pourrait avoir du mal avec la taille), plus une courte liste de ce qu'il contient : états, interactions, ce que fait la musique. Dites honnêtement à l'utilisateur que vous avez vérifié l'audio par analyse, pas à l'oreille. Proposez de re-temporiser ou re-thématiser : un nouveau rendu est rapide.

Non-négociables (le rendu visuel)

Ce sont les éléments qui font que le résultat ressemble à un reel de designer plutôt qu'à un modèle. references/craft.md explique chacun d'eux.

• Une seule forme, jamais de coupure. Chaque état est le même élément qui change de taille, de rayon et de remplissage ; le contenu est échangé à l'intérieur avec un court flou (le moteur le fait).
• Un curseur provoque chaque changement : un clic, un glissé, ou une pression maintenue. Aucun état ne change tout seul, sauf s'il s'agit d'une réponse système authentique (un maintien qui se termine).
• Des ressorts partout ; au maximum un très léger dépassement (zeta autour de 0,86 pour la taille, 1,0 pour la couleur et la caméra). Pas d'assouplissement rebondissant.
• La caméra s'adapte à chaque état ; la dernière image est égale à la première pour que le reel boucle.
• Pas de temps mort : quelque chose de significatif bouge à chaque instant, et le curseur n'attend jamais plus d'environ une seconde.
• Pas d'explosions de particules, de lueurs, de flare de lentille, de dégradés sur le chrome de l'interface utilisateur, ou de traits d'icônes non assortis (utilisez le jeu d'icônes du moteur : une grille 24, un trait 1,75).
• Une police de caractères UI, éventuellement avec un accent d'affichage (le modèle associe Geist avec Instrument Serif italique). Utilisez les polices du produit quand il en a.

Notes de performance

• Un reel de 60 s en 1080p60 correspond à 3 600 images. Avec 6 workers, le rendu prend environ 80 à 90 s sur un Mac Apple Silicon.
• Les scripts appellent process.exit à la fin car puppeteer peut laisser Node en vie après la fin du travail. Si vous écrivez vos propres scripts, faites de même, sinon les longues commandes sembleront bloquées.
• Sur les réseaux où les gros téléchargements expirent, exportez aussi une copie 720p : ffmpeg -i reel.mp4 -vf scale=1280:720 -c:v libx264 -crf 25 -c:a aac -b:a 160k reel-720p.mp4 (ffmpeg se trouve dans node_modules/@ffmpeg-installer/*/ffmpeg).