Démo vers reel promo : reels verticaux calés sur le beat

Kinetix : des reels à partir de code

Kinetix se trouve dans un dépôt (à trouver : kinetix dans le PATH, $KINETIX_HOME, ou un checkout kinetix/ avec runtime/kinetix.js). Toutes les commandes ci-dessous sont kinetix <cmd> ; exécutez d'abord kinetix doctor et ./setup.sh si des éléments manquent.

Le concept : chaque image est une fonction pure du temps. Un reel est un index.html avec des scènes sur une timeline ; la bande son est construite par music.py sur la même grille de beat, de sorte que les coupes, shakes, et drops tombent ensemble.

1. Rassembler d'abord du matériel réel

• L'histoire vient des propres mots du produit. Lisez son README, son texte de site, et les chaînes de son application, et citez-les. N'inventez jamais de statistiques, d'utilisateurs, de récompenses ou de vitesses.
• Montrez la chose réelle. Utilisez des captures d'écran de l'application, des enregistrements d'écran, ou une page web en direct capturée avec Playwright à 2× DPI. Si la capture frapperait un backend en direct, simulez l'API dans le navigateur (page.route) plutôt que de créer de vrais enregistrements. Étiquetez les images simulées ou de démonstration comme telles.
• Choisissez les nombres une fois. Si les sources ne correspondent pas (1,2 s contre 1,5 s), utilisez une valeur de manière cohérente et dites laquelle dans le transfert.
• La voix est optionnelle. Pour les lignes vocales, utilisez une API TTS pour laquelle l'utilisateur a une clé (tools/tts_sarvam.py pour les langues indiennes), puis kinetix captions.

2. Planifier sur la grille

À 150 bpm, un beat vaut 0,4 s et une mesure vaut 1,6 s. Chaque limite de section et chaque gros impact se fait sur un beat. Une forme éprouvée de 50 à 60 s :

section	mesures	travail
accroche	3	accroche compréhensible en 2 s : point de vue + la douleur
montée	6–7	monter en intensité sur les coupes de mesures, puis un monteur
pause	¼	0,4 s quasi-silence ("enfin…")
drop 1	8	logo slam, puis le flux du produit, un beat par action
mi-temps	4–5	le retournement ou la profondeur, filtré et plus calme
drop 2	8–10	flex rapide : images, vraies statistiques, preuve
outro	3	logo, tagline, URL, fondu

Le texte doit être lisible. Entrée rapide, puis maintenir : environ 0,8 s pour une étiquette et 0,3 s par mot pour une phrase. Le texte séquentiel va sur un beat sur deux. Seuls les accents non textuels peuvent frapper chaque beat.

3. Construire le reel

kinetix new my-reel            # vertical ; ajouter --landscape pour 1920x1080

my-reel/index.html utilise le runtime (references/runtime.md) :

const K = Kinetix.init({ width: 1080, height: 1920, bpm: 150, build: [[3.2, 9.2]], drops: [[9.6, 16]], glitches: [9.6], fonts: [...] });
K.scene(9.6, 12.8, `<div class="c big t" style="left:540px;top:800px;font-size:230px">BRAND</div>`,
  (lt, q) => K.slam(q(".t"), lt, 0, { from: 3 }));
K.start({ dur: 19.2 }).then(({ timeline }) => { window.__timelines["main"] = timeline; });  // garder cette ligne littérale

Les motifs de scène (cadres de téléphone, panneaux de séquences holographiques, slams de stats, bulles de chat, compteurs, frappe) se trouvent dans references/recipes.md. Restez dans la marque : prenez les couleurs, les polices et le logo du produit, et thémizez-les via les variables :root dans kinetix.css.

4. Construire la bande sonore (references/music.md)

• Fond : kinetix music gen "<genre, instruments, mood>" --bpm 150 --seconds 60 -o my-reel/assets/bed.wav. MusicGen suit le BPM dans l'invite, et l'outil étire temporellement jusqu'à la grille exacte et écrit bed.json. Sans GPU ou MusicGen, Mix(bpm=150, seconds=DUR) construit un mix pure-synth.
• music.py : m = Mix("assets/bed.wav", seconds=DUR), puis :
  • placez les hits aux mêmes moments que les scènes : m.add(t, h.impact()), m.drums(...), m.sfx("impact/...")
  • façonnez l'arrangement : m.lowpass([(t, hz), ...]), m.bed_level(...), m.gap(14.0, 14.4)
  • puis exécutez kinetix mix my-reel.
• Vérifiez la dynamique (vous ne pouvez pas écouter, donc mesurez). Le RMS par section doit monter de la montée au drop, baisser à la mi-temps, et culminer aux drops. Si la montée est plus forte que le drop, baissez les couches de synthé de la montée. Rendez également un spectrogramme (ffmpeg ... showspectrumpic) et regardez-le.
• Voix : après le mixage, confirmez qu'elles sont audibles avec Whisper sur le segment mixé.

