Standard-Erklärvideo
Ein ruhiges, hochwertiges Produktdemo, wie es ein gut finanziertes Startup auf seiner Homepage platziert. Sein ganzer Trick ist Zurückhaltung: ein heller, luftiger Canvas, eine kurze Textzeile nach der anderen, und die eigene Benutzeroberfläche des Produkts, die sauber nachgebaut und aus nächster Nähe gefilmt wird, während sie genutzt wird. Die Kamera erzählt die Geschichte: Sie fährt in eine Textzeile hinein, begleitet das Tippen, zoomt heraus, um das Ergebnis zu zeigen, und gleitet zur nächsten Funktion.
Du schreibst es als eine HTML-Seite, die jeden Frame aus einem Zeitwert rendert, und renderst sie dann mit Bewegungsunschärfe und Soundtrack in MP4.
Schritt 1: Das Briefing einholen (eine Nachricht, dann los)
Stelle alles in einer Nachricht, dann arbeite selbstständig. Nur das Produkt ist erforderlich; für alles, was leer bleibt, entscheide selbst und sag, was du gewählt hast.
- Produkt: Name und was es in ein paar Sätzen tut. Eine Website-URL ist noch besser.
- Das Eine, was der Betrachter sich merken muss (z.B. "gib eine Idee ein, erhalte eine Live-App").
- Marke: Farben, Schriftarten, Logodatei oder "die Website verwenden". Wenn keines angegeben, verwende die Standardpalette unten.
- Format: 16:9 (1920×1080) oder 9:16 (1080×1920). Standard 16:9.
- Länge: Standard ist unten für diesen Stil angegeben.
- Musik: eigener Track (ein Dateipfad) oder synthetisieren lassen. Standard: synthetisieren.
- Richtung (optional): gewünschte Szenen, ein Slogan, ein Call-to-Action, alles, um Fehlinterpretationen zu vermeiden.
Wenn sie eine URL angegeben haben, lies sie (Webabruf) für die tatsächlichen Formulierungen, Funktionen, Farben und Schriftartnamen des Produkts, bevor du etwas schreibst. Verwende ihre tatsächlichen Wörter für UI-Beschriftungen und Slogans.
Erfinde niemals Fakten. Keine erfundenen Kundenzahlen, Umsätze, Bewertungen, Testimonials oder Zitate. Zahlen nur, wenn der Benutzer oder die Website sie angibt; ansonsten verwende relative Balken, Fortschrittsbalken und Platzhalter-Skelettlinien. Beispielinhalte innerhalb der UI (ein Prompt, ein Dateiname, ein Projektname, Preise auf einer Quittung) sind in Ordnung und sollten glaubwürdig sein; Behauptungen über das Produkt selbst (Statistiken, Benutzerzahlen, Bewertungen, Angebote wie "kostenlos") nicht. Call-to-Actions verwenden nur eine URL oder ein Angebot des Benutzers oder der Website; wenn nichts angegeben, ende mit dem Namen und Slogan.
Logos. Verwende ein Logo nur, wenn der Benutzer die Datei liefert oder es ihr eigenes Produkt ist und sie danach gefragt haben. Ansonsten schreibe den Namen als Text in der Markenschriftart. Logos Dritter (Integrationen) nur, wenn bereitgestellt; ansonsten neutrale abgerundete Kacheln mit dem Namen.
Frage auch nach (optional): die 3–5 Funktionen oder Workflow-Schritte, die gezeigt werden sollen, und alles, womit das Produkt verbunden ist (Integrationen). Wenn sie eine URL angegeben haben, nimm diese von der Website.
Standardlänge für diesen Stil: 60 Sekunden. Bereich 45–90. Budgetiere nach Länge (zuerst optionale Abschnitte streichen):
| Länge | Funktionen | Optionale Abschnitte |
|---|---|---|
| 45 s | 2–3, etwa 9 s pro Stück | Beleg oder Integrationen, nicht beide |
| 60 s | 3–4, etwa 10 s pro Stück | eines von Beleg / Integrationen |
| 90 s | 4–5, etwa 12 s pro Stück | beide |
Schritt 2: Das Skript schreiben, dann bauen
Die Struktur
Schreibe zuerst das Skript und den Ablaufplan: jede Zeile Bildschirmtext, welcher UI-Moment ihr folgt, und ihre Zeit; addiere die Zeiten gegen das obige Budget. Bildschirmtext ist die einzige "Stimme", muss also die Geschichte allein erzählen.
Wie Szenen und Kamera zusammenpassen: jede Szene (eine Titelzeile, ein UI-Moment) ist ihre eigene Ebene mit eigener Kamera. Innerhalb einer Szene fährt die Kamera hinein, gleitet und zoomt zurück; zwischen den Szenen löst sich die abgehende Ebene mit einem kurzen Weichzeichner (0,3–0,4 s) in die nächste auf, die sich bereits bewegt.
- Eröffnung (0–5 s). Schlichter heller Canvas. Ein kleines Wort erscheint in der Mitte:
Introducing. Es löst sich in den Markenmoment auf: der sanfte Markenfarbverlauf gleitet herein (seidenartige diagonale Lichtbänder, die langsam wandern) mit dem Logo oder Namen zentriert, klein. - Das Problem oder die Aufforderung (≈5 s). Eine kurze Zeile, die der Betrachter wiedererkennt (
Erstellst du immer noch manuell Interessentenlisten?), oder gehe direkt zur Produkteingabe: ein großes abgerundetes Eingabefeld, leer mit Platzhaltertext, darunter Vorschlags-Chips. - Funktionskapitel (3–5, etwa 8–15 s pro Stück). Jedes ist:
- Eine Titelzeile: ein kurzer Satz, klein (etwa 28 px bei 1080p), zentriert auf dem schlichten Canvas. Er tippt oder erscheint Wort für Wort. Dann fährt die Kamera hinein auf die Zeile, bis sie etwa 75 % der Bildbreite einnimmt, und ein Schlüsselwort oder eine kurze Phrase wird hervorgehoben: ein sanfter Kasten in Markenfarbe, der von links nach rechts dahinter wischt (
Rufe den Entscheider an. Direkt.). - Der UI-Moment: die echte Benutzeroberfläche des Produkts, nachgebaut als saubere Vektor-UI (keine Screenshots), zugeschnitten auf den relevanten Teil und groß gezeigt. Die Kamera ist nah genug, dass das Element den größten Teil des Bildes ausfüllt, und begleitet die Aktion: Texteingabe in das Eingabefeld (die Kamera folgt dem Cursor; messe den Text mit
measureText, um zu wissen, wo er ist), die Schritte eines Agenten, die einer nach dem anderen abgehakt werden (Lade-Spinner → Häkchen,247 Treffer gefunden), Ergebnis-Karten, die sich stapeln, wobei die entfernten unscharf sind (Tiefenschärfe), eine Tabelle, die Zeile für Zeile gefüllt wird, der Cursor, der auf einen Zellen-Button klickt und der Wert erscheint, eine neue Spalte, die hinzugefügt wird, und jede Zelle "denkt" mit einem Schimmer, bevor ihr Wert erscheint, ein Popover, das sich mit Begründung und Quellen öffnet. - Der Rückzug: nach der Aktion schwenkt die Kamera sanft heraus, um den gesamten Bildschirm für einen Moment zu zeigen, damit der Betrachter versteht, wo er ist, und gleitet dann weiter.
- Eine Titelzeile: ein kurzer Satz, klein (etwa 28 px bei 1080p), zentriert auf dem schlichten Canvas. Er tippt oder erscheint Wort für Wort. Dann fährt die Kamera hinein auf die Zeile, bis sie etwa 75 % der Bildbreite einnimmt, und ein Schlüsselwort oder eine kurze Phrase wird hervorgehoben: ein sanfter Kasten in Markenfarbe, der von links nach rechts dahinter wischt (
- Beleg (optional, nur echte Zahlen). Ein Satz mit einer Zahl, die hochzählt, die Zahl hervorgehoben (
Unterstützt durch eine Datenbank mit 300 Mio.+ Profilen), über einer dezenten gepunkteten Erdkugel oder einem Raster. - Integrationen (optional).
Gebaut für deinen bestehenden Workflow.in der Mitte, während 8–12 App-Kacheln (abgerundete Quadrate, echte Logos nur, wenn bereitgestellt; wiederhole die Integrationen, wenn es wenige gibt) von den Rändern in unterschiedlichen Tiefen hereinschweben: nahe größer und leicht unscharf, ferne klein und scharf, alle mit Parallax-Effekt gleitend. Hier skaliert der Text von selbst anstatt eines Kamerazoom, damit die Kacheln im Bild bleiben. - Abschluss. Auf dem Markenfarbverlauf: ein Satz mit einem rotierenden hervorgehobenen Wort, das durch die Anwendungsfälle wechselt (
Erledige deine gesamte [Akquise / Recherche / Kontaktaufnahme] in Product.), dann, nur wenn das Produkt wirklich eine andere Nutzungsmöglichkeit hat (z.B.Oder frag einfach Claudefür ein Produkt mit einem Claude-Konnektor), dann der Slogan mit hervorgehobener Schlüsselphrase. - Endkarte (3 s). Logo oder Name auf dem Markenfarbverlauf, URL oder Call-to-Action klein darunter.
Regeln, die es hochwertig machen
- Eine Sache nach der anderen. Niemals mehr als eine Textzeile plus ein UI-Element auf dem Bildschirm. Text und UI teilen fast nie das Bild: Textszene, dann UI-Szene.
- Die Kamera ist der Editor. Keine harten Schnitte. Jeder Szenenwechsel ist eine Kamerabewegung (Hineinzoomen, Herauszoomen, Gleiten) oder ein sanfter Weichzeichner-Übergang auf dem schlichten Canvas. Kamerabewegungen sind sanfte Ease-Funktionen (
easeüber 0,6–1,2 s) oder stark gedämpfte Federn (z≥ 0,95); nichts springt. - Echte UI, sauber gemacht. Baue die Benutzeroberfläche des Produkts aus dem, was du darüber weißt (oder von seiner Website): sein tatsächliches Layout, Beschriftungen, Farben, Schriftarten und Eckenradien, vereinfacht auf das, was die Szene braucht. Der Inhalt darin sind glaubwürdige Beispieldaten, die zum Produkt passen. Sanfte Schatten, 1 px Ränder, großzügige Weißräume.
- Cursor: ein normaler macOS-Pfeil, der sich auf sanften Kurven bewegt, einen Schlag vor dem Klick ankommt, mit einem kleinen Druck-Dip und einer sanften Welle auf dem angeklickten Steuerelement. Hover-Zustände ändern sich.
- Schrift: die Schriftart der Marke, falls bekannt; ansonsten Inter oder Geist. Klein, normale Stärke für Titelzeilen (sie werden groß durch die Kamera, nicht durch die Schriftgröße). Enge Zeichenabstände bei großem Text.
- Standardpalette: Canvas
#F7F7F8, Text#111114, sekundär#8A8A94, UI-Oberflächen weiß mit#E7E7ECRändern, Marken-Akzent#2E6BFF, Hervorhebungsbox = Akzent mit 15–20 % Deckkraft. Markenfarbverlauf: weiß → heller Akzent → Akzent, als langsame diagonale Seidenbänder (zeichne sie auf einem Canvas, nicht mit CSS-Weichzeichner). Markenfarben ersetzen den Akzent. - Tempo: jede Titelzeile hält etwa 2 s nach ihrem Erscheinen; UI-Momente laufen in Echtgeschwindigkeit (Tippen mit etwa 25 Zeichen pro Sekunde), mit Pausen von 0,5 s nach jedem Ergebnis, damit der Betrachter es lesen kann.
- Verboten: belebte Hintergründe hinter UI, mehr als eine Akzentfarbe, springende Ease-Funktionen, Emojis, große Schlagschatten, Glassmorphismus überall, erfundene Metriken oder Testimonials.
Ton
Ein aufmunterndes, sanftes Bett mit 100–110 BPM (sanftes Klavier oder gezupfte Akkorde, leichte Perkussion, die nach der Eröffnung einsetzt, ein Aufhellen in den Abschluss), leise und warm. Soundeffekte klein: Tastenticks beim Tippen, sanfte Klicks, ein leichter "Tick" pro abgeschlossenem Schritt, ein sanftes Wischen bei großen Kamerabewegungen, ein sanfter Glockenspielton auf der Endkarte. Die Musik sollte im Hintergrund eines gut gemachten Produktvideos sitzen, nicht treibend sein.
Wie die Seite gebaut werden muss
Eine eigenständige HTML-Datei (Inline-CSS und JS; Bilder nur, wenn der Benutzer sie bereitgestellt hat). Zeichne mit DOM + CSS-Transformationen, SVG oder einem Vollbild-Canvas, was immer passt.
Der Seitenvertrag
window.VIDEO = {w, h, duration}undwindow.seek(t), eine reine Funktion der Zeit: sie setzt jedes Element für die Zeitt(Sekunden). Keine CSS-Übergänge oder -Animationen, keinsetTimeout, kein Zustand, der vom vorherigen Frame übernommen wird. Jeder Frame muss unabhängig in beliebiger Reihenfolge korrekt rendern. Layout-Messungen innerhalb vonseek(z.B.offsetLeft,measureText) sind in Ordnung; sie sind deterministisch.- Zufälligkeit (Körnung, Partikel, Rauschen im Audio) stammt von einem gesäten Generator, niemals
Math.random. - Alles, was eine Historie benötigt (eine Kamera, die einem sich bewegenden Objekt hinterherhinkt, eine Simulation) wird einmal beim Laden gebacken: schreite sie von 0 bis
durationin 1/240 s, speichere die Werte, undseekliest sie mit Interpolation zurück. Bei Schleifen starte die Simulation vom Zustand, in dem die Schleife beginnt (siehe die Nahtregel des Stils). - Schleifen:
seek(t)verwendett % duration; Effekte, die die Naht überspannen (eine Landestauchung, ein Sound-Ende) werden an beiden Enden gezeichnet oder gemischt. - Mit
?renderin der URL: keine Steuerelemente, keine Vorschau-Skalierung; die Bühne ist genauw × hoben links. Ohne: die Bühne wird mit CSS an das Fenster angepasst und die Vorschau-Steuerelemente werden angezeigt. - Schriftarten: einbetten. Lade die woff2-Dateien (Google Fonts oder die der Marke) herunter und binde sie als base64
@font-faceein, damit der Renderer niemals still auf eine Fallback-Schrift zurückfällt. Für eine Gewichtsmorphing verwende eine variable Schrift mit einem Bereich ([email protected]). - Ebenen: gib Szenenebenen transparente Hintergründe und lass einen Bühnenhintergrund dahinter die Basisfarbe bereitstellen, damit eine spätere Ebene niemals versehentlich eine frühere verdeckt. Absolut positionierter Text erhält
white-space: nowrap. - Geschwindigkeit: Große CSS
filter: blur()und große unscharfe Farbverläufe sind sehr langsam beim Screenshot. Zeichne Farbverläufe und Glüheffekte einmal beim Laden auf einem Canvas (oder als Bild) und bewege das.
Helfer: füge diese ein und baue alles darauf auf
// gedämpfte Feder-Sprungantwort 0 -> 1. w = Geschwindigkeit (8 langsam, 14 normal, 22 schnell), z = Dämpfung (1 = kein Überschwingen)
function spring(t, w = 14, z = 0.82) {
if (t <= 0) return 0;
if (z >= 1) return 1 - Math.exp(-w * t) * (1 + w * t);
const wd = w * Math.sqrt(1 - z * z);
return 1 - Math.exp(-z * w * t) * (Math.cos(wd * t) + (z * w / wd) * Math.sin(wd * t));
}
// ein Wert, der viele Male das Ziel wechselt, zu jedem hinspringend: track(start, [[time, value, w?, z?], ...]) -> f(t)
const track = (v0, keys) => t => { let v = v0, p = v0; for (const [tk, val, w, z] of keys) { v += (val - p) * spring(t - tk, w, z); p = val; } return v; };
// präzise Ease-Keyframes (am besten für Kamerabewegungen): kf([[t0, v0], [t1, v1, easeFn?], ...]) -> f(t)
const kf = keys => t => { if (t <= keys[0][0]) return keys[0][1]; for (let i = 1; i < keys.length; i++) { const [a, va] = keys[i - 1], [b, vb, e = ease] = keys[i]; if (t <= b) return lerp(va, vb, e((t - a) / (b - a))); } return keys[keys.length - 1][1]; };
const clamp = (x, a = 0, b = 1) => Math.min(b, Math.max(a, x));
const ease = x => (x = clamp(x), x < .5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2); // easeInOutCubic
const lerp = (a, b, k) => a + (b - a) * k;
const seg = (t, a, b) => clamp((t - a) / (b - a)); // 0..1 Fortschritt von t durch [a, b]
const rng = s => () => (s = (s + 0x6D2B79F5) | 0, s = Math.imul(s ^ (s >>> 15), 1 | s), s ^= s + Math.imul(s ^ (s >>> 7), 61 | s), ((s ^ (s >>> 14)) >>> 0) / 4294967296);
- Tippen: der sichtbare String ist
full.slice(0, n(t))mit einem blinkenden Cursor abt. Hochzähler: formatierelerp(a, b, ease(seg(t, …))). - Eine Kamera ist ein Wrapper-Element mit
transform: translate() scale() rotate(), gesteuert durchkfodertrack.
Sound
window.buildAudio(ctx)plant den gesamten Soundtrack (Musik + Effekte) ab Zeit 0 auf dem übergebenenAudioContextoderOfflineAudioContextunter Verwendung derselben Timeline-Zahlen wie die Visuals. Synthetisiere mit Oszillatoren, gefiltertem Rauschen (von einem gesäten Puffer) und Hüllkurven. Wenn der Benutzer eine Musikdatei angegeben hat, lade sie mitfetch+decodeAudioData, setze das Beat-Raster auf ihr Tempo (messe es) und füge nur die Effekte oben drauf hinzu.- Vorschau-Wiedergabe: beim ersten Abspielen rendere den Soundtrack einmal in einen Puffer, spiele dann von jeder gescrubbten Position ab. Der Takt treibt
seek:
let buf, ac, src, startAt = 0, offset = 0, playing = false;
async function play() {
ac ??= new AudioContext();
if (!buf) { const off = new OfflineAudioContext(2, Math.ceil(48000 * VIDEO.duration), 48000); await buildAudio(off); buf = await off.startRendering(); }
src = ac.createBufferSource(); src.buffer = buf; src.connect(ac.destination);
src.start(0, offset % VIDEO.duration); startAt = ac.currentTime; playing = true;
}
function pause() { if (!playing) return; offset += ac.currentTime - startAt; src.stop(); playing = false; }
function now() { return playing ? (offset + ac.currentTime - startAt) % VIDEO.duration : offset; }
(function loop() { seek(now()); requestAnimationFrame(loop); })(); // der Scrubber setzt offset (Pause, setzen, Abspielen)
- Füge den Ablaufplan als Kommentar am Anfang des Skripts ein: eine Zeile pro Moment mit seiner Zeit, was passiert und welchem Sound.
Schritt 3: Prüfen, rendern, liefern
Einmal im Arbeitsordner einrichten
…
[gekürzt für Übersetzung]