HyperFrames Einstiegspunkt
HyperFrames rendert Video aus HTML – eine Komposition ist eine HTML-Datei, deren DOM das Timing mit data-*-Attributen deklariert, deren Animationslaufzeit suchbar 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; bewerte keine niedrigeren Statuszeilen:
| Status | Aktion |
|---|---|
| Expliziter Port einer vorhandenen Remotion-Quelle zu HyperFrames | Lese references/routes/remotion-to-hyperframes.md und leite dann direkt an diesen Workflow weiter. Überspringe die Intentschicht. |
| Spezifische Operation an einem bestehenden HyperFrames-Projekt: inspizieren, diagnostizieren, validieren, in der 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änenskills. |
| Spezifische Bearbeitung eines bestehenden Projekts | Führe die Bearbeitung durch. Führe die Intentschicht 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 Briefing-Fragen. |
Kein Briefing, aber hyperframes.json oder STORYBOARD.md vorhanden | Setze aus den Projektdateien und aufgezeichneten Präferenzen fort. Leite den zugehörigen Workflow aus vorhandenen Artefakten ab. Wenn er nicht eindeutig bestimmt werden kann, stelle eine reine Routing-Frage; führe das Intent-Interview nicht aus. |
| Neuerstellung | Führe die Intentschicht aus – references/intent-interview.md – und leite dann einmal mit Tabelle § 2 weiter. |
Wenn eine neue Anfrage das Thema oder die Eingabe nicht identifiziert, frage, worum es im Video geht, 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 „Anpassen orthogonaler Eingaben“ des Interviews behandelt beides.
Halte die CLI des Projekts aktuell
Ein neu erstelltes Projekt fixiert hyperframes@<version> in seinen package.json-Skripten, damit Renderings reproduzierbar bleiben; die Fixierung wird nie von selbst aktualisiert, und ein fixierter Durchlauf einer älteren CLI gibt dazu keine Warnung aus. Wenn du ein Projekt fortsetzt, dessen Skripten eine Fixierung tragen, prüfe einmal vor dem ersten rendernbeeinflussenden Befehl:
npx hyperframes@latest upgrade --project . --check
Die Prüfung ist schreibgeschützt und zeigt die Fixierung im Vergleich zur neuesten Version an; behalte das explizite . – bei älteren CLI-Versionen verbraucht ein bloßes --project gefolgt von einem weiteren Flag dieses Flag als Verzeichniswert. Wenn gemeldet wird, dass das Projekt hinterherhinkt – oder eine andere CLI-Ausgabe dies bereits anzeigt (der stderr-Hinweis This project pins hyperframes@… (latest …) oder _meta.updateAvailable: true in einem --json-Ergebnis aus einem fixierten Skript) – wende npx hyperframes@latest upgrade --project . an und überprüfe dann mit npx hyperframes check. Eine erfolgreiche Prüfung bestätigt, dass die Kompositionen des Projekts mit der neuen Version noch gültig sind – nicht, dass die gerenderten Ausgaben mit der alten Fixierung frame-identisch sind –, daher ist ein erfolgreicher Versionssprung nie still: nenne die alte und neue Version in der Zusammenfassung des Durchlaufs. 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 dem Benutzer zu melden; lasse niemals eine aktualisierte Fixierung ungeprüft.
2. Neuerstellung weiterleiten
Verwende die erste zutreffende Zeile. Ordne das angeforderte Ergebnis zu, nicht ein beiläufig erwähntes Wort oder einen Dateityp.
| Priorität | Anfrage | Workflow |
|---|---|---|
| 1 | Explizites Portieren einer bestehenden Remotion-Quelle | /remotion-to-hyperframes |
| 2 | Erstellen einer Präsentation, eines Pitch-Decks oder eines navigierbaren interaktiven Decks | /slideshow |
| 3 | Hinzufügen einfacher Untertitel oder Bildunterschriften zu vorhandenem Sprechermaterial, ohne es zu verändern | /embedded-captions |
| 4 | Hinzufügen gestalteter Grafik-Overlays zu vorhandenem Sprecher-, Interview- oder Podcast-Material, ohne das Material zu verändern | /talking-head-recut |
| 5 | Erstellen eines beatsynchronen Videos aus einer Musikspur, ohne Erzählung oder Website-Erfassung | /music-to-video |
| 6 | Erstellen eines explizit kurzen, unerzählten, bewegungsorientierten Einheit, 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, eines Produkts, einer App oder eines Unternehmens anhand einer URL oder eines seitenbezogenen Briefings | /product-launch-video |
| 9 | Erklären eines Themas, Artikels oder von Notizen mit erfundenen Visuals ohne Produkt- oder Website-Erfassung | /faceless-explainer |
| 10 | Jedes andere benutzerdefinierte Video oder Komposition | /general-video |
Bevor du die Route endgültig festlegst, lies references/routes/<workflow>.md – eine kleine Datei pro Route: der kanonische Eingabe-/Ausgabe-/Auslösevertrag (verfügbar, bevor lazy-installierte Workflow-Skills vorhanden sind) plus den Interview-Eintrag dieser Route. Wenn der Kandidat seinen Vertrag nicht erfüllt, fahre mit dem Routing fort, anstatt die Übereinstimmung zu erzwingen. Lies nur die Datei der passenden Route.
Häufige Mehrdeutigkeiten auflösen
- Eine kurze animierte Titelcard, Logo-Sting, Stat-Hit, Chart-Hit, Map-Hit oder eigenständiger Lower-Third ist
/motion-graphics, wenn er nicht erzählt wird und die Bewegung die Botschaft ist. Eine statische Titelcard, eine erzählte Sequenz, eine längere Montage oder eine benutzerdefinierte Schleife ist/general-video. - Eine explizit kurze Bewegungsgrafik kann eine URL, einen Tweet, einen Artikel oder einen Screenshot als Quellmaterial verwenden. Eine allgemeine Anfrage „Mach ein Video aus dieser Seite“ ist
/product-launch-video. - Vorhandenes Filmmaterial mit Untertiteln wird zu
/embedded-captionsweitergeleitet; Filmmaterial mit gestalteten Infokarten wird zu/talking-head-recutweitergeleitet. Neuschnitt, Umsortierung, Neufärbung, Neurahmung oder Remix von Filmmaterial ist eine benutzerdefinierte Bearbeitung und fällt auf/general-videozurück. - Eine Musikdatei wählt
/music-to-videonur, wenn ihr Beat-Raster das Stück antreibt. Musik, die als Hintergrund verwendet wird, überschreibt die themenbezogene Route nicht. - „Ich möchte ein Storyboard“ ändert den Überprüfungsprozess, nicht den Workflow. Ohne anderes 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 am stärksten im Bereich 30–90 Sekunden. Leite ein deutlich längeres Stück zu
/general-videoweiter. Die Länge überschreibt niemals einen expliziten Port, ein Deck, eine Untertitelung, ein Overlay oder ein musikgesteuertes Ergebnis.
3. Einmal weiterleiten, dann verlassen
Bei Neuerstellungen führt die Intentschicht (references/intent-interview.md) das vollständige Gespräch – Gedächtnis, Triage, Pitch-Runde, Muss-Anforderungen, Laufform, Übergabe – und endet damit, BRIEF.md zu schreiben. Das Briefing ist das einzige Routing-Artefakt, das der Workflow liest; nichts später öffnet diese Skill-Datei oder das Interview erneut. Beantworte jede spätere Frage „Was hat die Route verlangt?“ aus BRIEF.md.
4. Workflow installieren und betreten
Bevor du den ausgewählten Workflow liest, installiere oder aktualisiere ihn und die Kern-Domänenskills:
npx hyperframes skills update <workflow-name>
Verwende den bloßen Namen ohne /. Wenn der Befehl fehlschlägt, gib den Fehler aus; rekonstruiere den Workflow nicht aus dem Gedächtnis. Alles andere zur Installation – die Aufteilung in Kern- und Lazy-Skills, was init aktualisiert, Diagnose, CI-Opt-out und den Fallback ohne CLI – befindet sich in references/skill-lifecycle.md.
5. Domänenskills bei Bedarf laden
| Bedarf | Skill |
|---|---|
| Kompositionsstruktur, Timing-Attribute, Spuren, Variablen, Determiniertheit | /hyperframes-core |
| Bewegungsregeln, Szenenbaupläne, Übergänge, Laufzeit-Adapter | /hyperframes-animation |
Suchsichere GSAP, CSS, Anime.js, WAAPI, FLIP, Pfade, Masken, SVG, 3D-Keyframes oder hyperframes keyframes-Diagnose | /hyperframes-keyframes |
| Design-Spezifikationen, Konzept, Palette, Typografie, Erzählung, Beat-Planung | /hyperframes-creative |
| Bilder, Symbole, Logos, Audio, Untertitel, Gradings, LUTs, wiederverwendbare Medien | /media-use |
| Voiceover-Schnitt, Audio-Effektketten oder Automatisierungshüllkurven auf einer Spur | /hyperframes-audio |
| Init, lint, check, snapshots, compare, batch render, Studio, render, publish oder diagnostics | /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 Filmmaterial, 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 Filmmaterial behandelt wird, niemals, ob Medien verwendet werden dürfen. Ersetze keine generische LUT, keinen CSS-Filter/Overlay und keinen Opazitätstween durch einen vorhandenen kanonischen Behandlung-Primitiv. Behalte Text-/Layout-/Bewegungs-Änderungen in ihrer eigenen Domäne.
Während eines Baus mit wichtigen fotografischen Medien, schließe eine fundierte Medien-Verbesserungsprüfung in den finalen Qualitätsdurchlauf ein; geeignetes Medium unverändert zu lassen ist ein gültiges Ergebnis.
Domänenskills übernehmen niemals die Verantwortung für das vollständige Ergebnis. Lade nur das, was der aktive Workflow benötigt.