explainer-default

Default-Erklärvideo (Explainer)

Eine ruhige, hochwertige Produktdemo, wie man sie auf der Homepage eines gut finanzierten Startups findet. Ihr ganzer Trick ist Zurückhaltung: eine helle, luftige Leinwand, jeweils nur eine kurze Textzeile und die aus nächster Nähe gefilmte, sauber nachgebaute Benutzeroberfläche des Produkts während der Nutzung. Die Kamera erzählt die Geschichte: Sie fährt auf eine Textzeile zu, gleitet entlang der Eingabe, zoomt heraus, um das Ergebnis zu zeigen, und gleitet zur nächsten Funktion.

Sie schreiben es als eine HTML-Seite, die jeden Frame aus einem Zeitwert rendert, und rendern es dann mit Bewegungsunschärfe und einem Soundtrack zu MP4.

Schritt 1: Das Briefing einholen (eine Nachricht, dann loslegen)

Stellen Sie alles in einer Nachricht, dann arbeiten Sie eigenständig. Nur das Produkt ist erforderlich; für alles, was leer bleibt, entscheiden Sie selbst und geben an, was Sie gewählt haben.

1. Produkt: Name und eine kurze Beschreibung in ein paar Sätzen. Eine Website-URL ist noch besser.
2. Die eine Sache, die sich der Betrachter merken muss (z.B. "eine Idee eingeben, eine Live-App erhalten").
3. Marke: Farben, Schriftarten, Logodatei oder "die Website verwenden". Wenn nichts angegeben, verwenden Sie die Standardpalette unten.
4. Format: 16:9 (1920×1080) oder 9:16 (1080×1920). Standard: 16:9.
5. Länge: Der Standard ist unten für diesen Stil angegeben.
6. Musik: Ihr eigener Track (ein Dateipfad) oder Sie lassen mich einen synthetisieren. Standard: Synthese.
7. Richtung (optional): Gewünschte Szenen, ein Slogan, ein Call-to-Action, alles, was zu vermeiden ist.

Wenn eine URL angegeben wurde, lesen Sie sie (Web-Fetch), um die tatsächlichen Formulierungen, Funktionen, Farben und Schriftartnamen des Produkts zu erfahren, bevor Sie etwas schreiben. Verwenden Sie ihre tatsächlichen Wörter für UI-Beschriftungen und Slogans.

