every-app/video-skills

Teaser-Video

Ein Teaser zeigt eine Funktion in wenigen Sequenzen, jede mit einem klaren Fokus, untermalt von Musik. Jeder Bildschirm ist ein echter Screenshot des Produkts; die Bewegung entsteht durch die Kamera, durch aus den Screenshots ausgeschnittene Zeilen, die an ihren eigenen Platz fallen, und durch Schnitte, die auf die Musik fallen. Das gesamte Video ist Code (eine HTML-Seite und eine Timing-Tabelle, gerendert von HyperFrames), sodass ein neuer Screenshot, eine geänderte Bildunterschrift oder ein anderer Musikclip einfach durch erneutes Ausführen entsteht.

Der Anwender steuert den Geschmack und wird mehrere Iterationen durchlaufen. Zeige Kontaktbögen vor Vollrendern, behalte jeden Render und notiere, was geändert wurde und warum. Beginne mit den Standardwerten in references/taste.md: Sie sind das, worauf sich die erste Runde der Überprüfungen geeinigt hat.

Einrichtung

• Node 22+ mit npx (HyperFrames läuft über npx [email protected], nichts zu installieren), ffmpeg im PATH (HyperFrames benötigt es auch für Snapshots und Render), uv (die Python-Tools deklarieren ihre eigenen Abhängigkeiten) und Playwright mit Chromium im Projekt des Produkts für Aufnahmen. Render laden GSAP und die Inter-Schriftart von einem CDN, daher benötigen sie eine Netzwerkverbindung.
• SK=<Verzeichnis dieses Skills>/scripts.
• Arbeite in einem Ordner außerhalb der versionierten Dateien eines Repositorys (einem gitignorierten .logs/<video>/ oder einem Scratch-Ordner):

<work>/
  assets/<theme>/    Aufnahmen und boxes.json, pro Aufnahmedurchlauf
  capture/           Die Aufnahmeskripte für dieses Produkt
  video/             index.html und timeline.js (kopiert aus dem Beispiel); assets/ enthält die Aufnahmen, Brand-Icon, Musik
  NOTES.md           Jede Version und warum sie geändert wurde, Wiederherstellungsbefehle

1. Briefing

Bestätige in einem kurzen Austausch mit Angebot von Standardwerten:

• Länge: 10 s, sofern nicht anders gewünscht. Unter einer harten Obergrenze, kürze Sequenzen, beschleunige niemals Bewegungen.
• Die Sequenzen: drei oder vier, jede eine Aufgabe auf einem Bildschirm (URL eingeben, Ergebnisse überprüfen, Ergebnis sehen, Marke). Jede Sequenz erhält eine Bildunterschrift von zwei oder drei Wörtern, ohne Zahlen.
• Beispieldaten, die auf einen Blick lesbar sind: eine bekannte Website, sodass die Ergebnisse (Namen von Wettbewerbern, Favicons) erkennbar sind.
• Look: Die eigenen Theme-Tokens des Produkts (Dark Mode ist ein guter Standard für einen Teaser) und das echte Marken-Icon, entnommen von der Live-Website, nicht ein selbst gezeichnetes Zeichen.
• Musik: die Datei, und ob jede 10 s ausreichen (siehe Schritt 5).
• Welcher Branch oder Worktree die neueste UI für jeden Bildschirm hat. Überprüfe vor der Aufnahme, ob er hinter dem Remote-Branch liegt.

2. Aufnahme

Echte Screenshots bei 1440x900, 2x, mit $SK/capture.mjs (derselbe Helfer wie bei narrated-video): Tipp-Frames für alles Getippte, hohe Aufnahmen (2400 px) für alles, bei dem die Kamera nach unten schwenkt, gemessene Boxen für jedes Element, das eine Szene einrahmt, Zeilen ausschneidet oder anklickt. Übergib { colorScheme: 'dark' } an cap.page() für den Dark Mode. Zeichne niemals UI oder bearbeite Pixel. Details, einschließlich eingefrorener Animationsframes und der Aufnahme eines Ladezustands ohne die Anfrage zu bezahlen: references/capture.md. Überprüfe jede Aufnahme, bevor du sie verwendest.

3. Komponieren

