Demo zum Promo-Reel: beat-synchrone Hochformat-Reels aus Code

Kinetix: Reels aus Code

Kinetix lebt in einem Repository (finde es: kinetix im PATH, $KINETIX_HOME oder ein kinetix/-Checkout mit runtime/kinetix.js). Alle Befehle unten sind kinetix <cmd>; führe zuerst kinetix doctor und ./setup.sh aus, falls Teile fehlen.

Das Modell: Jeder Frame ist eine reine Funktion der Zeit. Ein Reel ist index.html mit Szenen auf einer Zeitleiste; der Soundtrack wird von music.py auf dem gleichen Beat-Raster erstellt, sodass Schnitte, Erschütterungen und Drops zusammenfallen.

1. Sammle zuerst echtes Material

• Die Geschichte kommt aus den eigenen Worten des Produkts. Lies dessen README, Website-Texte und App-Strings und zitiere sie. Erfinde niemals Statistiken, Nutzer, Auszeichnungen oder Geschwindigkeiten.
• Zeige das echte Ding. Verwende App-Screenshots, Bildschirmaufnahmen oder eine Live-Webseite, die mit Playwright bei 2× DPI erfasst wurde. Wenn das Erfassen ein Live-Backend treffen würde, simuliere die API im Browser (page.route), anstatt echte Datensätze zu erstellen. Kennzeichne simulierte oder Demo-Aufnahmen als solche.
• Wähle Zahlen einmal. Wenn Quellen uneinig sind (1,2 s vs. 1,5 s), verwende einen Wert konsistent und gib in der Übergabe an, welcher.
• Sprache ist optional. Für Sprachzeilen verwende eine TTS-API, für die der Benutzer einen Schlüssel hat (tools/tts_sarvam.py für indische Sprachen), dann kinetix captions.

2. Plane auf dem Raster

Bei 150 bpm ist ein Beat 0,4 s und ein Takt 1,6 s. Jede Abschnittsgrenze und jeder große Treffer liegt auf einem Beat. Eine bewährte 50–60 s Form:

Abschnitt	Takte	Aufgabe
Cold Open	3	sympathischer Haken in 2 s: POV + der Schmerz
Build	6–7	Steigerung bei Taktschnitten, dann ein Riser
Lücke	¼	0,4 s fast Stille („bis jetzt…“)
Drop 1	8	Logo-Slam, dann der Produktablauf, ein Beat pro Aktion
Halftime	4–5	die Wendung oder die Tiefe, gefiltert und leiser
Drop 2	8–10	schnelles Flex: Footage, echte Statistiken, Beweise
Outro	3	Logo, Tagline, URL, Blende

Text muss lesbar sein. Schnell rein, dann halten: etwa 0,8 s für ein Label und 0,3 s pro Wort für einen Satz. Sequentieller Text erscheint auf jedem zweiten Beat. Nur nicht-textliche Akzente dürfen jeden Beat treffen.

3. Baue das Reel

kinetix new my-reel            # vertikal; --landscape für 1920x1080 hinzufügen

my-reel/index.html verwendet die Laufzeit (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">MARKE</div>`,
  (lt, q) => K.slam(q(".t"), lt, 0, { from: 3 }));
K.start({ dur: 19.2 }).then(({ timeline }) => { window.__timelines["main"] = timeline; });  // diesen Teil wörtlich lassen

Szenenmuster (Telefonrahmen, Hologramm-Footage-Panels, Statistik-Slams, Chat-Blasen, Zähler, Tippen) findest du in references/recipes.md. Bleib bei der Marke: übernimm Farben, Schriftarten und das Logo vom Produkt und thematisiere sie durch die :root-Variablen in kinetix.css.

4. Baue den Soundtrack (references/music.md)

• Bed: kinetix music gen "<Genre, Instrumente, Stimmung>" --bpm 150 --seconds 60 -o my-reel/assets/bed.wav. MusicGen folgt dem BPM im Prompt, und das Tool zeitstreckt auf das exakte Raster und schreibt bed.json. Ohne GPU oder MusicGen erstellt Mix(bpm=150, seconds=DAUER) einen reinen Synth-Mix.
• music.py: m = Mix("assets/bed.wav", seconds=DAUER), dann:
  • platziere Hits zu denselben Zeiten wie die Szenen: m.add(t, h.impact()), m.drums(...), m.sfx("impact/...")
  • forme das Arrangement: m.lowpass([(t, hz), ...]), m.bed_level(...), m.gap(14.0, 14.4)
  • führe dann kinetix mix my-reel aus.
• Überprüfe die Dynamik (du kannst nicht hören, also messe). Der RMS pro Abschnitt sollte von Build zu Drop ansteigen, bei Halftime abfallen und bei den Drops seinen Höhepunkt erreichen. Wenn der Build lauter ist als der Drop, drehe die Synth-Layer des Builds herunter. Rendere auch ein Spektrogramm (ffmpeg ... showspectrumpic) und sieh es dir an.
• Sprachaufnahmen: Vergewissere dich nach dem Mischen, dass sie mit Whisper auf dem gemischten Segment hörbar sind.

5. Untertitel (optional, erfordert Sprache)