Erfinden Sie niemals Fakten. Keine erfundenen Kundenzahlen, Einnahmen, Bewertungen, Erfahrungsberichte oder Zitate. Zahlen nur, wenn der Benutzer oder die Website sie angibt; andernfalls verwenden Sie relative Balken, Fortschrittsanzeigen und Platzhalter-Skelettlinien. Beispielinhalte innerhalb der Benutzeroberfläche (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") sind es nicht. Call-to-Actions verwenden nur eine URL oder ein Angebot des Benutzers oder der Website; wenn keines vorhanden ist, enden Sie mit dem Namen und Slogan.

Logos. Verwenden Sie ein Logo nur, wenn der Benutzer die Datei bereitstellt oder es sich um sein eigenes Produkt handelt und er darum gebeten hat. Ansonsten schreiben Sie den Namen als Text in der Markenschriftart. Logos von Drittanbietern (Integrationen) nur, wenn sie bereitgestellt werden; andernfalls neutrale abgerundete Kacheln mit dem Namen.

Fragen Sie auch (optional) nach: den 3–5 Funktionen oder Arbeitsschritten, die gezeigt werden sollen, und allem, womit das Produkt verbunden ist (Integrationen). Wenn eine URL angegeben wurde, übernehmen Sie diese von der Website.

Standardlänge für diesen Stil: 60 Sekunden. Bereich 45–90. Budgetieren Sie nach Länge (lassen Sie zuerst optionale Abschnitte weg):

Länge	Funktionen	Optionale Abschnitte
45 s	2–3, ca. 9 s pro Stück	Proof oder Integrationen, nicht beides
60 s	3–4, ca. 10 s pro Stück	eines von Proof / Integrationen
90 s	4–5, ca. 12 s pro Stück	beide

Schritt 2: Das Drehbuch schreiben, dann bauen

Die Struktur

Schreiben Sie zuerst das Drehbuch und das Blatt mit den Zeitmarken: jede Textzeile auf dem Bildschirm, welcher UI-Moment ihr folgt, und ihre Zeit; addieren Sie die Zeiten gegen das oben genannte Budget. Der Text auf dem Bildschirm ist die einzige "Stimme", also muss er die Geschichte allein erzählen.

Wie Szenen und Kamera zusammenpassen: Jede Szene (eine Titelzeile, ein UI-Moment) ist eine eigene Ebene mit ihrer eigenen Kamera. Innerhalb einer Szene fährt die Kamera heran, gleitet und zoomt heraus; zwischen den Szenen wird die ausgehende Ebene mit einem kurzen Weichzeichner (0,3–0,4 s) in die nächste aufgelöst, die sich bereits bewegt.

1. Auftakt (0–5 s). Einfache helle Leinwand. Ein kleines Wort erscheint in der Mitte: Einführung. Es löst sich in den Markenmoment auf: Der sanfte Markenverlauf zieht ein (seidenartige diagonale Lichtbänder, die sich langsam bewegen) mit dem Logo oder Namen in der Mitte, klein.
2. Das Problem oder die Aufforderung (≈5 s). Eine kurze Zeile, die der Betrachter wiedererkennt (Erstellen Sie Interessentenlisten immer noch von Hand?), oder gleich zur Eingabe des Produkts: ein großes abgerundetes Eingabefeld, leer mit Platzhaltertext, darunter Vorschlags-Chips.
3. Funktionskapitel (3–5, ca. 8–15 s pro Stück). Jedes besteht aus:
   • Einer Titelzeile: ein kurzer Satz, klein (ca. 28 px bei 1080p), zentriert auf der einfachen Leinwand. Er wird Wort für Wort getippt oder eingeblendet. Dann fährt die Kamera darauf zu, bis die Zeile etwa 75 % der Rahmenbreite einnimmt, und ein Schlüsselwort oder eine kurze Phrase wird hervorgehoben: eine sanfte Box in der Markenfarbe, die von links nach rechts dahinter streicht (Rufen Sie den Entscheider an. Direkt.).
   • Der UI-Moment: Die tatsächliche Benutzeroberfläche des Produkts, als saubere Vektor-UI (keine Screenshots) nachgebaut, auf den wesentlichen Teil beschnitten und groß gezeigt. Die Kamera ist nah genug, dass das Element den größten Teil des Bildes ausfüllt, und sie folgt der Aktion: Texteingabe in das Feld (die Kamera folgt dem Cursor; messen Sie den Text mit measureText, um zu wissen, wo er ist), die Schritte eines Agenten werden einer nach dem anderen abgehakt (Spinner → Haken, 247 Übereinstimmungen gefunden), Ergebniskarten stapeln sich mit unscharfen Hinterkarten (Tiefenschärfe), eine Tabelle füllt sich Zeile für Zeile, der Cursor klickt auf eine Zellschaltfläche und der Wert erscheint, eine neue Spalte wird hinzugefügt und jede Zelle "denkt" mit einem Schimmer, bevor ihr Wert erscheint, ein Popover mit Begründung und Quellen öffnet sich.
   • Der Rückzug: Nach der Aktion fährt die Kamera sanft zurück, um den gesamten Bildschirm für einen Moment zu zeigen, damit der Betrachter versteht, wo er sich befindet, und gleitet dann weiter.
4. Proof (optional, nur echte Zahlen). Ein Satz mit einer Zahl, die hochzählt, die Zahl hervorgehoben (Unterstützt durch eine Datenbank mit 300M+ Profilen), über einem subtilen gepunkteten Globus oder Gitter.
5. Integrationen (optional). Für Ihren bestehenden Workflow gebaut. in der Mitte, während 8–12 App-Kacheln (abgerundete Quadrate, echte Logos nur, wenn bereitgestellt; wiederholen Sie die Integrationen, wenn es wenige gibt) in verschiedenen Tiefen von den Rändern hereinschweben: nahe sind größer und leicht unscharf, ferne sind klein und scharf, alle bewegen sich mit Parallaxe. Hier skaliert der Text von selbst anstelle eines Kamerazooms, sodass die Kacheln im Bild bleiben.
6. Abschluss. Auf dem Markenverlauf: ein Satz mit einem rotierenden hervorgehobenen Wort, das durch die Anwendungsfälle zyklisiert (Erledigen Sie Ihre gesamte [Akquise / Recherche / Kundenansprache] in Produkt.), dann, nur wenn das Produkt wirklich eine hat, eine andere Möglichkeit es zu nutzen (z.B. Oder fragen Sie einfach Claude für ein Produkt mit einem Claude-Connector), dann der Slogan mit der hervorgehobenen Schlüsselphrase.
7. Endkarte (3 s). Logo oder Name auf dem Markenverlauf, URL oder Call-to-Action klein darunter.

Regeln für ein hochwertiges Gefühl

• Eine Sache nach der anderen. Niemals mehr als eine Textzeile plus ein UI-Element gleichzeitig auf dem Bildschirm. Text und UI teilen sich fast nie den Rahmen: Textszene, dann UI-Szene.
• Die Kamera ist der Editor. Keine harten Schnitte. Jeder Szenenwechsel ist eine Kamerabewegung (Hineinzoomen, Herauszoomen, Gleiten) oder eine sanfte Unschärfe-Überblendung auf der einfachen Leinwand. 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. Bauen Sie die Benutzeroberfläche des Produkts aus dem, was Sie darüber wissen (oder von seiner Website) nach: sein tatsächliches Layout, Beschriftungen, Farben, Schriftarten und Eckenradien, vereinfacht auf das, was die Szene benötigt. Der Inhalt darin sind glaubwürdige Beispieldaten, die zum Produkt passen. Sanfte Schatten, 1 px Rahmen, großzügige Weißräume.
• Cursor: ein normaler macOS-Pfeil, der sich auf sanften Kurven bewegt, einen Moment vor dem Klicken ankommt, mit einem kleinen Druck auf den Cursor und einer sanften Welle auf dem angeklickten Steuerelement. Hover-Zustände ändern sich.
• Schriftart: die Schriftart der Marke, falls bekannt; ansonsten Inter oder Geist. Klein, normale Stärke für Titelzeilen (sie werden durch die Kamera groß, nicht durch die Schriftgröße). Enger Buchstabenabstand bei großem Text.
• Standardpalette: Leinwand #F7F7F8, Text #111114, sekundär #8A8A94, UI-Oberflächen weiß mit #E7E7EC-Rahmen, Markenakzent #2E6BFF, Hervorhebungsbox = Akzent bei 15–20 % Deckkraft. Markenverlauf: weiß → blasser Akzent → Akzent, als langsame diagonale Seidenbänder (zeichnen Sie sie auf eine Canvas, nicht mit CSS-Weichzeichner). Markenfarben ersetzen den Akzent.
• Tempo: Jede Titelzeile hält etwa 2 s nach dem Auftauchen; UI-Momente laufen in Echtzeit (Tippen mit etwa 25 Zeichen pro Sekunde), mit Pausen von 0,5 s nach jedem Ergebnis, damit der Betrachter es lesen kann.
• Verboten: Überladene Hintergründe hinter UI, mehr als eine Akzentfarbe, federnde Easing-Funktionen, Emojis, große Schlagschatten, überall Glas-Morphism, erfundene Metriken oder Testimonials.

Sound

Ein erhebender, sanfter Teppich mit 100–110 BPM (weiche Klavier- oder Zupfakkorde, leichte Percussion nach dem Auftakt, ein Anstieg zum Abschluss hin), leise und warm. Soundeffekte klein: Tastengeräusche beim Tippen, sanfte Klicks, ein leichtes "Tick" pro abgeschlossenem Schritt, ein sanfter "Whoosh" bei großen Kamerabewegungen, eine sanfte Glocke auf der Endkarte. Die Musik sollte wie ein Hintergrund in einem gut gemachten Produktvideo wirken, nicht treibend sein.

Wie die Seite aufgebaut sein muss

Eine eigenständige HTML-Datei (Inline-CSS und JS; Bilder nur, wenn der Benutzer sie bereitgestellt hat). Zeichnen Sie mit DOM + CSS-Transformationen, SVG oder einer Vollbild-Canvas, was immer passt.

Der Seitenvertrag

• window.VIDEO = {w, h, duration} und window.seek(t), eine reine Funktion der Zeit: Sie setzt jedes Element für die Zeit t (Sekunden). Keine CSS-Übergänge oder -Animationen, kein setTimeout, kein aus dem vorherigen Frame übernommener Zustand. Jeder Frame muss für sich allein korrekt rendern, in beliebiger Reihenfolge. Das Messen des Layouts innerhalb von seek (z.B. offsetLeft, measureText) ist in Ordnung; es ist deterministisch.
• Zufälligkeit (Körnung, Partikel, Rauschen in Audiodaten) stammt aus einem Seed-Generator, niemals Math.random.
• Alles, was eine Historie benötigt (eine Kamera, die hinter einem sich bewegenden Objekt hinterherhinkt, eine Simulation), wird einmalig beim Laden gebacken: Schrittweise von 0 bis duration mit 1/240 s, Werte speichern und von seek mit Interpolation auslesen lassen. Verwenden Sie für Schleifen die Simulation ab dem Zustand, in dem die Schleife beginnt (siehe die Nahtregel des Stils).
• Schleifen: seek(t) verwendet t % duration; Effekte, die die Naht überspannen (ein Landungs-Quetsch, ein Sound-Schweif), werden an beiden Enden gezeichnet oder gemischt.
• Mit ?render in der URL: keine Steuerelemente, keine Vorschau-Skalierung; die Bühne ist exakt w × h oben links. Ohne: die Bühne wird mit CSS an das Fenster angepasst und die Vorschau-Steuerelemente werden angezeigt.
• Schriftarten: Einbetten. Laden Sie die woff2-Dateien (Google Fonts oder die der Marke) herunter und betten Sie sie als base64 @font-face ein, damit das Rendern nie stillschweigend zurückfällt. Für eine Gewichtsmorphose verwenden Sie eine variable Schriftart mit einem Bereich ([email protected]).
• Ebenen: Geben Sie Szenenebenen transparente Hintergründe und lassen Sie einen Bühnenhintergrund dahinter die Basisfarbe bereitstellen, damit eine spätere Ebene nie versehentlich eine frühere verdeckt. Absolut positionierter Text erhält white-space: nowrap.
• Geschwindigkeit: Große CSS filter: blur() und große unscharfe Verläufe sind sehr langsam beim Screenshot. Zeichnen Sie Verläufe und Glühen einmal beim Laden auf eine Canvas (oder als Bild) und bewegen Sie diese.

Hilfsfunktionen: Fügen Sie diese ein und bauen Sie 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 mehrfach das Ziel ändert und zu jedem federt: 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 getimte 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 ab t. Hochzählen: Format lerp(a, b, ease(seg(t, …))).
• Eine Kamera ist ein Wrapper-Element mit transform: translate() scale() rotate(), gesteuert durch kf oder track.

Sound

• window.buildAudio(ctx) plant den gesamten Soundtrack (Musik + Effekte) ab Zeit 0 auf dem AudioContext oder OfflineAudioContext, den es erhält, unter Verwendung derselben Zeitleistenzahlen wie die Visuals. Synthese mit Oszillatoren, gefiltertem Rauschen (aus einem Seed-Buffer) und Hüllkurven. Wenn der Benutzer eine Musikdatei bereitgestellt hat, laden Sie sie mit fetch + decodeAudioData, setzen Sie das Beat-Raster auf ihr Tempo (messen Sie es) und fügen Sie nur die Effekte darauf hinzu.
• Vorschau-Wiedergabe: Beim ersten Abspielen einmal den Soundtrack in einen Buffer rendern, dann von jeder gescrubbten Position abspielen. Die Uhr 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, set, play)

• Fügen Sie das Blatt mit den Zeitmarken als Kommentar am Anfang des Skripts ein: eine Zeile pro Moment mit seiner Zeit, was passiert und welcher Sound.

Schritt 3: Überprüfen, rendern, ausliefern

Einrichtung einmalig im Arbeitsverzeichnis

… [für die Übersetzung gekürzt]