Kopiere examples/openseo-ai-visibility/video (index.html, timeline.js) in den Arbeitsordner, lege die Aufnahmen, das Marken-Icon und die Musik in video/assets/ ab und schreibe timeline.js um: die Timing-Tabelle, Bildunterschriften, Palette, Aufnahmepfade und -höhen, die gemessenen Boxen, die Kameraeinstellungen jeder Szene und den Zeiger. index.html baut jede Szene aus dieser Datei auf: Zeilen werden aus ihrer Aufnahme mit den gemessenen Boxen ausgeschnitten. Wie die Teile funktionieren und welche Zahlen wichtig sind: references/composition.md.

4. Entwurf und Ansicht

cd video
npx --yes [email protected] lint                                           # muss 0 Fehler melden
npx --yes [email protected] snapshot --at 0,1.2,2.4,2.6,3.4,4.4,6.0,8.2,9.5 --no-end   # in snapshots/

Snapshots dauern Sekunden, verwende sie daher anstelle von Entwurfsrendern. Erstelle Snapshots von jedem Szenenstart, Klick, Bildunterschriftseintrag und der Mitte jeder Überblendung und überprüfe sie (jeder Durchlauf schreibt auch Kontaktbögen): ein Fokus pro Frame und zentriert, die Bildunterschrift frei von dem fokussierten Objekt, keine leere Seitenkante, während die Seite flach ist, keine noch fehlende Zeile am Ende einer Enthüllung. Überprüfe dann einen Frame in voller Auflösung jeder Szene auf scharfen Text.

5. Musik

uv run $SK/beats.py song.mp3                     # Tempo, Lautstärke pro Sekunde, jeder Beat
uv run $SK/beats.py song.mp3 --window 51.9 10    # Beats eines Kandidatenclips in Videospielzeit

Wähle den Clip aus, schreibe seinen Start in das <audio>-Element in index.html und seine Beat-Zeiten in die Timing-Tabelle und verschiebe die Schnitte darauf: den Hauptklick auf den Drop, jeden Szenenwechsel auf einen Beat, das Logo auf den stärksten Beat. Clip auswählen und zuordnen: references/music-sync.md.

6. Rendern und überprüfen

npx --yes [email protected] render -o renders/<video>-vN.mp4 --fps 60 --crf 14 \
  --video-frame-format png --experimental-fast-capture=false            # etwa 15 s für 10 s Video
uv run $SK/verify-sync.py renders/<video>-vN.mp4 <geplante Beat-Zeiten...>   # jeder Beat innerhalb eines Frames; beendet mit 1, wenn nicht
uv run $SK/sheet.py renders/<video>-vN.mp4 renders/sheet-vN.png <Zeiten...>

Benenne Render nach Version und behalte alle; der Anwender vergleicht. Ein Standbild zum Teilen (ein Social-Image, ein Thumbnail) ist ein 4K-Snapshot eines gewählten Moments: npx --yes [email protected] snapshot --at 7.3 --no-end --zoom 0,0,1920,1080 --zoom-scale 2 -o stills schreibt ein 3840x2160 PNG.

7. Überprüfen und iterieren

Gib den mp4-Pfad (und wie man ihn öffnet), die Sequenzen und ihre Zeiten sowie alles, was von der Anfrage abweicht. Notiere jede Runde in NOTES.md. Die erste Version des durchgearbeiteten Beispiels benötigte sieben Runden; was sich in jeder geändert hat, steht in examples/openseo-ai-visibility/NOTES.md.

Harte Regeln

• Nur echte Screenshots. Eine Zeilenenthüllung kann kurzzeitig Zeilen mit dem eigenen Hintergrund der Tabelle (aus der Aufnahme entnommen) überdecken, während die echten Zeilen oben landen; sobald sie gelandet sind, ist der Frame die Aufnahme.
• Überprüfe Aufnahmen auf Geheimnisse und personenbezogene Daten (Schlüssel, E-Mails, Namen anderer Personen, localhost-URLs) vor dem Rendern.
• Die Musik und die Aufnahmen bleiben auf dem Rechner des Anwenders; veröffentliche nichts ohne Aufforderung.
• Stelle alle versionierten Dateien, die das Erstellen oder Vorschauen des Produkts in seinem Repository neu generiert, wieder her.

Die Fehler, die am meisten Zeit kosten, stehen in references/gotchas.md.