taoyanzhu1024-bot/kinetic-reel

Kinetic reel

Méthode pour réaliser des reels animés éditoriaux et énergiques entièrement en code, distillée à partir du « Work Reel ’26 » (un reel portfolio de 84 s : Microsoft → UW–Madison Surgery → Enterprise RAG → finale trace). Elle est fournie sous forme d’un dossier template/ exécutable (une démo de 17 s qui utilise toutes les techniques) et d’un exemple complet dans examples/work-reel-26/.

Comment ça marche. Chaque image est une fonction pure de t. reel/index.html charge reel/cues.js (la timeline) et reel/reel.js (un module ES : calques three.js, un canevas de typographie 2D et une passe WebGL post). render.mjs pilote Chrome headless pour générer des planches contacts, des bandes et des images fixes pour la prévisualisation, ou chaque image en parallèle, et ffmpeg encode le MP4. music/score.mjs synthétise la musique dans Node à partir du même cues.js, de sorte que chaque temps fort tombe sur son image.

Workflow

0. Échafaudage

bash <skill-dir>/scripts/new_project.sh <project-dir>   # <skill-dir> = dossier contenant ce SKILL.md

Ensuite, lisez references/style-guide.md (le look, le vocabulaire de mouvement, le catalogue de transitions, les règles de mise en page) et references/sound.md en entier avant de concevoir. Parcourez examples/work-reel-26/reel.js pour voir comment un long reel est organisé.

1. Décider de l’accent, puis storyboard

• Demandez (ou décidez) ce qui dirige et combien de temps chaque partie reçoit. Les spectateurs remarquent les proportions : la v2 du Work Reel donnait à Microsoft ~60 % et a dû être rééquilibrée. La solution a été d’ajouter du temps pour les autres chapitres plutôt que de réduire celui que les gens appréciaient. Visez un temps principal ≈ 35–40 %.
• Rédigez STORYBOARD.md à partir du modèle : budget temps, source de vérité pour les faits, un dispositif unificateur, et une ligne par plan (titre, mécanisme visuel, transition entrante, son).
• Les faits sont sacrés. Uniquement des chiffres provenant de la source fournie, chacun avec son périmètre (« ~180 cas construits maison », « 320 invites bilingues »). Tout élément illustratif (ID d’outil, ID de document, exemples de réponses, AST) est étiqueté SCHEMATIC dans la HUD. Ne dessinez jamais de données par dimension que vous ne possédez pas. Visualisez le processus. Travail médical/clinique : pas de revendication d’efficacité, dites « en développement / pas encore validé » le cas échéant.

2. Construction

• reel/cues.js : S (début de scène), hits (chaque temps qui compte), CH (chapitres → la barre de progression segmentée), dur. 120 BPM : coupures sur les temps, changements de chapitre sur les mesures.
• reel/reel.js : une fonction par plan, sName(t). Chacune peint l’image entière : bg() → calque GL via glShot(...) → typographie et formes → hud(t, {...}). Enregistrez le plan dans SCENES avec une clé ; ajoutez une transition vers celui-ci dans TR (ou omettez-la pour une coupure franche sur le temps).
• Conservez la constante CJK listant chaque caractère chinois que vous dessinez (les polices sont chargées en sous-ensemble).

3. Regardez-le, chaque plan, plusieurs fois

node render.mjs --sheet=1,4,7,10,13,15.5 --cols=3 --w=640 --out=out/check/sheet.jpg   # images clés
node render.mjs --stills=10.4 --out=out/stills                                          # détail pleine résolution
ffmpeg -ss 16.0 -t .6 -i out/reel.mp4 -vf "fps=10,scale=320:-1,tile=6x1" out/check/tr.jpg   # une transition, à partir de l’encodage

Ouvrez chaque image avec Read. Vérifiez les collisions (étiquettes sur lignes, statistiques sur statistiques, texte dans les bandes HUD), les images vides sur une coupure, la lisibilité à 1600 px de large, et que chaque transition démarre sur quelque chose et atterrit proprement. Budget : une planche par chapitre, une image fixe pleine résolution par plan dense, une bande par type de transition.

4. Musique, rendu, encodage

