KasunJayasanka/product-motion-video

Produkt-Bewegtbildvideo (60s)

0. Eingaben (nur nach Fehlendem fragen, eine Nachricht, max. 3 Fragen)

• THEMA: Produkt/Idee (erforderlich)
• MARKE: URL oder md-Datei (optional) -> extrahiere Name, Slogan, 3 Vorteile, Farben, Ton. Max. ein web_fetch.
• STIL-REF: optional; leite 3 Merkmale (Tempo, Art, Palette) in einer Zeile ab. Keine tiefgehende Recherche. Wenn der Benutzer {Platzhalter} nicht ausgefüllt hat, behandele sie als leer, nenne Annahmen in einem Satz und baue.

1. Plan (<=15 Zeilen Denken, keine Aufsätze)

Palette (Hintergrund, Schrift, 1 Akzent, 1 Sekundärfarbe), 1 Auszeichnungsschrift + 1 Grundschrift (System/Google Fonts mit Fallback), 8 Szenen.

Standard-60s-Struktur (Sekunden):

1. 0-5 Hook: kinetische Typografie, eine kühne Behauptung
2. 5-13 Problem: Glitch/Spannung, Zähler
3. 13-21 Enthüllung: Logo/Produkt morph ein
4. 21-31 Funktion 1-3: UI-Karten, Icons-Pops, gestaffelt
5. 31-41 Beweis: animierte Chart/Zahlen-Hochzählungen
6. 41-49 Ablauf/Wie-es-funktioniert: Linien-Pfad + Knoten
7. 49-56 Montage: schnelle Schnitte, 0,4s-Beat, Laufschrift
8. 56-60 CTA: Logo, Slogan, URL, Puls

2. Bau (eine .html-Datei, Vanilla JS, null Abhängigkeiten, <=18KB)

Architektur, halte es winzig:

• 1920x1080 Bühne per CSS-Transform skaliert, alle Farben als CSS-Variablen.
• Master-Zeitleiste: szenen=[{t0,t1,build(bühne), update(p)}] mit p in 0..1 von einer einzigen rAF-Uhr t=(now-start)/1000. Keine setTimeout-Ketten.
• Helfer (einmal schreiben, wiederverwenden): ease(p) (cubic/expo/back), lerp, clamp, stagger(i,n,p), type(el,text,p).
• Bewegungsvokabular (>=6 verwenden): kinetische Typografie, Masken-Enthüllungen, stroke-dashoffset Linienzeichnen, Hochzählungen, Parallax-Ebenen, gestaffelte Karten, Form-Morph (SVG-Pfad via gelertem d), Glitch (clip-path-Scheiben), Laufschrift, Kameraeinzug (scale+translate auf Bühne), Bildschirmwischer zwischen Szenen.
• Regeln: Szenenübergänge um 0,4s überlappen; jedes Element eased (niemals linear); max. 2 gleichzeitige Blickpunkte; wichtigen Text >=1,2s halten; nur transform/opacity animieren.
• Steuerung: play/pause (Leertaste), Suchleiste, Neustart, ?t=SEKUNDEN Such-Parameter, window.seek(t) für Export.
• Respektiere prefers-reduced-motion, indem die Glitch-Szene nicht automatisch abgespielt wird.
• Optionales Audio: WebAudio-synthetisierte Hits bei Szenenschnitten (standardmäßig aus, Stummschalt-Umschalter). Keine externen Audiodateien.

3. Liefern

• Veröffentliche über das Artifact-Tool (publish) als Seite; wenn kein Artifact-Tool vorhanden, erstelle_datei in /mnt/user-data/outputs + präsentiere_dateien.
• Antwort: 2 Sätze (was es ist, Annahmen). Keine szenenweise Erzählung.

4. MP4-Export (nur wenn der Benutzer danach fragt)

Playwright headless: für f in 0..1799 rufe seek(f/30) auf, screenshot 1920x1080 -> Frames; ffmpeg -framerate 30 -i f_%04d.png -c:v libx264 -pix_fmt yuv420p out.mp4. Wenn ffmpeg/playwright fehlt, sag es und gib dem Benutzer stattdessen dieses Rezept, ohne es erneut zu versuchen.

5. Token-Disziplin

• Lies keine anderen Skills, rendere keine Vorschau, verfeinere nicht, es sei denn, es wird darum gebeten.
• Verwende dieselben Karten-/Typografie-Layouts über Szenen hinweg; variiere Bewegung, nicht Markup.
• Schreibe die Datei in EINEM Tool-Aufruf. Bearbeite mit kleinen str_replace-Edits für Revisionen, schreibe nie neu.
• Begrenze Recherche auf 1 Fetch + 1 Search.