5. Sous-titres (optionnel, nécessite une voix)

captions-lines.json contient [{"clip": "assets/line1.wav", "at": 1.62, "text": "script exact", "y": 600}]. Puis exécutez kinetix captions my-reel. Whisper s'exécute en mode anglais avec le script comme invite, donc les lignes hinglish et autres romanisées gardent leur orthographe. Les pages sont construites par ligne.

6. Vérifier : regarder, puis gate

1. kinetix snap my-reel 1.5,4,9,..., un moment par scène. Ouvrez les feuilles de contact et regardez vraiment. Une image vide signifie une erreur JS ou une timeline non enregistrée.
2. kinetix check my-reel échantillonne toutes les ½ s, et doit se terminer avec 0 erreurs.
   • Corrigez les vrais problèmes : texte débordant de sa boîte, chevauchements, texte caché, contraste.
   • Marquez uniquement le superposition intentionnelle, jamais les vrais problèmes : data-layout-allow-overlap pour un tampon sur un document, data-layout-allow-occlusion pour du texte délibérément sur un sprite, data-layout-allow-overflow pour une capture d'écran recadrée dans un cadre, data-layout-ignore pour un fond décoratif ou un gros emoji fané.
   • Avant de prétendre qu'un "correctif" était visible, comparez les images avant et après. Certains résultats sont des faux positifs du vérificateur.

7. Effets et rendu

kinetix fx leak --hue 200 -o overlays/leak-cyan.mov        # hue : 0 ambre, 70 rose, 200 cyan, 290 lime
kinetix fx stinger --colors "#c8ff3d,#5a45c9" -o overlays/stinger.mov
kinetix render my-reel -o out.mp4 --overlay overlays/[email protected]:0.8 --overlay overlays/[email protected] --poster 18.3

• Fuites : les fichiers leak-* sont incrustés en tant que lumière, donc le texte reste lisible. Commencez une fuite environ 0,4 s avant un drop pour qu'elle culmine dessus, et ne laissez pas une fuite culminer sur un logo slam.
• Stingers : commencez environ 0,3 s avant une coupe pour que le panneau la couvre.
• Poster : --poster intègre la meilleure image stable comme image 0, qui est la vignette sur X, YouTube, Slack et Discord. Choisissez une carte logo ou le cliché principal, jamais une image en milieu d'animation ou sur un flash.
• Vérification finale : extrayez des images du mp4 final (image 0, chaque pic de superposition, chaque scène de séquence) et regardez-les.

Pièges (tous rencontrés en vrai)

• Le pont retourne { timeline }, pas la timeline. Une timeline GSAP est un thenable, donc la retourner brute depuis une fonction asynchrone pend pour toujours et chaque image rendue est vide.
• Les boîtes de surlignage sur les polices d'affichage nécessitent line-height: 1.12 (déjà dans kinetix.css), sinon les glyphes dépassent et check signale text_box_overflow.
• Les séquences doivent être <video muted data-start data-duration [data-media-start]> dans un wrapper sans timing, jamais de séquences JPG. Animez le wrapper, pas la vidéo.
• Les échanges d'images (écran A → B) utilisent KinetixBridge.stackSet(img, src), qui pré-décode les variantes. Définir src au moment du rendu capture des images non décodées.
• Chaque police nommée nécessite @font-face. Pour la police emoji système, déclarez src: local("Noto Color Emoji").
• Fonds MusicGen : beat_track de librosa lit mal les tempos phonk et club (il a appelé 150 bpm "121" et "199"), c'est pourquoi hypebeat utilise l'autocorrélation des onsets et plafonne l'étirement à ±12 %. musicgen-medium nécessite environ 8 Go de RAM libre pour se charger ; small est le défaut.
• Sous-titres : regrouper toutes les lignes en un seul appel createTikTokStyleCaptions fusionne le dernier mot d'une ligne dans la suivante, donc page par ligne (le runtime le fait).
• Remotion : rendez avec --gl=swangle (le GL logiciel fonctionne partout) et en ProRes 4444 avec alpha. Le décodeur VP9 de ffmpeg abandonne l'alpha.
• Licences :
  • La sortie de MusicGen est CC-BY-NC, acceptable pour les démos et les chaînes personnelles, pas pour le travail rémunéré.
  • Remotion est gratuit pour les particuliers et les entreprises de moins de 3 personnes.
  • Les SFX inclus sont CC0.

Transfert

Dites à l'utilisateur :

• où se trouve le mp4
• ce qu'il contient, sous forme de courte liste beat par beat
• ce que vous avez vérifié et comment (feuilles de contact, résultat de la vérification, volume sonore)
• tout choix de nombre ou d'affirmation que vous avez fait
• ce que vous n'avez pas pu vérifier (vous ne pouvez pas l'entendre ; demandez-leur d'écouter)

Proposez de publier, mais ne publiez pas sans un oui.