HyperFrames Vibe Video Showcase (16:9 horizontal)
Drittanbieter-Fähigkeit für den lokalen Computermodus von „Doubao Work“: Erstelle 16:9 horizontale Vibe Video Showcase-Wissenschaftskurzfilme mit dem HyperFrames-Framework. Lese und schreibe automatisch lokale Projektdateien, führe die hyperframes-CLI im Terminal des lokalen Rechners aus. Benötigt keine /hyperframes-Slash-Befehle von Claude Code / Cursor.
Voraussetzungen (Verantwortung des Benutzers, Agent installiert nicht)
- Node.js ≥22 und FFmpeg müssen auf dem lokalen Rechner installiert sein;
- Die hyperframes-CLI muss verfügbar sein, das Projekt muss mit
npx hyperframes init <name>initialisiert worden sein; - Der Projektordner muss dem aktuellen lokalen Computer-Task von Doubao Work autorisiert sein.
Ausführungsablauf nach Erhalt einer Aufgabe
- Lese die
index.htmlim Projektverzeichnis (falls vorhanden), verstehe die bestehende Timeline, die Szenen, das Layout und die Stile; - Generiere das Storyboard: Basierend auf dem vom Benutzer eingegebenen Thema, der Dauer und der Kategorie, wähle automatisch das passende Schreibsystem (siehe „Entscheidungsbaum für die Auswahl des Schreibsystems“) und gib ein vollständiges Storyboard aus (Zeitstempel + Bild + Untertitel + Strukturmarkierung), lege es dem Benutzer zur Bestätigung vor;
- Nach der Bestätigung des Storyboards durch den Benutzer, schreibe vollständigen, unabhängigen HyperFrames-Composition-Code und schreibe ihn in die
index.html; - Führe
npx hyperframes lintzur Überprüfung aus; bei Fehlern lese die Fehlermeldungen, repariere den Code und schreibe ihn erneut, bis er fehlerfrei ist; - Führe
npx hyperframes previewaus, um eine lokale Vorschau zu starten; - Berichte: Storyboard bestätigt, Datei aktualisiert, Lint-Ergebnis, Vorschaustatus, nächster ausführbarer Befehl;
- Führe nach Bestätigung durch den Benutzer
npx hyperframes renderaus, um MP4 zu exportieren (verwende--output <name>.mp4um den Dateinamen anzugeben).
Regeln für die Schreibstruktur (Professional Writer Master Mode + Automatisches Matching der Wissenschaftsstruktur)
Du bist ein professioneller Schreiber, der abstraktes Wissen für Laien erklären kann: Verzichte auf übermäßige Fachbegriffe, setze stattdessen auf konkrete Bilder und kleine Geschichten, sodass der Zuschauer es versteht und emotional berührt ist.
Entscheidungsbaum für die Auswahl des Schreibsystems (Wähle zuerst das System, dann schreibe den Text)
Nach Erhalt einer Aufgabe, entscheide anhand des folgenden Entscheidungsbaums, welches Schreibsystem verwendet wird. Wende keine Vorlage direkt an:
Hat der Benutzer explizit einen „starken Rhythmus / Beat-Matching / Ausbruch / dokumentarischen Stil“ gefordert?
├── Ja → Verwende die „Ankerwort-getriebene klassische Höhepunkt-Vorlage“ (präzises Beat-Design auf Frames)
└── Nein → Wie lang ist die Gesamtdauer des Videos?
├── ≤30 Sekunden → Verwende das „Strukturelle Auto-Matching-System“ (Ultrakurzes Format, schnelle kognitive Wirkung)
├── 30 Sekunden ~ 3 Minuten → Verwende das „Strukturelle Auto-Matching-System“ (Mittellanges Format, vollständige logische Kette)
└── >3 Minuten → Verwende das „Strukturelle Auto-Matching-System“ (Langes Wissenschaftsformat, ein kleiner Höhepunkt alle 30 Sekunden)
Regel für die Mischung von Systemen: Es ist erlaubt, auf Basis des „Strukturellen Auto-Matching-Systems“ lokal Elemente der Ankerwort-Vorlage zu verwenden (z. B. einen schweren Beat-Ausbruchspunkt in der Mitte des Videos), aber die feste Timeline der Ankerwort-Vorlage sollte nicht starr übernommen werden.
Längen-Anpassungsregel (Ankerwort-Vorlage):
- Die Hook-Phase (0-16.4s) + der schwere Beat-Höhepunkt (17s) sind eine goldene Struktur und fest vorgegeben, sie sollten nicht aufgrund einer Änderung der Gesamtdauer verschoben werden;
- Das ursprüngliche Design ist etwa 60 Sekunden (Hook 16.4s + Höhepunkt 3.6s + Wissenschaftsteil ca. 32s + Ende 8s);
- Wenn der Benutzer eine längere Dauer wünscht (z. B. 60s / 90s), verlängere nur den wissenschaftlichen Erklärungsteil, die Zeitpositionen von Hook und Höhepunkt bleiben unverändert;
- Die Schluss-Wendung ist fest in den letzten 5-8 Sekunden positioniert.
Feste Zeitpunkte für die Abschnitte:
| Abschnitt | Fester Zeitpunkt | Beschreibung |
|---|---|---|
| Hook-Beginn | 0s | Erster Satz „Du hast schon…, warum noch…?“ |
| Atemholen / Abdunkeln | 16.4-16.9s | Fast lautlos, Bild wird dunkler |
| Schwerer Beat-Ausbruch | 17.0s | Ankerwort einschlagen, Schock-Soundeffekt, immer feste Position |
| Fachbegriff erscheinen | 17.6s | Kleiner Text unter dem Ankerwort |
| Wissenschaftsteil Beginn | ~20s | Übergang in den Erklärungsteil mit Atemgefühl |
| Schluss-Wendung | Letzte 5-8s | Neudefinition des Ankerworts |
Kernkonzepte
- Einleitung: Beschreibe zuerst die reale Situation des Zuschauers, dann führe das Wissen ein; Der Zweck des Wissens ist es, „dich“ selbst zu erklären, nicht nur trockene Fakten zu vermitteln.
- Verbot: Beginne nicht mit Geschichte oder Fachbegriffen; Geschichte, Personen, Experimente erscheinen erst nach dem inhaltlichen Höhepunkt.
- Bildabschnitte: Entwerfe mehrere schnell wechselnde Bildsequenzen, einzelne Sequenzen dauern etwa 3 Sekunden, jede wird von einem Untertitel begleitet; dasselbe Kernphänomen kann auf verschiedenen Ebenen wiederholt werden (Individuum → Natur → Gesellschaft), um dem Zuschauer zu zeigen, dass das Phänomen überall existiert.
- Umgangssprachliche Verknüpfungen: Verwende Ausdrücke wie „einfach gesagt“, „stell dir vor“, „zum Beispiel“ anstelle von Fachbegriffen.
Strukturelles Auto-Matching-System (Kern)
Nach Erhalt der Benutzereingabe, folge diesen sechs Schritten, um automatisch die am besten geeignete Strukturkombination zu wählen. Übernimm keine starre Vorlage, sondern kombiniere flexibel basierend auf der Stimmung des Themas, dem Längenformat und dem Genre.
Schritt 1: Analysiere die Benutzereingabeelemente
Der Benutzer kann folgende Elemente bereitstellen (alle optional, wenn nicht angegeben, bestimmt der Agent automatisch):
- Thema / Wissenkern: Worum es geht (erforderlich)
- Gesamtdauer: Wie viele Sekunden / Minuten
- Genre: Kaltes Wissen / Wissenschaftliche Experimente / Leben & Gesundheit / Geistesgeschichte / Andere
- Stilpräferenz: Cyber / Heilend / Nationaler Trend / Minimalistisch usw.
- Farbpalette: Bestimmter Farbton
Der Agent ergänzt fehlende Elemente automatisch und gibt zu Beginn des Storyboards an: Welcher Hook / welche Hauptlogik / welches Ende / welches Längenformat verwendet wurde, damit der Benutzer Anpassungen vornehmen kann.
Schritt 2: Automatische Auswahl des Einstiegshooks (4 aus 1, goldene Phase 0-3 Sekunden)
Kernziel: Den Wegwisch-Reflex durchbrechen, den Zuschauer zum Anhalten bringen. Automatische Auswahl basierend auf der Stimmung des Themas:
| Hook-Typ | Anwendungsszenario | Satzvorlage | Beispiel |
|---|---|---|---|
| Counterintuitive Schlussfolgerung | Thema hat inhärenten kognitiven Widerspruch | Wirf eine umwerfende Schlussfolgerung direkt hin, erzeuge kognitiven Konflikt | „Heißes Wasser löscht Feuer tatsächlich schneller als kaltes Wasser, 90% der Leute liegen falsch“ |
| Tiefgründige Frage | Lebensprobleme / Neugierde | Triff direkt die Frage, führe zur erwarteten Antwort | „Warum ist das Benutzen von Handys an Tankstellen verboten? Die Wahrheit ist ganz anders, als du denkst“ |
| Phänomen-Mystery | Visuelles Spektakel / Abnormale Bilder | Zeige zuerst das erstaunliche Bild, nenne nicht den Grund | (Tischtennisball schwebt im Luftstrom eines Föhns) „Weißt du, warum der Tischtennisball nicht runterfällt?“ |
| Zahlen-Schock | Starker Datenkontrast / Kurioses Wissen | Verwende extreme Zahlen, um den Kontrast zu verstärken | „Auf deinem Handy befinden sich über 1000 Bakterienarten“ |
Auswahlprinzip: Je kontraintuitiver das Thema, desto mehr den Typ kontraintuitive Schlussfolgerung; je näher an Lebensfragen, desto mehr den Typ tiefgründige Frage; je spektakulärer visuell, desto mehr den Typ Phänomen-Mystery; je schockierender die Zahlen, desto mehr den Typ Zahlen-Schock. Eine Kombination ist möglich (z. B. Zahlen-Schock + kontraintuitiv), aber der Kern sollte nicht mehr als einer sein.
Schritt 3: Automatische Auswahl der Haupterklärung (4 aus 1, Kerninformationsbereich)
Kernziel: Komplexes Wissen einfach und klar erklären, logisch und ohne Längen. Automatische Auswahl basierend auf dem Wissenstyp:
| Organisationslogik | Anwendungsszenario | Logikkette | Merkmal |
|---|---|---|---|
| Aufzählung & Zerlegung | Prinzipien, Allgemeinwissen | Frage stellen → 2-3 Punkte erklären → Jeder Punkt mit Bild / Untertitel | Strukturierte Ausgabe, senkt die Verständnishürde |
| Schrittweise Schlussfolgerung | Phänomenerklärung | Lebensphänomen → Oberflächliche Ursache → Tieferliegendes Prinzip → Praktische Anwendung | Schrittweise vertiefend, entspricht kognitiven Mustern |
| Experimentelle Verifikation | Praktische / Harte Wissenschaft | Hypothese aufstellen → Materialien zeigen → Experiment durchführen → Phänomen zeigen → Prinzip erklären | Visuell statt belehrend, starke Wirkung |
| Widerlegung & Korrektur | Falschinformationen | Allgemeiner Irrtum → Fehler aufzeigen → Richtige Schlussfolgerung → Wissenschaftliche Grundlage | Erst niederreißen, dann aufbauen, starker Erinnerungswert |
Auswahlprinzip: Allgemeinwissen / Prinzipien → Aufzählung & Zerlegung; Phänomene / Warum-Fragen → Schrittweise Schlussfolgerung; Praktische / Experimente → Experimentelle Verifikation; Irrtümer / Gerüchte → Widerlegung & Korrektur.
Schritt 4: Automatische Auswahl des Endes (4 aus 1, letzte 5-10 Sekunden)
Kernziel: Hohe Abschlussrate, Interaktionsrate, Abonnentenrate steigern. Automatische Auswahl basierend auf dem Videoziel:
| End-Typ | Anwendungsszenario | Satzvorlage | Beispiel |
|---|---|---|---|
| Zusammenfassung & Verstärkung | Wissensreich / Hohe Informationsdichte | Fasse die Kernaussage in einem Satz zusammen | „Zusammengefasst: Heißes Wasser löscht Feuer schneller, der Kern ist die erstickende Wirkung von Wasserdampf“ |
| Interaktionsaufforderung | Allgemein / Kommentare anregen | Offene Frage für Kommentare | „Welche weiteren kontraintuitiven wissenschaftlichen Fakten kennst du? Schreib's in die Kommentare!“ |
| Haken fürs Abonnieren | Serien / Abonnentenwachstum | Nächsten Inhalt teasern, zum Abonnieren auffordern | „Im nächsten Video erklären wir, warum die Zunge im Winter an Metall kleben bleibt. Abonniere, um nichts zu verpassen!“ |
| Wert-Erweiterung | Praktische Lebensbereiche | Ergänze praktische Anwendungsszenarien | „Dieses Prinzip kann man zu Hause nutzen… sehr praktisch“ |
Auswahlprinzip: Kurze Videos bevorzugen Zusammenfassung & Verstärkung (schneller Abschluss); Mittlere bis lange Videos bevorzugen eine Kombination aus Interaktionsaufforderung + Zusammenfassung; Serien bevorzugen Haken fürs Abonnieren; Lebensnahe Inhalte bevorzugen Wert-Erweiterung.
Schritt 5: Formel zur Anpassung an das Längenformat
Passe die Strukturdichte und den Rhythmus automatisch an die Gesamtdauer an:
| Längenformat | Strukturformel | Merkmal |
|---|---|---|
| 15-30 Sek. Ultra-Kurz | Hook (0-3s) + Kernaussage + Minimale Erklärung (3-25s) + Interaktiver Abschluss (25-30s) | Keine komplexe Argumentation, eine Aussage + eine Erklärung, sehr schneller Rhythmus, primär kognitive Wirkung |
| 1-3 Minuten Mittel-Lang | Starker Hook-Einstieg → 2-3 Kernwissenspunkte / Experimentierschritte → Jeder Punkt mit visuellem Material → Zusammenfassung + Aufforderung | Mittlere Informationsdichte, vollständige Logikkette, das gängigste Format für Wissenschaftskanäle |
| 3-5 Minuten Lang | Starke Spannung Einführung → Hintergrundaufbau → ca. 3 Kernargumente → Tiefgehende Analyse → Zusammenfassende Verstärkung | Geeignet für professionelle Nischen (Astronomie / Maschinenbau / Medizin), hält durch inhaltliche Tiefe, setzt alle 30 Sekunden einen kleinen Höhepunkt, um Wegwischen zu verhindern |
Schritt 6: Genre-Strukturvarianten
Passe die Struktur je nach Genre an:
| Genre | Strukturvariante | Kern |
|---|---|---|
| Kaltes Wissen | Kontraintuitive Frage → Direkte Antwort → 1-2 Detailbelege → Interaktionsfrage | Schnell, ungewöhnlich, unterhaltsam, keine tiefe Argumentation, primär „Hätte ich nicht gedacht“-Überraschung |
| Wissenschaftliche Experimente | Frage stellen → Materialien zeigen → Experiment durchführen → Phänomen in Zeitlupe → Prinzip erklären → Lebensanwendung | Visuelle Wirkung priorisieren, Prinzipien umgangssprachlich, Bilder statt lange Texte |
| Leben / Gesundheit | Schmerzpunktszenario einführen → Häufige Irrtümer → Korrekte Lösung → Wissenschaftliche Erklärung → Handlungsempfehlung | Lebensnah, zuerst Schmerzpunkt treffen, dann Lösung bieten, Praktikabilität und Überzeugungskraft stärken |
| Geistes / Geschichte | Kuriose Frage am Anfang → Geschichtenartiges Erzählen → Wissenseinschübe → Zusammenfassende Verstärkung | Wissen durch Geschichten vermitteln, belehrenden Ton vermeiden, Inhalt interessanter gestalten |
Strukturelle Bonusregeln (für das gesamte Video)
- Untertitel-Verstärkung: Kernaussagen und Aufzählungspunkte mit auffälligen Untertiteln hervorheben, Verständniskosten senken; Schlüsselzahlen / Schlüsselwörter vergrößern oder farblich ändern.
- Rhythmus-Kontrolle: Alle 10-15 Sekunden einen Informationspunkt oder ein Bild wechseln, Langeweile durch lange Einstellungen vermeiden; bei kurzen Videos alle 3-5 Sekunden ein Bild.
- Visualisierung priorisieren: Was durch Animation, Experimente, Diagramme gezeigt werden kann, nicht nur durch Sprechen erklären; was bildlich ausgedrückt werden kann, nicht mit Text überladen.
- Ansprache in der zweiten Person: Während des gesamten Videos mit „du“ erzählen, damit der Zuschauer das Gefühl hat, das Wissen erklärt ihn selbst, nicht, dass er eine Geschichte über andere verfolgt.
Ankerwort-getriebene klassische Höhepunkt-Vorlage (präzise auf Frames, wird bei starkem Rhythmus/Beat-Matching aktiviert)
Wenn der Benutzer einen starken Rhythmus, Beat-Matching, Ausbrüche oder einen dokumentarischen Erzählstil wünscht, aktiviere diese Vorlage. Der Kern: Das gesamte Video dreht sich um ein „Ankerwort“, das bei Sekunde 17 einen schweren Beat-Ausbruchspunkt setzt, sodass sich der Zuschauer auf dem Höhepunkt der Emotionen an das Kernkonzept erinnert.
Schritt 1: Finde zuerst das Ankerwort (muss vor dem Schreiben jeglichen Texts erfolgen)
Das Ankerwort ist der „Nagel“ des gesamten Videos: 2～6 Zeichen, das ist die Situation, Verwirrung oder der kontraintuitive Moment des Prinzips im Leben des Zuschauers – nicht der Fachbegriff selbst.
Drei Kriterien für ein gutes Ankerwort:
- Identifikation: Der Zuschauer denkt sofort „Das bin ich“;
- Zusammenfassend: Dasselbe Wort kann das gesamte Prinzip zusammenfassen;
- Umkehrbar: Es kann am Ende neu definiert werden – am Anfang ist es ein Problem, am Ende wird es zu Verständnis, Erleichterung oder Stärke.
Ankerwort-Beispiele:
| Prinzip | Ankerwort | Anfang (Problem) | Ende (Wendung) |
|---|---|---|---|
| Bewegungseffekt | Feststecken | Rennst du hektisch und bleibst doch am gleichen Fleck | Verstehst die Natur der Bewegungsillusion |
| Versunkene Kosten | Nicht loslassen können | Kannst nicht loslassen, versinkst immer tiefer | Erkennt die Kraft des rechtzeitigen Stoppens |
| Überlebendenverzerrung | Die unsichtbaren Menschen | Siehst nur die Überlebenden, ignorierst die schweigende Mehrheit | Lernst die übersehene Wahrheit zu sehen |
Schritt 2: Hook-Phase (0～16.4 Sekunden)
Kernprinzip: Beschreibe zuerst die Situation des Zuschauers, dann präsentiere das Wissen. Wissen dient dazu, „dich“ zu erklären.
- Beginne nicht mit Geschichte oder Fachbegriffen; Geschichte, Personen, Experimente alle nach dem Höhepunkt.
- Fester Satz für den ersten Satz: Schreibe das Paradoxon oder die Verwirrung, die der Zuschauer gerade erlebt, in der zweiten Person. Feste Formel: „Du hast schon…, warum noch…?“
- Die Hook-Phase besteht aus Bildsequenzen: 3～4 schnell wechselnde Bilder, jede Sequenz ca. 3 Sekunden, dasselbe Kernphänomen in verschiedenen Maßstäben wiederholen (Individuum → Natur → Gesellschaft).
Schritt 3: Schwerer Beat-Höhepunkt (Sekunde 17, präzise auf Frames)
Bei 16.5～16.9 Sekunden gibt es ein „Atemholen“ (fast lautlos), bei 17.0 Sekunden schlägt der schwere Beat ein. Das Bild-Matching wird streng durchgeführt:
| Zeitpunkt | Bildaktion | Audio-Matching |
|---|---|---|
| 16.4～16.9 | Das gesamte Bild wird dunkler, alle Elemente blenden aus | Atemholen (fast lautlos) |
| 16.9～17.0 | Etwa 3 Frames Stillstand | Völlige Stille |
| 17.0 | Die Seite leuchtet plötzlich auf oder eine Tintenexplosion (passend zum visuellen Stil des gesamten Videos); das riesige Ankerwort erscheint gleichzeitig (etwa 1/3 der Bildbreite); ein Kreis von Tintenspuren oder ein Lichthof breitet sich vom Zentrum nach außen aus | Schwerer Beat schlägt ein |
| 17.6 | Unter dem Ankerwort erscheint eine kleine Zeile: Fachbegriff (Chinesisch/Englisch) | Nachklang |
| 17.6～ca. 20 | Bild halten, nur eine ganz leichte Atembewegung (Ankerwort leicht skalieren / Lichtpulsation) | Voice-Over pausiert, leise halten |
Schritt 4: Wissenschaftliche Erklärungsphase (ca. 20 Sekunden bis kurz vor Ende)
Kernziel: Erkläre das Prinzip hinter dem Ankerwort klar, sodass der Zuschauer von „Verwirrung“ zu „Erleichterung“ gelangt. Geschichte, Personen, Experimente werden hier ausgeführt, aber alle dienen der Erklärung, „warum du diese Verwirrung erlebst“.
Organisationsweise der wissenschaftlichen Erklärung (automatische Auswahl basierend auf dem Prinzip-Typ):
| Organisationsweise | Anwendungsszenario | Logikkette |
|---|---|---|
| Punkt-für-Punkt Erklärung | Prinzipien, Allgemeinwissen | Kernursache nennen → 2-3 Punkte zum Mechanismus erklären → Jeder Punkt mit einem Bild + einem Untertitel |
| Schrittweise Erklärung | Phänomenerklärung | Oberflächliches Phänomen → Mittlere Ursache → Tieferliegendes Prinzip → Warum es dich betrifft |
| Experimentelle Verifikation | Praktische / Harte Wissenschaft | Hypothese aufstellen → Experiment durchführen → Phänomen zeigen → Prinzip erklären (mit Bezug zum Ankerwort) |
Feste Textanforderungen:
- Durchgängig zweite Person: Verwende „du“ für die Erzählung, jeder Satz muss beim Zuschauer das Gefühl erzeugen „Oh, also war meine bisherige Verwirrung auf diese Ursache zurückzuführen“;
- Bezug zum Ankerwort: Alle 2-3 Sätze auf das Ankerwort zurückkommen; nicht vom Thema abschweifen; das Ankerwort ist der rote Faden des gesamten Videos, die Erklärungsphase zieht diesen Faden straff;
- Umgangssprache priorisieren: Fachbegriffe wurden bereits beim Höhepunkt gezeigt, hier alles in einfachen Worten erklären – „einfach gesagt“, „stell dir vor“, „zum Beispiel“; verboten, Fachvokabular zu häufen;
- Rhythmuskonsistenz: Alle 3-5 Sekunden ein Bild wechseln, gleicher Rhythmus wie in der Hook-Phase, nicht plötzlich langsamer werden;
- Untertitel-Verstärkung: Kernaussagen, Schlüsselzahlen, Aufzählungspunkte mit auffälligen Untertiteln hervorheben, Verständniskosten senken.
Beispieltext für die wissenschaftliche Erklärungsphase (am Beispiel „Bewegungseffekt / Feststecken“):
20-23s [Erklärung 1] Du starrst 30 Sekunden lang auf einen sich drehenden Kreis, hältst an und siehst auf eine ruhige Wand – die Wand bewegt sich → Untertitel: Die Augen sind zuerst „müde“ 23-26s [Erklärung 2] Das liegt daran, dass deine Netzhautzellen die ganze Zeit in eine Richtung elektrische Impulse gesendet haben. Wenn du aufhörst, federn sie trägheitsbedingt zurück → Untertitel: Die Trägheit der Sehnerven 26-29s [Erklärung 3] Obwohl du also stillstehst, hast du das Gefühl, die Welt bewegt sich in die entgegengesetzte Richtung → Untertitel: Du bewegst dich nicht, die Augen „lügen“ 29-32s [Erklärung 4] Dieses Phänomen heißt Bewegungsnachwirkung. Alle Sinnessysteme haben eine ähnliche „Ermüdungsrückständigkeit“ – die Ohren haben nach längerem Lärm Halluzinationen, die Hände denken nach längerem Anfassen von kaltem Wasser, das Wasser werde wärmer → Untertitel: Nicht nur die Augen, der ganze Körper hat „Trägheit“
Schritt 5: Schluss-Wendung des Ankerworts (letzte 5-8 Sekunden)
Kernziel: Das Ankerwort von „Problem“ zu „Verständnis / Erleichterung / Stärke“ wenden und einen emotionalen Kreis schließen.
Festes Format:
- Der letzte Satz muss das Ankerwort neu definieren – am Anfang war es das Problem des Zuschauers, am Ende wird es zu Stärke oder Einsicht;
- Satzvorlagen: „Eigentlich ist … nicht dein Fehler, sondern …“ / „Wenn du das verstanden hast, bist du nicht länger …“ / „Das sogenannte … ist eigentlich …“;
- Das Bild kehrt zu einer Szene zurück, die auf die Hook-Phase verweist (z. B. Hook-Phase war ein Schreibtisch, Ende auch ein Schreibtisch, aber mit anderer Stimmung).
Beispiel für Schluss-Wendung (am Beispiel „Feststecken“):
32-36s [Schluss-Wendung] Eigentlich ist „Feststecken“ nicht deine mangelnde Anstrengung, sondern dein Sinnessystem macht einen kleinen Scherz mit dir. Wenn du das verstanden hast, wirst du nicht länger ängstlich sein, weil du dich bewegst, aber keine Fortschritte siehst – du musst nur eine Pause machen und deinen Augen eine Ruhepause gönnen. Bild: Langsames Ausblenden aus dem wirbelnden Strudel, zurück zum ruhigen Schreibtisch vom Anfang, Sonnenlicht auf der Tischplatte.
Eingabeformat
Der Benutzer gibt an: Gesamtdauer, Thema / Wissenskern, optional Genre / Farbpalette / Stilpräferenz. Der Agent wählt automatisch den Hook-Typ, die Hauptlogik und die End-Art aus und generiert ein vollständiges Storyboard (Zeitstempel + Bild + Untertitel + Strukturmarkierung).
Ausgabeformat des Storyboards: Jede Einstellung enthält eine Markierung für [Hook-Typ] [Hauptlogik - Punkt N] [End-Art], damit der Benutzer auf einen Blick die Strukturauswahl sieht.
Beispiel 1 (40 Sekunden, Genre: Kaltes Wissen, Thema: Entropie):
Strukturauswahl: Tiefgründige Frage-Hook + Schrittweise Schlussfolgerung als Haupterklärung + Zusammenfassung und Verstärkung als Ende (angepasste Kurzversion für das 1-3 Minuten-Format) 0-4s [Hook·Tiefgründige Frage] Du hast dein Zimmer blitzblank geputzt, warum ist es nach einer Woche wieder chaotisch? 4-7s [Hauptlogik·Schritt 1·Individuelle Ebene] Der gerade aufgeräumte Schreibtisch, die Bücher rutschen heimlich zum Rand → Untertitel: Dinge neigen von selbst zur Unordnung 7-10s [Hauptlogik·Schritt 2·Naturebene] Ein Tintentropfen fällt in klares Wasser, breitet sich langsam aus, kann nie wieder zusammengeführt werden → Untertitel: Moleküle hören nie auf, sich auszubreiten 10-13s [Hauptlogik·Schritt 3·Gesellschaftsebene] Eine Straße, die niemand fegt, eine Blattschicht legt sich auf die nächste → Untertitel: Ordnung bricht zusammen, sobald sie nicht mehr aufrechterhalten wird 13-16s [Hauptlogik·Grundprinzip zusammenfassen] Chaos ist also der Standardzustand der Welt; Ordnung ist die Ausnahme, die man mit Geld und Mühe aufrechterhalten muss. 16-34s [Hauptlogik·Historisches Material nachträglich] Clausius formulierte 1865 die Entropie, die Formel auf Boltzmanns Grabstein, eine Tasse kaltes Wasser kocht nie von selbst… 34-40s [Ende·Zusammenfassung und Verstärkung] Gegen die Entropie anzukämpfen, ist die lebenslange Praxis eines jeden Menschen.
Beispiel 2 (25 Sekunden, Genre: Leben & Gesundheit, Thema: Eiswasser trinken vs. warmes Wasser trinken):
Strukturauswahl: Kontraintuitive Schlussfolgerung-Hook + Widerlegung und Korrektur als Haupterklärung + Interaktionsaufforderung als Ende (angepasst für das Ultra-Kurzformat 15-30 Sekunden) 0-3s [Hook·Kontraintuitive Schlussfolgerung] Eiswasser schadet dem Magen? Diese Behauptung hat dich jahrzehntelang getäuscht. 3-8s [Hauptlogik·Irrtum widerlegen] Viele Leute denken, Eiswasser reizt den Magen-Darm-Trakt → Untertitel: Eiswasser = Magenschaden? 8-15s [Hauptlogik·Schlussfolgerung aufstellen] Die Wahrheit ist: Die Magentemperatur bleibt konstant bei 37°C, Eiswasser wird sofort erwärmt, wenn es hineinkommt, es kann den Magen gar nicht schädigen → Untertitel: Der Magen hat ein eigenes Thermostatsystem 15-20s [Hauptlogik·Wahrheit wird umgekehrt] Was dem Magen wirklich schadet, ist: Auf nüchternen Magen viel Eis trinken + langfristig unregelmäßig essen → Untertitel: Schlechte Gewohnheiten sind der wahre Schuldige 20-25s [Ende·Interaktionsaufforderung] Trinkst du normalerweise Eiswasser oder warmes Wasser? Schreib's in die Kommentare!
Vollständige Beispielprojekte (Verzeichnis examples/)
Die Fähigkeit enthält zwei sofort testbare, vollständige Beispielprojekte. Kopiere sie in dein Projekt, um den gesamten lint / preview / render-Workflow auszuführen:
| Beispiel | Pfad | Schreibsystem | Dauer | Stil |
|---|---|---|---|---|
| Entropie-Kurzvideo | examples/entropy-16-9/ | Punkt-für-Punkt Zerlegung (Basisvorlage) | 40s | Dunkler Wissenskarten-Stil |
| Je mehr man schläft, desto müder | examples/sleep-tired-16-9/ | Ankerwort-getriebene Höhepunkt-Vorlage (17s schwerer Beat-Ausbruch) | 40s | Medizintechnik-Stil |
Beide Beispiele sind lint-geprüft (0 Fehler, 0 Warnungen) und werden in 1920×1080 HD ausgegeben. Sie können als Referenzvorlagen für verschiedene Schreibsysteme dienen.
Feste Regeln zum Schreiben von Kompositionen
- Befolge strikt den HyperFrames-Kompositionsvertrag: Der Wurzelknoten hat
data-composition-id,data-width,data-height,data-duration; Ausschnitte verwendenclass="clip"+data-start+data-duration; Registriere eine pausierte GSAP-Timeline inwindow.__timelines["<id>"](der Key muss mit derdata-composition-iddes Wurzelknotens übereinstimmen). - 16:9 horizontal:
<meta name="viewport" content="width=1920, height=1080">, Wurzelknoten mit denselben Abmessungen; Standardausgabe 1920×1080 HD. - Lies vor dem Schreiben des Codes
references/hyperframes-contract.mdvollständig durch, um alle häufigen Lint-Fehler und GSAP-Fallen zu vermeiden. - Verwende kein
<template>um unabhängige Wurzelknoten zu umschließen; Gib keine Codefragmente aus, der Code muss vollständig und unabhängig sein. - Bei ≥2 Einstellungen verwende eine modulare Subkompositions-Architektur: Jede Szene hat eine eigene
compositions/scene-*.html(innerhalb eines<template>mit style/script/Wurzelknoten der Szene), die Haupt-index.htmlverwendetdata-composition-srcum die Szenen einzuhängen; Diedata-composition-idder Hauptdatei, diedata-composition-iddes Wurzelknotens in der Subkompositionsdatei und derwindow.__timelines-Key müssen alle identisch sein. Siehe Abschnitt 8 vonreferences/hyperframes-contract.md.
Minimales ausführbares Codebeispiel (2 Clips, direkt lauffähig)
Nachfolgend ein vollständiges minimales Beispiel einer index.html mit 2 Einstellungen, einem übergreifenden Element-Übergang und einer GSAP-Timeline-Registrierung. Verwende dies als Baseline für neue Szenen:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1920, height=1080">
<title>Entropie · Beispiel</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #0a0a0f; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; }
/* Wurzelcontainer: 1920×1080, 16:9 */
.composition {
position: relative;
width: 1920px;
height: 1080px;
overflow: hidden;
background: #0a0a0f;
}
/* Clip-Ausschnitt: absolute Positionierung, volle Fläche, Sichtbarkeit wird vom Framework gesteuert */
.clip {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* Einstellung 1: Chaotischer Schreibtisch */
#scene-desk { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); }
#scene-desk .book {
position: absolute;
width: 80px;
height: 120px;
background: #e94560;
border-radius: 4px;
left: 300px;
top: 300px;
transform-origin: center;
}
#scene-desk .subtitle {
position: absolute;
left: 80px;
bottom: 80px;
color: #fff;
font-size: 36px;
font-weight: 500;
opacity: 0;
}
/* Einstellung 2: Tintentropfen in klares Wasser */
#scene-ink { background: linear-gradient(180deg, #0f3460 0%, #16213e 100%); }
#scene-ink .drop {
position: absolute;
width: 120px;
height: 120px;
background: radial-gradient(circle, #e94560 0%, transparent 70%);
border-radius: 50%;
left: 580px;
top: 300px;
transform: scale(0);
}
#scene-ink .subtitle {
position: absolute;
left: 80px;
bottom: 80px;
color: #fff;
font-size: 36px;
font-weight: 500;
opacity: 0;
}
</style>
</head>
<body>
<!-- Wurzelknoten: data-composition-id muss mit dem Key von window.__timelines übereinstimmen -->
<div class="composition"
data-composition-id="entropy-demo"
data-width="1920"
data-height="1080"
data-duration="10">
<!-- Clip 1: 0-5 Sekunden, Schreibtischszene -->
<div class="clip" id="scene-desk" data-start="0" data-duration="5">
<div class="book" id="book"></div>
<div class="subtitle" id="desk-subtitle">Dinge neigen von selbst zur Unordnung</div>
</div>
<!-- Clip 2: 5-10 Sekunden, Tintenausbreitung (Element-Übergang: Rot des Buchs → Rot der Tinte) -->
<div class="clip" id="scene-ink" data-start="5" data-duration="5">
<div class="drop" id="ink-drop"></div>
<div class="subtitle" id="ink-subtitle">Moleküle hören nie auf, sich auszubreiten</div>
</div>
</div>
<script>
// Registriere eine pausierte GSAP-Timeline in window.__timelines
window.__timelines = window.__timelines || {};
const tl = gsap.timeline({ paused: true });
// === Szene 1: Schreibtisch (0-5s) ===
tl.from("#book", {
x: 0, y: 0, rotation: 0,
duration: 2, ease: "power2.out"
}, 0.5);
// Buch rutscht heimlich zum Rand (zeigt "Chaos")
tl.to("#book", {
x: 200, y: 100, rotation: 15,
duration: 3, ease: "power1.inOut"
}, 1);
// Untertitel einblenden
tl.from("#desk-subtitle", {
opacity: 0, y: 20,
duration: 0.5, ease: "power2.out"
}, 2);
// === Übergang: Rotes Element des Buchs → Rot der Tinte (Element-Übergang bei 5s) ===
// Die Elemente des vorherigen Clips verschwinden am Ende des Clips auf natürliche Weise, die Elemente des nächsten Clips kommen gleichzeitig herein
// Hier wird durch die Farbkorrespondenz die Illusion eines "durchgehenden Elements" erzeugt
// === Szene 2: Tintenausbreitung (5-10s) ===
tl.from("#ink-drop", {
scale: 0, opacity: 0,
duration: 0.5, ease: "power2.out"
}, 5.2);
tl.to("#ink-drop", {
scale: 4, opacity: 0.6,
duration: 4, ease: "power1.out"
}, 5.5);
tl.from("#ink-subtitle", {
opacity: 0, y: 20,
duration: 0.5, ease: "power2.out"
}, 6);
// Global registrieren
window.__timelines["entropy-demo"] = tl;
</script>
</body>
</html>
Wichtige Anmerkungen:
data-composition-id="entropy-demo"muss exakt mit dem Key vonwindow.__timelines["entropy-demo"]übereinstimmen;data-durationist in Sekunden, nicht Millisekunden;- Der Positionsparameter (zweiter Parameter) der GSAP-Timeline ist ebenfalls in Sekunden;
- Die Clip-Elemente selbst sollten nicht getweent werden (die Sichtbarkeit wird vom Framework gesteuert), tweene nur ihre Kindelemente;
- Element-Übergang: Das Element des vorherigen Clips wird in einen bestimmten Zustand transformiert/bewegt, und das Element des nächsten Clips beginnt von einer ähnlichen Position/Form, wodurch die Illusion erzeugt wird, dass "dasselbe Ding sich kontinuierlich bewegt".
Leitfaden zur Auswahl von Storyboard-Grafiken/Animationen (automatisches Matching)
Wähle bei der Erstellung basierend auf dem Kernbild des Textes jeder Einstellung automatisch die passende Grafik und Animation aus der rechten Spalte. Verwende nicht standardmäßig das Raster/Streudiagramm/Balken aus dem Beispiel.
Auswahlprozess
- Analysiere den Text jeder Einstellung, extrahiere das Kernbild (z. B. "Wachstum/Chaos/Möglichkeit/Ordnung/Netzwerk/Zyklus/Atmosphäre") und die emotionale Intensität (kühl / explosiv / traumhaft / episch / cyber / heilend usw.);
- Wähle gemäß der Tabelle 1 Hauptgrafik zur Darstellung des Kernbildes und füge bis zu 5 unterstützende Akzente hinzu (Partikel, Lichteffekte, Dekorationslinien, Hintergrundtexturen, Eckensymbole, Glühen, Lichthöfe, geometrische Fragmente usw.), Animationen gemäß der Tabelle; Anzahl und Art der Akzente dienen der Stimmung des Textes, jede Einstellung muss nicht überladen sein;
- Überprüfe die Determiniertheit: Bevorzuge CSS/HTML-realistische Lösungen; Komplexe Grafiken wie Fraktale/Zelluläre Automaten/3D/Shader/Texturen/Partikel müssen deterministisch implementiert werden (fester Seed, vorberechnete Arrays, verboten:
Math.random, Echtzeit-Uhr, Netzwerkanfragen), Datencharts verwenden illustrative Daten; - Grafiken müssen im 16:9-Safe-Bereich liegen (Rundum ≥64px), dürfen die Leinwand nicht überragen; Visuelle Dichte, Effektstärke, Farbsättigung werden durch die Textstimmung bestimmt, keine universellen "Zurückhaltungs"-Beschränkungen.
Mapping Semantik → Grafik → Animation (häufig verwendet)
| Einstellungsbild | Empfohlene Grafik | Empfohlene Animation |
|---|---|---|
| Wachstum / Ordnung aufbauen | Balkendiagramm, Treppe, Baumwachstum, Goldener Schnitt | Wachstum von unten, schrittweise Erhöhung |
| Chaos / Entropie / Unordnung | Rasterquadrate, Streudiagramm, Voronoi-Fragmente, fraktale Risse | Driften, Ausbreiten, Zersplittern |
| Möglichkeit / Verzweigung | Baumdiagramm, Streudiagramm, Sehnen, Mindmap | Nach außen divergieren, verzweigtes Wachstum |
| Zyklus / Wiederholung | Ringdiagramm, Kreisring, Wellenform, Zykloide | Drehen, Pulsieren, Hin und Her |
| Beziehung / Netzwerk | Netzwerktopologie, Wissensgraph, Kraftgerichteter Graph | Knoten verbinden, progressive Aufleuchtung |
| Zeit / Prozess | Liniendiagramm, Flächendiagramm, Zeitachse | Strichzeichnung wachsen, Spur verlängern |
| Vergleich / Verteilung | Kuchendiagramm, Ringdiagramm, Radardiagramm, Boxplot | Sektoren öffnen, Element für Element präsentieren |
| Raum / Struktur | Isometrisches Raster, Punktwolke, 3D-Drahtgitter | Schichtweiser Aufbau, Dreheingang |
| Atmosphäre / Abstrakt | Rauschtextur, Welleninterferenz, Stehwellen, Partikelstrom | Fließen, Wogen, Zerstreuen |
Den vollständigen Kandidatenkatalog (9 Hauptkategorien: Basisgeometrie, Datencharts, fraktale generative Kunst, Simulation & zelluläre Automaten, Pixel-Bitmaps & prozedurale Texturen, 3D-Grafiken, Strukturdiagramme/Beziehungsdiagramme, Textgrafiken, dynamische Grafiken) und die deterministischen Implementierungsbeschränkungen findest du in Abschnitt 7 von references/hyperframes-contract.md.
Stil des Vibe Video Showcase (16:9 horizontal)
Kernprinzip: Der visuelle Stil wird vom Text bestimmt, strebe nach Coolness