node music/score.mjs && ffmpeg -y -i music/score.wav -af "highpass=f=30,equalizer=f=250:t=q:w=1:g=-2,loudnorm=I=-14:TP=-1.2:LRA=8" -c:a aac -b:a 192k assets/score.m4a
node render.mjs --frames --workers=4                                    # ~8–40 ms/image sur un GPU Mac : secondes, pas minutes
node render.mjs --encode --audio=assets/score.m4a --out=out/reel.mp4 --fps=30
# copie web : ffmpeg -i out/reel.mp4 -vf scale=1600:900:flags=lanczos -c:v libx264 -preset slow -crf 23 -c:a aac -b:a 128k -movflags +faststart out/reel-web.mp4

Vous ne pouvez pas entendre le score : vérifiez-le avec showspectrumpic et le RMS par section, et mentionnez-le dans votre rapport. Les modifications audio uniquement ne nécessitent pas de nouveau rendu : remux (-map 0:v -map 1:a -c:v copy).

Les règles les plus importantes

1. La typographie est l’héroïne. Police condensée (Anton) pour les titres, une large grotesque (Archivo Black) pour les impacts, italique serif (Instrument Serif) pour la seule ligne « voix », monospace (JetBrains Mono) pour chaque étiquette. Grands titres anglais, petites annotations chinoises quand le public est bilingue.
2. Chaque plan a un mécanisme, pas seulement des mots : un routage de grille, un balayage de matrice, un jeton sautant dans une machine d’état, des listes qui fusionnent, des paquets passant des portes. Le titre le nomme ; le mécanisme le prouve.
3. Calé sur les beats. Les lettres, les puces, les compteurs et les coupures reposent sur les hits. Entrée rapide (expo-out), tenue, suivant.
4. Continuité. Préférez les transitions par continuité de forme (zoom à travers l’élément que l’œil regarde, iris depuis la chose qui vient de s’allumer) aux coupures franches dans un chapitre. Les coupures franches avec impact sont réservées aux transitions de chapitre.
5. Pas de bruits de sifflement. Des montées dans la tonalité principale vers les chapitres, des signaux tonaux calmes à l’intérieur, du silence sur environ la moitié des coupures.
6. Données honnêtes (voir étape 1) et une étiquette SCHEMATIC sur tout élément illustratif.
7. Protégez les maths. Les rayons de backOut() peuvent descendre en dessous de 0 (le canvas lance une erreur) : circle/starburst/jelly protègent déjà. Dans le synthétiseur, limitez le temps local à ≥ 0 avant pow() et limitez f/q du SVF (déjà dans le template).

Livrer un reel en tant qu’intro de site

Le Work Reel est livré comme page d’entrée de son site : index.html joue le reel en plein écran puis passe au portfolio. Le motif est fourni dans examples/site-intro/ (index.html, css/intro-reel.css, js/intro-reel.js, plus un Cloudflare Worker qui ajoute le support HTTP Range) :

• Essayez la lecture automatique avec son. Si refusée, lisez en mode muet avec une pulsation « tap for sound ». Si cela est aussi refusé, ou prefers-reduced-motion, affichez l’écran de fin en mode « start » (play est le bouton principal).
• Pendant la lecture : petites pastilles de verre en haut au centre, car la HUD du reel occupe les coins. « Skip intro » porte un anneau qui se remplit avec le reel. Un bouton de son a des barres d’égaliseur qui palpitent au BPM du reel. Esc passe, M coupe le son.
• Écran de fin : la grammaire du reel en HTML. Parenthèses d’angle, le nom en lettres à chute (Anton), micro-typo monospace, une barre de trace segmentée, une version en champ de points 2D du terrain de particules, un CTA principal vert citron (texte qui roule au survol, brillance, magnétique, une pulsation chaque mesure), et un fantôme « watch again ».
• Quittez par un iris vert citron depuis la commande pressée, baissez le volume audio, puis naviguez.
• Deux encodages (1600×900 à ~1,3 Mbps, 960×540 à ~0,6 Mbps pour téléphones / save-data), preload="auto", une affiche. Servez-les avec HTTP Range (206), sinon la recherche et Safari casseront.