captions-lines.json enthält [{"clip": "assets/line1.wav", "at": 1.62, "text": "exakter Text", "y": 600}]. Dann führe kinetix captions my-reel aus. Whisper läuft im Englisch-Modus mit dem Text als Prompt, sodass Hinglish und andere romanisierte Zeilen ihre Schreibweise behalten. Seiten werden pro Zeile erstellt.

6. Verifizieren: anschauen, dann prüfen

1. kinetix snap my-reel 1.5,4,9,..., einen Zeitpunkt pro Szene. Öffne die Kontaktabzüge und schau sie dir tatsächlich an. Ein leerer Frame bedeutet einen JS-Fehler oder eine nicht registrierte Zeitleiste.
2. kinetix check my-reel sampelt alle ½ s und muss mit 0 Fehlern enden.
   • Behebe echte Befunde: Text, der über seine Box läuft, Überlappungen, verborgener Text, Kontrast.
   • Markiere nur beabsichtigte Schichtungen, niemals echte Probleme: data-layout-allow-overlap für einen Stempel über einem Dokument, data-layout-allow-occlusion für Text, der absichtlich auf einem Sprite liegt, data-layout-allow-overflow für einen beschnittenen Screenshot in einem Rahmen, data-layout-ignore für einen dekorativen Hintergrund oder riesiges ausgeblendetes Emoji.
   • Bevor du behauptest, eine „Behebung“ sei sichtbar gewesen, vergleiche die Vorher- und Nachher-Frames. Manche Befunde sind Fehlalarme des Checkers.

7. Effekte und Render

kinetix fx leak --hue 200 -o overlays/leak-cyan.mov        # hue: 0 amber, 70 pink, 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

• Leaks: leak-*-Dateien werden als Licht eingeblendet, sodass Text lesbar bleibt. Starte einen Leak etwa 0,4 s vor einem Drop, damit er darauf seinen Höhepunkt erreicht, und lass keinen Höhepunkt auf einem Logo-Slam liegen.
• Stinger: starte etwa 0,3 s vor einem Schnitt, damit das Panel ihn abdeckt.
• Poster: --poster bäckt den besten stehenden Frame als Frame 0 ein, der das Thumbnail auf X, YouTube, Slack und Discord ist. Wähle eine Logo-Karte oder den besten Moment, niemals einen Frame in der Mitte einer Animation oder bei einem Blitz.
• Abschließende Prüfung: Ziehe Frames aus dem finalen mp4 (Frame 0, jeder Overlay-Höhepunkt, jede Footage-Szene) und schau sie dir an.

Fallstricke (alle sind real vorgekommen)

• Die Bridge gibt { timeline } zurück, nicht die Timeline. Eine GSAP-Timeline ist ein Thenable, sodass die nackte Rückgabe aus einer asynchronen Funktion für immer hängt und jeder Frame leer rendert.
• Hervorhebungsboxen bei Display-Schriften benötigen line-height: 1.12 (bereits in kinetix.css), sonst ragen Glyphen heraus und check meldet text_box_overflow.
• Footage muss <video muted data-start data-duration [data-media-start]> in einem nicht zeitgesteuerten Wrapper sein, niemals als JPG-Sequenzen. Animiere den Wrapper, nicht das Video.
• Bildwechsel (Bildschirm A → B) verwenden KinetixBridge.stackSet(img, src), das die Varianten vordekodiert. Das Setzen von src zur Renderzeit erfasst undekodierte Frames.
• Jede benannte Schriftart benötigt @font-face. Für die System-Emoji-Schriftart deklariere src: local("Noto Color Emoji").
• MusicGen-Beds: librootas beat_track liest Phonk- und Club-Tempos falsch (es nannte 150 bpm „121“ und „199“), weshalb hypebeat Onset-Autokorrelation verwendet und die Dehnung auf ±12% begrenzt. musicgen-medium benötigt ~8 GB freien RAM zum Laden; small ist die Standardeinstellung.
• Untertitel: Das Zusammenfassen aller Zeilen in einem createTikTokStyleCaptions-Aufruf führt dazu, dass das letzte Wort einer Zeile mit der nächsten verschmilzt, daher Seite pro Zeile (die Laufzeit macht das).
• Remotion: Rendere mit --gl=swangle (Software GL funktioniert überall) und als ProRes 4444 mit Alpha. ffmpegs VP9-Decoder verwirft Alpha.
• Lizenzen:
  • MusicGen-Ausgabe ist CC-BY-NC, geeignet für Demos und persönliche Kanäle, nicht für bezahlte Arbeit.
  • Remotion ist kostenlos für Einzelpersonen und Unternehmen mit bis zu 3 Personen.
  • Gebündelte SFX sind CC0.

Übergabe

Teile dem Benutzer mit:

• wo die mp4 ist
• was darin ist, als kurze Beat-für-Beat-Liste
• was du verifiziert hast und wie (Kontaktabzüge, Check-Ergebnis, Lautstärke)
• welche Zahlen- oder Behauptungsentscheidungen du getroffen hast
• was du nicht verifizieren konntest (du kannst es nicht hören; bitte ihn, zuzuhören)

Biete an, zu posten, aber poste nicht ohne ein Ja.