Portfolio-Reel

Portfolio-Reel (Template: „skill 2“)

Dieser Skill erstellt aus einer einzigen Konfigurationsdatei promo.json ein fertiges ~30 s langes Intro-Reel. Eine Canvas-Szene zeichnet jedes Bild in einem Headless-Chrome und spielt die Clips des Benutzers in den Karten ab. Es gibt kein Stockmaterial, kein KI-Video und keinen Vorlagendienst. Der Aufbau folgt dem Timing des Referenz-Reels skill2.MP4 (ein TikTok-Creator-Intro). Es werden nur die Techniken kopiert, niemals dessen Filmmaterial, Wortlaute, Namen, Handles oder Wasserzeichen.

Zeit (3 Abschnitte)	Szene
0–2,3 s	Senfgelber Farbverlauf, zwei große weiche Kreise gleiten herein; hook[0] tippt Buchstabe für Buchstabe, dann erscheint hook[1] groß und fett
2,3–2,9 s	Ein weißer Kreis wischt von unten nach oben; der Avatar erscheint als kleine gelbe Scheibe
2,9–6,4 s	Profilheld auf Weiß: Der Avatar wächst zu einem großen Kreis (mit gelbem Ring oder gelbem Duotone), dann die umrandete badge-Pille mit einem Stern, hello Wort für Wort, roles getrennt durch dünne Balken und eine schwarze button-Pille mit ↑ in einem weißen Kreis. Der Pfeil schießt nach oben und die Seite scrollt
6,4–20,5 s	Eine Seite pro Abschnitt (je 4,6 s) auf hellem Grau mit weichen Fensterlicht-Schatten: ein Verlaufstitel, dann 1–3 abgerundete Karten, die dem Scrollen folgen und schweben. Videos laufen, Bilder zoomen langsam. Porträtkarten stehen hoch, Landschaftskarten breit, gemischte Reihen staffeln
20,5–24,4 s	Ein gelbes Licht strahlt von links unten zurück zum Farbverlauf; cta[0], dann cta[1], Wort für Wort
24,4–30,3 s	Eine schwarze Profilkarte erscheint aus einem Punkt (Avatar oder logo, handle, name, bis zu 3 zählende stats, zwei Schaltflächen). Ein Cursor klickt die erste Schaltfläche, die grau wird und clicked anzeigt, dann dreht sich die Karte in 3D auf ihre back-Seite

Die Länge beträgt etwa 30 s mit 3 Abschnitten, je nach Abschnitt 4,6 s mehr oder weniger und etwas länger bei langen Texten.

Zwei UIs: "ui": "classic" (Standard) oder "app"

app behält denselben Zeitplan und dieselben Texte bei, aber jede Szene ist ein moderner App-Bildschirm auf einem sich bewegenden Mesh-Verlauf:

Zeit	app-Szene
hook	Eine Glas-Suchleiste tippt hook[0] hook[1]; ein Dropdown mit Ergebnissen listet die Person (Avatar, Name, Rollen) und die ersten beiden Abschnitte auf; der Cursor klickt auf die Person
hero	Das angeklickte Ergebnis wächst zu einem Bento-Dashboard aus Glas-Kacheln: eine große Foto-Kachel (Name und Handle), die Begrüßungskachel (Badge, hello mit dem Textmarker, Rollen-Chips), eine Statistik-Kachel mit den profile.stats, eine button-Kachel, auf die der Cursor klickt, und eine Kachel, die die Abschnitte auflistet
sections	Ein horizontales Karussell, eine Folie pro Abschnitt: eine große Zahl, der Titel, „n Arbeiten“, ein Fortschrittsbalken oben. Arbeiten werden in Geräte-Mockups angezeigt: Landschafts-Clips in einem Browserfenster (Ampeln, Adressleiste site/abschnittstitel), Porträt-Clips in einem Telefon, die auf der rechten Seite kaskadieren
cta	Ein Chat-Bildschirm: tippende Punkte, dann kommen cta[0] und cta[1] als Nachrichtenblasen von der Person an (die letzte in der Akzentfarbe)
card	Eine Profilkarte mit einem Verlauf-Cover-Banner, überlappendem Avatar, Handle, Name, zählenden Statistiken und zwei Pillen-Schaltflächen; der Cursor klickt „Folgen“ (Konfetti), dann dreht sie sich zu einem QR-Code von profile.qr / profile.back (erstellt mit qrencode – falls installiert), mit der Adresse darunter

site (optional) legt die Adresse fest, die in den Browser-Mockups angezeigt wird, standardmäßig profile.back. Jeder Stil und jeder Effekt funktioniert in beiden UIs (in app werden orbit und ticker nicht verwendet).

Stile und Effekte

"style" wählt ein Farbthema. Dunkle Stile erhalten dunkle Seiten mit einem feinen Raster und leuchtenden Karten anstelle von Fensterschatten.

Stil	Look
mustard (Standard)	Die Vorlage: Senfgelber Verlauf, weißer Held, hellgraue Seiten, schwarze Pille, blaue Schaltflächen
midnight	Indigo bis Schwarz, Neon-Cyan und -Violett, dunkle Seiten, leuchtende Karten
sunset	Pfirsich bis Rosa, warmweiße Seiten, Korallentitel und -schaltflächen
amber	Gold auf Fast-Schwarz (ein Entwickler- oder Portfolio-Look), dunkle Seiten, Bernsteinfarbene Pille und Schaltflächen
mint	Minze bis Teal, weiße Seiten, grüne Titel

