SaaS-Promo

SaaS-Promo (Vorlage: „Skill 1“)

Dieses Skill erstellt aus einer Konfigurationsdatei, promo.json, ein fertiges Promo-Video: die klassische ~11 s Kurzversion oder eine ~50 s Langversion, wenn promo.json chapters enthält. Eine Canvas-Szene zeichnet jedes Einzelbild im Headless-Chrome. Es gibt kein Stockmaterial, KI-Video oder Vorlagendienst:

• Bild: Eigene Screenshots, App-UI, Designs oder Videostills des Benutzers. Integrierte UI-Karten füllen eventuelle Lücken.
• Wörter: Eigene Texte des Benutzers.
• Ton: Ein Effekt bei jedem Cue, plus ein originaler Synthesizer-Bett oder der eigene Track des Benutzers.

Die Struktur ist fest und folgt dem Tempo des Referenzreels skill 1 .MP4 (ein TikTok-SaaS-Agentur-Reel). Nur die Techniken werden kopiert, niemals das Filmmaterial, die Wörter, das Branding oder der Wasserzeichen.

Zeit	Szene
0-0,5 s	Große Glyphen (# < @ ! ?) blitzen in der Mitte auf; purpurne und limettengrüne Neon-Balken und 4-zackige Glitzer blitzen auf einem gedimmten Punkt-Matrix-Glyphenfeld auf.
0,5-3,3 s	text.typed wird mit einem Cursor eingetippt; 26 Karten fliegen von weit herbei und umkreisen das Wort als 3D-Ring (zuerst Halbtonpunkte, dann das echte Bild); der Ring beschleunigt, rauscht an der Kamera vorbei und verschwimmt.
3,3-6,45 s	Eine gemalte Wiese mit Wolken, Vögeln und Schmetterlingen, pastellfarben und dann gesättigt; drei Karten gleiten von rechts herein, die restlichen fliegen in eine 12-Karten-Bento-Wand. bento[0] tippt auf der Heldenkarte, bento[1] tippt vertikal auf einer hohen Glaskarte, zwei Karten tauschen die Bilder, und bento[2] tippt auf einer weißen Karte. Die Kamera zoomt dann in diese Karte.
6,45-~8,8 s	Dunkles Punkt-Wellen-Feld; eine leuchtende, verlaufende Kugel erscheint und gleitet nach links; headline erscheint Wort für Wort (unscharf zu scharf), dann wischt sub herein; alles wird unscharf.
~8,8-11,1 s	Glitch (farbverschoben, zerschnitten) in den Helden: eine Langzeitbelichtungs-Blau/Weiß-Blume auf einem blau-orangen Himmel, fliegende ! @ # $ % * Symbole und digitaler Regen. from wird unscharf ein- und ausgeblendet, dann landet to mit einem Knall und das optionale Logo erscheint darunter. Es endet mit einem Schwarzfade.

Die Länge beträgt etwa 11,1 s. Sie verlängert sich geringfügig mit einer langen Überschrift, da die Unterzeile immer etwa 0,85 s auf dem Bildschirm hat.

Lange Schnittfassung (~50 s): chapters

Füge "chapters" hinzu (eines pro Produkt, Projekt oder Thema) und dieselben vier Szenen wiederholen sich als Beats von jeweils 1,5 Takten, wobei das Finale 2 Takte dauert:

Beats	Was läuft
Intro	Öffnen (typed + Wirbel aus allem) → Wand (alle Bilder, bento) → Kugel (headline / sub)
jedes Kapitel	Öffnen (das typed des Kapitels, seine Bilder im Wirbel; ohne typed übersprungen) → Wand (zuerst seine Bilder, sein bento, sein wall Look) → Kugel (seine headline / sub / orb Farben)
Ende	Finale (from / to / url / Logo), 2 Takte

Vier Kapitel mit drei getippten Openings ergeben 23 Takte, was bei 109 BPM ~50 s entspricht.

• Bilder: Versehe jedes mit "tag", um es seinem Kapitel zuzuordnen.
• Wand-Looks: "meadow" (Tag), "dusk" (Sonnenuntergang) oder "dark" (das Punkt-Wellen-Feld mit Leuchten in den Kugelfarben des Kapitels). Das Abwechseln hält die Kapitel voneinander getrennt.
• Musiksynchronisation:
  • Mit music misst assets.py das Tempo des Songs und seinen Drop (den größten Energieanstieg, eingerastet auf eine Kickdrum). Das Video startet so, dass der erste Schnitt nach dem Intro-Wirbel auf den Drop fällt, und jeder weitere Schnitt auf dem Taktgitter liegt.
  • Überprüfe die gedruckte Zeile music: … bpm, drop at … s. Wenn sie falsch ist, gib selbst bpm und musicDrop (Song-Sekunden) an.
  • Verwende sfxLevel (z. B. -4), um die Effekte unter den Song zu legen.
• Urheberrecht: Ein kommerzieller Song kann dazu führen, dass das Video bei der Veröffentlichung stummgeschaltet oder mit Anspruch belegt wird. Erwähne dies und schlage für öffentliche Beiträge die eigene Soundbibliothek der Plattform vor.

Voraussetzungen: ffmpeg, Node 22+, Google Chrome oder Chromium (CHROME_PATH), und ein Python mit numpy und scipy (PROMO_PY; promo.sh findet eines selbstständig).

Workflow

1. Sammle, was das Promo benötigt

• Karten (8-20 Bilder): Screenshots des Produkts, der Website, der App oder des Dashboards; Designarbeiten; oder Stills aus den Videos des Benutzers. Bilder und Videos funktionieren beide. Ein Video liefert ein Standbild zu "at" Sekunden oder bei 30 % seiner Länge. Querformat-Bilder gehen in die breiten Slots, Hochformat-Bilder in die hohen Slots. Bei weniger als 8 Karten füllen integrierte UI-Karten den Rest (Suchleiste, Formular, Diagramm, Farbverlaufskugel, Pille usw., beschriftet mit text.labels). Sieh dir die Bilder zuerst an und entferne solche, die größtenteils leer sind.
• Texte: Halte sie kurz, da die Szene sie mit fester Geschwindigkeit tippt und einblendet.
  • typed: Ein Wort oder Name mit Satzzeichen, etwa 4-8 Buchstaben („SaaS.“, „KumNit.“).
  • bento: Drei kurze Phrasen (1, 2-4 und 2-3 Wörter).
  • headline: 5-8 Wörter. sub: Eine Zeile mit bis zu etwa 90 Zeichen.
  • from / to: Das abschließende „Von … / Bis …“ Paar.
  • Für Khmer ("lang": "km"), schreibe natürliches Khmer. Setze ein Leerzeichen zwischen die Teile von headline, from und to, die nacheinander erscheinen sollen. Kantumruy Pro ist enthalten.
• Optional:
  • logo: Wird unter der letzten Zeile angezeigt. Ein undurchsichtiges Logo wird zu einem runden App-Symbol.
  • text.url: Eine Website-Zeile auf der Endkarte.
  • hero: Ein eigenes Finalbild des Benutzers anstelle der Blume.
  • backdrop: Ein Bild anstelle der gemalten Wiese.
  • music: Ein eigener Track. In der langen Version fällt sein Drop auf den ersten Schnitt; setze musicStart zum Überschreiben.
  • chapters: Die ~50 s Langversion, mit tag, typed, bento, headline, sub, wall und orb jedes Kapitels.
  • sfxDir: Ein Ordner mit eigenen Soundeffekten.
  • colors: Markenfarben für das Neon, die Kugel, den Himmel und die Symbole.

2. Schreibe das Projekt

Erstelle einen Projektordner und kopiere examples/kumnit-saas.json (oder -km.json) als promo.json hinein, dann bearbeite es. Jeder Schlüssel ist in references/config.md beschrieben. Pfade sind relativ zum Projektordner.

3. Vorschau (ca. 10 s)

<skill>/scripts/promo.sh <project>/promo.json --preview

Dies bereitet die Bilder vor (und misst die Musik) und rendert 12 Standbilder (eines pro Beat in der Langversion) nach out/<name>-preview.png. Lies es und überprüfe:

• Das getippte Wort ist frei von den Karten.
• Kein Text ist gequetscht: Lange Texte werden verkleinert, um hineinzupassen, aber sie lesen sich schlechter.
• Die Heldenkarte (groß, links) zeigt ein gutes Bild: Sie nimmt das erste Querformat-Bild in cards.
• Der Finaltext ist über der Blume oder dem Helden lesbar.

4. Rendern (unter einer Minute; ca. 4 Minuten für die Langversion, also führe diese im Hintergrund aus)

<skill>/scripts/promo.sh <project>/promo.json

Die Phasen laufen in dieser Reihenfolge: Assets, Plan (Timeline und Sound-Cues aus der Szene), Render (3 Chrome-Renderer, --jobs N), Mix, Encodieren.

• --from mix mischt den Ton neu und encodiert neu, ohne die Frames erneut zu rendern.
• --from render zeichnet das Bild neu.

Ausgabe: out/<name>-1080p60.mp4 und out/<name>-contact.png (etwa 30 Frames über das Video verteilt).

5. Überprüfung vor der Übergabe

• Lies das Kontaktblatt.
• ffprobe sollte etwa 11,1 s (klassisch) oder die Gesamtzahl der Beats (lang; build/cues.json listet jeden Beat) anzeigen. Der Mix ist auf -14 LUFS / -1 dBTP normalisiert: Messe mit ffmpeg -i out.mp4 -af ebur128 -f null -.
• Die Mix-Phase gibt aus, wie viele Effekte aus sfxDir kamen und wie viele synthetisiert wurden.
• Du kannst das Ergebnis nicht hören, also teile dem Benutzer mit, was du überprüft hast, und bitte ihn, zuzuhören. Die Intro-Klicks und der Wiesen-Impact sind die lautesten Momente.

Feinabstimmung

• Timing:
  • plan() am Anfang von scripts/scene.mjs enthält die klassischen Szenenzeiten.
  • beatSpecs() legt die Beats fest: mapT() verschiebt und dehnt diese Zeiten in jeden Beat.
  • Die Sound-Cues in cuesFor() folgen automatisch, da audio.py sie aus build/cues.json liest.
• Look:
  • Farben kommen von colors.
  • Das Bento-Layout ist die SLOTS Tabelle in scene.mjs.
  • Die Wiese, Blume und Kugel werden in buildMeadow, drawFlower und drawOrb gezeichnet.
• Sound: Die Dateinamen, die in sfxDir versucht werden, sind die SFX Tabelle in scripts/audio.py, mit Varianten pro Cue. Die Akkorde und Abschnitte des Bettes befinden sich in make_bed().
• Größe: Nur 1920×1080, wie in der Vorlage. Eine vertikale 9:16 Version würde eigene Layouts benötigen.