High-Energy-Explainer
Ein 12–20 Sekunden langer Hype-Beitrag, der wie eine Showreel wirkt. Jede halbe Sekunde passiert etwas im Takt, aber es wirkt nie wie willkürliche Schnitte, denn eine Form führt das Auge durch jeden Übergang: Ein Funke wird zu einer Linie, die Linie flutet den Bildschirm und wird zum nächsten Hintergrund, ein Punkt löst sich und wird zum Ball, um den die nächste Szene aufgebaut ist.
Du schreibst es als eine HTML-Seite, die jeden Frame aus einem Zeitwert rendert, und renderst es dann mit Bewegungsunschärfe und einem synthetisierten Soundtrack in MP4.
Schritt 1: Das Briefing einholen (eine Nachricht, dann loslegen)
Frage alles in einer Nachricht ab, dann arbeite selbstständig. Nur das Produkt ist erforderlich; bei allem anderen, was leer bleibt, entscheide selbst und teile mit, was du gewählt hast.
- Produkt: Name und eine kurze Beschreibung, was es tut. Eine Website-URL ist noch besser.
- Die eine Sache, die der Zuschauer behalten muss (z. B. „eine Idee eingeben, eine Live-App erhalten“).
- Marke: Farben, Schriftarten, Logo-Datei oder „verwende die Website“. Wenn nichts angegeben ist, verwende die Standardpalette unten.
- Format: 16:9 (1920×1080) oder 9:16 (1080×1920). Standard ist 16:9.
- Länge: Der Standard ist unten für diesen Stil angegeben.
- Musik: Eigener Track (ein Dateipfad) oder lass dich synthetisieren. Standard: synthetisieren.
- Regie (optional): Gewünschte Szenen, ein Slogan, ein Call-to-Action, alles, was vermieden werden soll.
Wenn sie eine URL angegeben haben, lies sie (Web-Fetch) 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 Kundenanzahlen, Umsätze, Bewertungen, Testimonials oder Zitate. Zahlen nur, wenn der Benutzer oder die Website sie angibt; verwende andernfalls 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 nicht erlaubt. Handlungsaufforderungen verwenden nur eine URL oder ein Angebot, das der Benutzer oder die Website gemacht hat; wenn keines vorhanden ist, ende mit dem Namen und dem Slogan.
Logos. Verwende ein Logo nur, wenn der Benutzer die Datei bereitstellt oder es sich um sein eigenes Produkt handelt und er danach gefragt hat. Andernfalls schreibe den Namen als Text in der Markenschriftart. Drittanbieter-Logos (Integrationen) nur, wenn sie bereitgestellt werden; andernfalls neutrale abgerundete Kacheln mit dem Namen.
Standardlänge für diesen Stil: 15 Sekunden (128 BPM, 8 Takte). Bereich 12–20.
Schritt 2: Die Szenen planen, dann bauen
Die Struktur (6–8 Szenen von 1,5–3 s, auf einem 120–140 BPM Raster)
Wähle aus diesen Szenentypen aus und ordne das Produkt darauf ab. Schreibe zuerst das Beat-Blatt (Szene, Startzeit im Beat-Raster, was hineinführt, was hinausführt, Ton).
- Funken-Öffnung (dunkel). Fast schwarze Leinwand mit einem schwachen Raster. Ein winziger Akzent erscheint, pulsiert, dehnt sich zu einer dünnen horizontalen Linie über den Bildschirm mit einer kleinen Mono-Beschriftung (
produkt / launch — 2026), wackelt einmal, dann dehnt sich die Linie vertikal zu einer Vollbildflut der Akzentfarbe aus. Diese Flut ist der nächste Hintergrund. - Marken-Slam. Der Produktname in einer schweren Grotesk, in Großbuchstaben, riesig, Buchstaben werden durch Masken auf aufeinanderfolgenden 1/16-Schlägen enthüllt, ein kleiner Mono-Obertitel darüber (
INTRODUCING — 2026) und eine kursive Serifenlinie darunter (was es ist, 2–4 Wörter). Die Strichstärke kann von dünn bis schwarz wechseln. Der Punkt oder der Punkt eines Buchstabens löst sich und wächst zu der Form, die die nächste Szene beginnt. - Kinetisches Trio. Das Wertversprechen als drei kurze Wörter oder Phrasen, jeweils zwei Schläge (drei für ein handgeschriebenes Wort, damit es lesbar ist), jedes mit seiner eigenen Behandlung und seinem eigenen Hintergrund, hart im Takt ausgetauscht (innerhalb dieser Szene sind die Austausche der Rhythmus, zählen also nicht als Schnitte): Dunkel auf Creme; Akzent auf Schwarz, wobei das Wort als Umrissmuster den Rahmen füllt; Weiß auf Elektroblau innerhalb von Sucher-Eckklammern mit einer winzigen
1920 × 1080Beschriftung; ein letztes Wort in handgeschriebener Schrift, das sich selbst zeichnet. Jedes Wort kommt mit einem schnellen Unschärfe-/Rutschen herein und landet mit einem leichten Überschwinger. - Signature Visual. Ein „Wie haben sie das gemacht“-Moment, der das Produkt symbolisiert: Ein 3D-Feld aus Würfeln, die sich von der Mitte aus wellenförmig ausbreiten (auf einer Leinwand mit eigener Perspektivenprojektion gezeichnet, farblich nach Höhe mit der Palette), ein generativer Partikelfluss, der sich zu einem Ring verdichtet und nach außen platzt, oder ein flüssiger Klecks, der zwischen Formen wechselt. Wähle das aus, das zur Produktidee passt (Bausteine → Würfel, Daten/KI → Partikel, Flexibilität → Flüssigkeit). Die Kamera neigt oder umkreist langsam, während es läuft.
- Produkt-Mikro-Moment. Eine echte Interaktion aus dem Produkt als schwebende UI-Karte, leicht in 3D geneigt mit zwei Geisterkarten dahinter gestapelt: Der Cursor schaltet einen Schalter um, drückt die Hauptschaltfläche, ein Fortschrittsbalken füllt sich in der Akzentfarbe mit einem Prozentsatz, die Schaltfläche wird zu
Erledigt ✓, ein Toast erscheint oben rechts. Verwende die echten Produktbeschriftungen. - Beweis (nur wenn echte Zahlen existieren). Ein großer Count-up (
+312%Stil, Ziffern verschwimmen beim Drehen), ein Donut-Ring, gestaffelte Balken, die mit einem Akzentbalken ansteigen, eine Linie, die darüber gezeichnet wird, mit einem Tooltip. Keine echten Zahlen → überspringe diese Szene oder zeige die tatsächlichen Fähigkeiten des Produkts als eine Liste, die einschlägt. - Flüssig-/Morph-Brücke. Die Form aus der vorherigen Szene kollabiert zu einem Punkt, der Punkt wird zu einem Ringpuls auf Dunkel, der zum Punkt im Logo wird.
- Endkarte (2 s halten). Logo oder Name mit dem Akzentpunkt, kursiver Serifen-Slogan, eine gesperrte Mono-Zeile, die Buchstabe für Buchstabe eingibt (die echte URL oder der Call-to-Action, falls angegeben, z. B.
PRODUKT.COM; andernfalls eine kurze Zeile aus dem Briefing), eine Haarlineal-Regel.
Nicht jedes Produkt braucht jede Szene; 6 starke Szenen sind besser als 8 schwache. Halte dich an eine Idee pro Szene.
Regeln, die es teuer aussehen lassen
- Übergänge sind Objekte, keine Schnitte. Jede Szene übergibt die nächste durch eine Form (Flut, Wischung durch einen wachsenden Balken, ein Punkt, der zum nächsten Hintergrund wächst, ein Wort, das durch die Kamera zoomt). Ein harter Schnitt zwischen Szenen ist nur auf einem Downbeat erlaubt, höchstens zweimal.
- Alles landet auf dem Raster. Große Änderungen auf Schlägen, Typografie auf 1/8 oder 1/16 Noten. Leicht überschwingen (
z≈ 0.6–0.7) für Einschläge, dann beruhigen. - HUD-Rahmen in jeder Szene: dünne Eckklammern,
SZENE 02 / 07oben rechts, eine Kategoriebeschriftung unten links in winziger Mono (KINETISCHER TYP,PRODUKT,DATEN), und ein laufender Timecode unten rechts mit einem roten Punkt. Klein (12–14 px bei 1080p) und etwa 50% Deckkraft; es sollte sich wie ein Kamerabildschirm anfühlen. - Textur: Eine weiche radiale Vignette auf jedem flachen Hintergrund, sehr subtiles Filmkorn (einige gesäte Kornkacheln beim Laden vorab generieren und durchlaufen lassen), und echte Bewegungsunschärfe.
- Schrift: Eine schwere Grotesk für Einschläge (z. B. Inter Tight 900 oder Archivo Black), eine kursive Serife für die menschliche Linie (Instrument Serif kursiv), eine Mono für HUD und Untertitel (JetBrains Mono oder Geist Mono). Wenn die Marke Schriftarten hat, verwende ihre für den Namen und behalte die Mono für das HUD.
- Standardpalette: Tinte
#0B0B10, Akzent#FF4F1A, Creme#EDEBE4, Elektroblau#2F47FF, Weiß. Die Hauptfarbe der Marke ersetzt den Akzent und ihre Sekundärfarbe ersetzt das Blau; eine einfarbige Marke verwendet einen tiefen Farbton ihrer Farbe als Sekundärfarbe. - Verboten: Stock-Vorlagen-Look, Glühen auf allem, Emojis, mehr als 3 Farben in einer Szene (Schwarz und Weiß nicht mitgezählt), Text kleiner als mit einem Blick lesbar, jede Szene ohne Bewegung.
Ton
128 BPM (oder der Track des Benutzers). Druckvoll: Kick auf jedem Schlag, Klatschen auf 2 und 4, ein Subbass, der den Szenengrundtönen folgt, ein gefilterter Anstieg in den Marken-Slam und die Endkarte, ein Einschlag (tiefer Boom + Rauschburst) bei jeder Flut, kurze tonale Pieptöne bei jedem getippten Wort, ein Whoosh (bandpassgefiltertes Rauschen) bei jedem getragenen Übergang, ein weicher Ausklang auf der Endkarte. Mische die Musik unter die Einschläge.
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-Transforms, SVG oder einer Vollbild-Canvas, was auch 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 vom vorherigen Frame übernommener Zustand. Jeder Frame muss für sich allein korrekt rendern, in beliebiger Reihenfolge. Die Messung des Layouts innerhalb vonseek(z. B.offsetLeft,measureText) ist in Ordnung; es ist deterministisch.- Zufälligkeit (Korn, Partikel, Rauschen im Audio) stammt von einem gesäten Generator, niemals von
Math.random. - Alles, was einen Verlauf benötigt (eine Kamera, die hinter einem sich bewegenden Objekt hinterherhinkt, eine Simulation), wird einmal beim Laden gebacken: Schrittweise von 0 bis
durationbei 1/240 s, speichere die Werte und lasseseeksie mit Interpolation auslesen. Für Schleifen starte die Simulation mit dem Zustand, in dem die Schleife beginnt (siehe die Naht-Regel des Stils). - Schleifen:
seek(t)verwendett % duration; Effekte, die die Naht überspannen (eine landende Stauchung, ein Tonausläufer), werden an beiden Enden gezeichnet oder gemischt. - Mit
?renderin der URL: Keine Steuerelemente, keine Vorschauskalierung; 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 herunter (Google Fonts oder die der Marke) und binde sie als base64
@font-faceein, damit der Renderer nie stillschweigend zurückfällt. Für einen Strichstärkenwechsel verwende eine variable Schriftart mit einem Bereich ([email protected]). - Ebenen: Gib Szenenebenen transparente Hintergründe und lasse einen Bühnenhintergrund dahinter die Grundfarbe liefern, 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 beim Screenshot sehr langsam. Zeichne Farbverläufe und Glühen einmal beim Laden auf einer Canvas (oder als Bild) und bewege diese.
Helfer: Füge diese ein und baue alles darauf auf
// Gedämpfte Sprungantwort von 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 das Ziel mehrmals ä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 erleichterte 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);
- Schreiben: Der sichtbare String ist
full.slice(0, n(t))mit einem blinkenden Cursor abt. Count-ups: Formatierelerp(a, b, ease(seg(t, …))). - Eine Kamera ist ein Wrapper-Element mit
transform: translate() scale() rotate(), gesteuert durchkfodertrack.
Ton
window.buildAudio(ctx)plant den gesamten Soundtrack (Musik + Effekte) ab Zeit 0 auf dem übergebenenAudioContextoderOfflineAudioContext, wobei dieselben Zeitliniennummern wie die visuellen Elemente verwendet werden. Synthetisiere mit Oszillatoren, gefiltertem Rauschen (aus einem gesäten Puffer) und Hüllkurven. Wenn der Benutzer eine Musikdatei bereitgestellt hat, lade sie mitfetch+decodeAudioData, setze das Beat-Raster auf ihr Tempo (messe es) und füge nur die Effekte darüber.- Vorschaue-Wiedergabe: Beim ersten Abspielen den Soundtrack einmal in einen Puffer rendern, dann von jeder gescrubbten Position abspielen. Die Uhr steuert
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üge das Beat-Blatt als Kommentar am Anfang des Skripts ein: eine Zeile pro Moment mit seiner Zeit, dem Geschehen und dem Ton.
Schritt 3: Prüfen, rendern, ausliefern
Einmalige Einrichtung im Arbeitsordner: npm i playwright, dann npx playwright install chromium, falls Chromium noch nicht installiert ist; ffmpeg muss im PATH sein. Speichere das Skript am Ende dieser Datei als render.mjs.
- Standbilder.
node render.mjs demo.html check.png --stills 0.5,1.2,…mit einer Zeit pro Zeile des Beat-Blattes (das Blatt ist in lesbarer Größe, 3 pro Zeile). Sieh es dir an. Korrigiere alles, was abgeschnitten, überlappend, unleserlich, nicht markenkonform, schlecht gerahmt oder leer ist. Überprüfe erneut. - Entwurf.
node render.mjs demo.html draft.mp4 30 1 4(schnell: 30 fps, keine Bewegungsunschärfe, 4 parallele Worker; setze die letzte Zahl auf die Kernanzahl des Rechners). Dies ist die Überprüfungskopie: Sende sie an den Benutzer mit dem HTML und bitte um Änderungen vor dem Finale. - Finale.
node render.mjs demo.html demo.mp4 60 8 8. Bewegungsunschärfe multipliziert die Renderzeit mit der Anzahl der Unterbilder; ein 60 s Finale kann auf einem Laptop 20–60 Minuten dauern, also sag es vor dem Start. Es wr
…
[gekürzt für die Übersetzung]