"colors" überschreibt eine einzelne Farbe des Stils.

Alle Effekte sind standardmäßig aktiviert. Schalte einen mit "effects": {"ticker": false} aus, oder alle mit "effects": false für den schlichten Vorlagen-Look:

Effekt	Was er tut
bokeh	Weiche Lichtpartikel steigen auf den Verlaufsszenen auf
shine	Ein Lichtschweif über der großen Frage, der Schaltfläche und der Profilkarte, plus Echo-Ringe auf dem Kreis-Wipe und ein Pulsring auf der Schaltfläche
marker	Ein Textmarker wischt unter dem Namen (text.highlight wählt die Wörter oder alles nach dem zweiten Wort)
orbit	Ein gestrichelter Ring mit drei Punkten dreht sich um den Avatar
blur	Vertikale Bewegungsunschärfe beim Scrollen der Seite
labels	„01 / 03“ über jedem Abschnittstitel und einem Unterstrich, der sich einzeichnet
glare	Eine diagonale Blendung überquert jede Arbeitskarte, nachdem sie gelandet ist
ticker	Große umrandete Tags scrollen hinter den Schlusszeilen (text.tags, ansonsten die Rollen und Abschnittstitel)
confetti	Ein Konfetti-Ausbruch in den Farben des Stils, wenn die Schaltfläche geklickt wird
grain	Filmkorn und eine sanfte Vignette über allem

Damit der Benutzer wählen kann, rendere dieselben 4 Momente in jedem Stil (ein „Style-Board“) vor dem vollständigen Render. Verwende render.mjs --times auf Kopien von promo.json, die sich nur im style unterscheiden.

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

Workflow

1. Sammeln, was der Reel braucht

• Avatar: ein Porträtfoto, Gesicht und Schultern. Gib crop: [x, y, size] (Pixel) an, damit das Gesicht im Kreis sitzt, und überprüfe die Vorschau. Bei einem unruhigen oder hellen Hintergrund erzeugt "avatarStyle": "duotone" eine dunkle Figur auf Gelb, wie in der Vorlage.
• Abschnitte (1–4): jeweils ein kurzer Titel (2–4 Wörter) und 1–3 Clips: Videos ({"file", "at"}, 5,5 s ab at werden in der Karte abgespielt) oder Bilder. Verwende die besten Arbeiten des Benutzers und mische Hoch- und Querformat für Abwechslung.
• Texte: Halte sie kurz.
  • hook: eine kleine Zeile und eine große 1–2 Wort-Frage.
  • badge: ein Slogan von bis zu etwa 50 Zeichen.
  • hello: „Hello, I'm …“.
  • roles: 2–4 kurze Rollen.
  • button: das Schaltflächen-Label.
  • cta: zwei Schlusszeilen.
• Profilkarte: handle, name, bis zu 3 stats, buttons, clicked und back. Verwende ausschließlich echte Zahlen (vom Benutzer, seiner Website oder seinem Profil). Ein String-Wert (wie "2023") wird ohne Zählen angezeigt.
• Sprache: Für Khmer setze "lang": "km" und schreibe natürliches Khmer. Kantumruy Pro ist enthalten.
• Optional: style, effects, logo (innerhalb des Kreises der Karte), colors, text.highlight, text.tags, music (+ musicStart), sfxDir.

2. Projekt schreiben

Erstelle einen Projektordner und kopiere examples/creator-reel.json als promo.json hinein, bearbeite es dann. Jeder Schlüssel ist in references/config.md beschrieben. Pfade sind relativ zum Projektordner.

3. Vorschau (etwa 10 s)

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

Dies schneidet die Clips und rendert etwa 13 Standbilder nach out/<name>-preview.png. Lies es und überprüfe:

• den Avatar-Beschnitt;
• dass keine Zeile gequetscht ist (lange Texte werden verkleinert);
• dass die Karten jedes Abschnitts gute Frames zeigen: ändere at;
• die Zahlen der Profilkarte.

4. Rendern (etwa 2 Minuten; im Hintergrund ausführen)

<skill>/scripts/promo.sh <project>/promo.json --jobs 4

Die Phasen laufen in dieser Reihenfolge: assets, plan, render, mix, encode. --from mix mischt den Ton neu, ohne die Frames erneut zu rendern.

Ausgabe: out/<name>-1080p60.mp4 und out/<name>-contact.png.

5. Vor der Übergabe prüfen

• Lies das Kontaktblatt.
• ffprobe sollte die Länge anzeigen, die build/cues.json angibt. Der Mix ist auf -14 LUFS / -1 dBTP normalisiert.
• Du kannst das Ergebnis nicht hören, also sag dem Benutzer, was du geprüft hast, und bitte ihn, zuzuhören.

Feinabstimmung

• Timing: plan() in scripts/scene.mjs. SEC ist die Länge eines Abschnitts und SCROLL die Länge eines Seiten-Scrolls. Die Cues in buildCues() folgen automatisch.
• Look:
  • Themes sind STYLES und Effekte sind EFFECTS in scene.mjs; Farben können auch von colors kommen.
  • Das Karten-Layout ist layout().
  • Die Fensterschatten sind buildShade().
  • Der Flip ist drawFlip(), Streifen mit Perspektive.
• Sound: SFX in scripts/audio.py listet die Dateinamen auf, die in sfxDir versucht werden. make_bed() ist der Lo-Fi-Beat.