Was macht HyperFrames Einstiegspunkt?
HyperFrames rendert Videos aus HTML – eine Komposition ist eine HTML-Datei, deren DOM die zeitliche Steuerung mit data-*-Attributen deklariert, deren Animations-Laufzeit durchsuchbar ist und deren Medienwiedergabe vom Framework gesteuert wird. Der vollständige Autorenvertrag befindet sich in /hyperframes-core; lies ihn, bevor du Kompositions-HTML schreibst.
1. Vom Projektstatus starten
Wende die erste zutreffende Zeile an; werte keine niedrigeren Statuszeilen aus:
| Status | Aktion |
|---|---|
| Expliziter Port einer bestehenden Remotion-Quelle zu HyperFrames | Lese references/routes/remotion-to-hyperframes.md, leite dann direkt zu diesem Workflow weiter. Überspringe die Intent-Ebene. |
| Spezifische Operation an einem bestehenden HyperFrames-Projekt: inspizieren, diagnostizieren, validieren, Vorschau anzeigen, rendern, veröffentlichen oder batch-rendern | Führe nur diese Operation aus. Überspringe Intent und Workflow-Routing; lade /hyperframes-cli und alle erforderlichen Domänen-Skills. |
| Spezifische Bearbeitung eines bestehenden Projekts | Nimm die Änderung vor. Führe die Intent-Ebene nicht aus. |
BRIEF.md existiert | Lese workflow und flow. Führe diesen Workflow aus; flow: companion wird immer in /general-video ausgeführt. Stelle keine Brief-Fragen. |
Kein Brief, aber hyperframes.json oder STORYBOARD.md existiert | Setze mit Projektdateien und gespeicherten Präferenzen fort. Leite den zugehörigen Workflow aus vorhandenen Artefakten ab. Wenn er nicht eindeutig ermittelt werden kann, stelle eine einzige Routing-Frage; führe kein Intent-Interview durch. |
| Neuerstellung | Führe die Intent-Ebene aus – references/intent-interview.md – leite dann einmalig mit der Tabelle in § 2 weiter. |
Wenn eine neue Anfrage kein Thema oder keine Eingabe nennt, frage nach dem Thema des Videos, bevor du weiterleitest. Überprüfe Präferenzen und Rezepte, bevor du etwas fragst (references/intent-interview.md, Schritt 1). Eine figma.com-Eingabe oder ein benanntes Rezept ändert die Aufnahme, nicht das Routing – der Abschnitt „Angepasste orthogonale Eingaben“ des Interviews behandelt beides.
Halte die CLI des Projekts aktuell
Ein eingerüstetes Projekt fixiert hyperframes@<version> in seinen package.json-Skripten, sodass Renderings reproduzierbar bleiben; die Fixierung wird nie automatisch aktualisiert, und eine fixierte Ausführung einer älteren CLI gibt keine Warnung dazu aus. Wenn du ein Projekt fortsetzt, dessen Skripte eine Fixierung enthalten, prüfe einmal vor dem ersten rendern-beeinflussenden Befehl:
npx hyperframes@latest upgrade --project . --check
Die Prüfung ist schreibgeschützt und meldet die Fixierung im Vergleich zur neuesten Version; behalte das explizite . bei – bei älteren CLI-Versionen verbraucht ein nacktes --projekt gefolgt von einem weiteren Flag dieses Flag als Verzeichniswert. Wenn sie meldet, dass das Projekt hinten liegt – oder eine CLI-Ausgabe dies bereits zeigt (der stderr-Hinweis This project pins hyperframes@… (latest …) oder _meta.updateAvailable: true in einem --json-Ergebnis eines fixierten Skripts) – wende npx hyperframes@latest upgrade --project . an und überprüfe dann mit npx hyperframes check. Eine bestandene Prüfung bestätigt, dass die Kompositionen des Projekts noch in der neuen Version validieren – nicht, dass die gerenderte Ausgabe bildidentisch zur alten Fixierung ist – daher ist eine erfolgreiche Aktualisierung niemals still: Nenne die alte und neue Version in der Zusammenfassung des Laufs. Ein Projekt ohne Komposition benötigt keine Überprüfung. Wenn die Prüfung fehlschlägt, mache die package.json-Änderung rückgängig, fahre mit der fixierten Version fort und berichte, auf welcher Version das Projekt bleibt und warum. Reagiere auf das Signal, anstatt es an den Benutzer weiterzuleiten; lasse eine aktualisierte Fixierung niemals ungeprüft.
2. Neue Erstellungen weiterleiten
Verwende die erste zutreffende Zeile. Ordne das angeforderte Ergebnis zu, nicht ein beiläufig genanntes Wort oder einen Dateityp.
| Priorität | Anfrage | Workflow |
|---|---|---|
| 1 | Expliziter Port einer bestehenden Remotion-Quelle | /remotion-to-hyperframes |
| 2 | Erstellen einer Präsentation, Pitch-Deck oder navigierbaren interaktiven Deck | /slideshow |
| 3 | Einfache Untertitel zu vorhandenem Sprechermaterial hinzufügen, ohne es zu ändern | /embedded-captions |
| 4 | Gestaltete Grafik-Overlays zu vorhandenem Sprecher-, Interview- oder Podcast-Material hinzufügen, ohne das Material zu ändern | /talking-head-recut |
| 5 | Ein taktsynchrones Video aus einem Musiktitel erstellen, ohne Erzählung oder Website-Erfassung | /music-to-video |
| 6 | Ein explizit kurzes, unerzähltes, bewegungsorientiertes Element erstellen, typischerweise unter 10s | /motion-graphics |
| 7 | Erklären eines GitHub-Pull-Requests oder einer Code-Änderung anhand einer PR-Referenz | /pr-to-video |
| 8 | Vermarkten oder Vorstellen einer Website, Produktseite, App oder Firma anhand einer URL oder eines standortspezifischen Briefs | /product-launch-video |
| 9 | Erklären eines Themas, Artikels oder von Notizen mit erfundenen visuellen Elementen ohne Produkt- oder Website-Erfassung | /faceless-explainer |
| 10 | Jedes andere benutzerdefinierte Video oder jede andere Komposition | /general-video |
Bevor du die Route finalisierst, lies references/routes/<workflow>.md – eine kleine Datei pro Route: der kanonische Vertrag für Eingabe/Ausgabe/Auslöser (verfügbar bevor verzögert installierte Workflow-Skills vorhanden sind) plus den Interview-Einstieg dieser Route. Wenn der Kandidat seinen Vertrag nicht erfüllt, setze das Routing fort, anstatt die Übereinstimmung zu erzwingen. Lies nur die Datei des passenden Workflows.
Häufige Mehrdeutigkeiten auflösen
- Ein kurzer animierter Titel, Logo-Sting, Statistik-Hit, Chart-Hit, Karten-Hit oder eigenständiger Lower-Third ist
/motion-graphics, wenn er unerzählt ist und die Bewegung die Botschaft ist. Eine statische Titelcard, erzählte Sequenz, längere Montage oder benutzerdefinierte Schleife ist/general-video. - Ein explizit kurzes Bewegungsgrafik kann eine URL, einen Tweet, einen Artikel oder einen Screenshot als Quellmaterial verwenden. Eine allgemeine „Erstelle ein Video von dieser Site“-Anfrage ist
/product-launch-video. - Vorhandenes Material mit Untertiteln leitet zu
/embedded-captions; Material mit gestalteten Informationskarten leitet zu/talking-head-recut. Zeitliche Neuanpassung, Neuordnung, Farbänderung, Neurahmung oder Remixing von Material ist eine benutzerdefinierte Bearbeitung und fällt auf/general-videozurück. - Eine Musikdatei wählt
/music-to-videonur dann, wenn ihr Beat-Raster das Stück antreibt. Musik, die als Hintergrund verwendet wird, überschreibt nicht den themenbezogenen Workflow. - „Ich möchte ein Storyboard“ ändert den Überprüfungsprozess, nicht den Workflow. Ohne weiteres Routing-Signal verwende
/general-video. Ein bestätigtes skizziertes Board kann selbst das angeforderte Ergebnis sein; die Überprüfungsschleife definiert diesen Stoppunkt. - Spezialisierte narrative Workflows unterstützen bis zu etwa 3 Minuten und sind bei 30–90 s am stärksten. Leite ein deutlich längeres Stück zu
/general-videoweiter. Die Länge überschreibt niemals einen expliziten Port, ein Deck, Untertitel, Overlay oder musikgesteuertes Ergebnis.
3. Einmalig weiterleiten, dann verlassen
Bei Neuerstellungen führt die Intent-Ebene (references/intent-interview.md) die vollständige Konversation durch – Gedächtnis, Triage, Pitch-Runde, Muss-Anforderungen, Lauf-Form, Übergabe – und endet mit dem Schreiben von BRIEF.md. Der Brief ist das einzige Routing-Artefakt, das der Workflow liest; nichts später öffnet dieses Skill oder das Interview erneut. Beantworte jede spätere Frage „Was hat die Route verlangt?“ aus BRIEF.md.
4. Den Workflow installieren und betreten
Bevor du den ausgewählten Workflow liest, installiere oder aktualisiere ihn und die Kern-Domänen-Skills:
npx hyperframes skills update <workflow-name>
Verwende den einfachen Namen ohne /. Wenn der Befehl fehlschlägt, zeige den Fehler an; rekonstruiere den Workflow nicht aus dem Gedächtnis. Alles andere zur Installation – die Aufteilung in Kern und verzögerte Skills, was init aktualisiert, Diagnose, CI-Opt-out und der CLI-freie Fallback – steht in references/skill-lifecycle.md.
5. Domänen-Skills bei Bedarf laden
| Bedarf | Skill |
|---|---|
| Kompositionsstruktur, Timing-Attribute, Spuren, Variablen, Determiniertheit | /hyperframes-core |
| Bewegungsregeln, Szenen-Blaupausen, Übergänge, Laufzeit-Adapter | /hyperframes-animation |
Suchbare GSAP, CSS, Anime.js, WAAPI, FLIP, Pfade, Masken, SVG, 3D-Keyframes oder hyperframes keyframes-Diagnostik | /hyperframes-keyframes |
| Design-Spezifikationen, Konzept, Palette, Typografie, Erzählung, Beat-Planung | /hyperframes-creative |
| Bilder, Icons, Logos, Audio, Untertitel, Grade, LUTs, wiederverwendbare Medien | /media-use |
| Init, Lint, Check, Snapshots, Compare, Batch Render, Studio, Render, Publish oder Diagnostik | /hyperframes-cli |
| Registry-Blöcke und -Komponenten | /hyperframes-registry |
| Figma-Assets, Tokens, Komponenten oder Storyboard-Frames als rekonstruierte Bewegung | /figma |
Breites Feedback darüber, wie fotografisches Medium aussieht oder sich verhält, wird ebenfalls an /media-use weitergeleitet, selbst wenn der Benutzer nie „Farbkorrektur“ oder „Effekt“ sagt: Behebe dunkles/flaches/langweiliges Material, stylisiere einen Clip, verstecke ein Gesicht oder verbessere eine Medien-Enthüllung. Lese ../media-use/references/media-treatments.md, bevor du eine Behandlung bearbeitest; es regelt, wie Material behandelt wird, niemals, ob Medien verwendet werden dürfen. Ersetze keine generische LUT, keinen CSS-Filter/Overlay oder keine Deckkraft-Tween für ein bestehendes kanonisches Behandlungsprimitiv. Behalte Text-/Layout-/Bewegungs-Only-Änderungen in ihrer eigenen Domäne.
Während eines Builds mit wichtigen fotografischen Medien füge einen fundierten Medien-Polish-Scan in die finale Qualitätsprüfung ein; geeignetes Medium unverändert zu lassen ist ein gültiges Ergebnis.
Domänen-Skills übernehmen niemals die Verantwortung für das gesamte Ergebnis. Lade nur das, was der aktive Workflow benötigt.