Einstiegspunkt für HyperFrames
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; lesen Sie ihn, bevor Sie Kompositions-HTML schreiben.
1. Vom Projektzustand ausgehen
Wenden Sie die erste zutreffende Zeile an; werten Sie keine niedrigeren Zustandszeilen aus:
| Zustand | Aktion |
|---|---|
| Explizite Portierung einer bestehenden Remotion-Quelle zu HyperFrames | Lesen Sie references/routes/remotion-to-hyperframes.md, leiten Sie dann direkt zu diesem Workflow weiter. Überspringen Sie die Absichtsebene. |
| Spezifischer Vorgang an einem bestehenden HyperFrames-Projekt: inspizieren, diagnostizieren, validieren, in der Vorschau anzeigen, rendern, veröffentlichen oder Batch-Rendern | Führen Sie nur diesen Vorgang aus. Überspringen Sie die Absichts- und Workflow-Weiterleitung; laden Sie /hyperframes-cli und alle erforderlichen Domänenskills. |
| Spezifische Bearbeitung eines bestehenden Projekts | Führen Sie die Bearbeitung durch. Führen Sie die Absichtsebene nicht aus. |
BRIEF.md existiert | Lesen Sie workflow und flow. Führen Sie diesen Workflow aus; flow: companion wird immer in /general-video ausgeführt. Stellen Sie keine Kurzfragen. |
Kein Brief, aber hyperframes.json oder STORYBOARD.md existiert | Setzen Sie die Arbeit anhand der Projektdateien und gespeicherten Präferenzen fort. Leiten Sie den zugehörigen Workflow aus vorhandenen Artefakten ab. Wenn er nicht eindeutig bestimmt werden kann, stellen Sie eine reine Weiterleitungsfrage; führen Sie das Absichtsinterview nicht durch. |
| Frische Erstellung | Führen Sie die Absichtsebene aus – references/intent-interview.md – und leiten Sie dann anhand der Tabelle in § 2 weiter. |
Wenn eine frische Anfrage das Thema oder die Eingabe nicht identifiziert, fragen Sie vor der Weiterleitung, worum es in dem Video geht. Überprüfen Sie vor jeder Frage die Einstellungen und Rezepte (references/intent-interview.md, Schritt 1). Eine figma.com-Eingabe oder ein benanntes Rezept ändert die Aufnahme, nicht die Weiterleitung – der Abschnitt „Anpassung orthogonaler Eingaben" des Interviews behandelt beides.
Halten Sie die CLI des Projekts aktuell
Ein eingerichtetes Projekt fixiert hyperframes@<version> in seinen package.json-Skripten, um reproduzierbare Renderings zu gewährleisten; der Pin wird nie automatisch erhöht, und ein gepinnter Lauf einer älteren CLI gibt keine Warnung dazu aus. Wenn Sie ein Projekt fortsetzen, dessen Skripte einen Pin tragen, prüfen Sie einmal vor dem ersten rendern-relevanten Befehl:
npx hyperframes@latest upgrade --project . --check
Die Prüfung ist schreibgeschützt und meldet den Pin im Vergleich zur neuesten Version; behalten Sie den expliziten . bei – bei älteren CLI-Versionen verbraucht ein bloßes --project gefolgt von einem anderen Flag dieses Flag als sein Verzeichniswert. Wenn sie meldet, dass das Projekt zurückliegt – oder eine CLI-Ausgabe dies bereits anzeigt (der stderr-Hinweis This project pins hyperframes@… (latest …) oder _meta.updateAvailable: true in einem --json-Ergebnis eines gepinnten Skripts) – wenden Sie npx hyperframes@latest upgrade --project . an und überprüfen Sie dann mit npx hyperframes check. Eine bestandene Prüfung bestätigt, dass die Kompositionen des Projekts noch mit der neuen Version validieren – nicht, dass die gerenderte Ausgabe frame-identisch mit dem alten Pin ist – daher ist ein erfolgreicher Sprung niemals still: Nennen Sie 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, machen Sie die Änderung in der package.json rückgängig, setzen Sie die Arbeit mit der gepinnten Version fort und melden Sie, welche Version das Projekt verwendet und warum. Handeln Sie basierend auf dem Signal, anstatt es an den Benutzer weiterzuleiten; lassen Sie niemals einen erhöhten Pin ungeprüft.
2. Frische Erstellung weiterleiten
Verwenden Sie die erste zutreffende Zeile. Ordnen Sie die angeforderte Lieferung zu, nicht ein beiläufig erwähntes Wort oder Dateityp.
| Priorität | Anfrage | Workflow |
|---|---|---|
| 1 | Explizite Portierung einer bestehenden Remotion-Quelle | /remotion-to-hyperframes |
| 2 | Erstellen einer Präsentation, Pitch-Deck oder navigierbaren interaktiven Präsentation | /slideshow |
| 3 | Hinzufügen einfacher Untertitel oder Bildunterschriften zu bestehenden Talking-Head-Aufnahmen, ohne diese zu ändern | /embedded-captions |
| 4 | Hinzufügen gestalteter Grafik-Overlays zu bestehenden Talking-Head-, Interview- oder Podcast-Aufnahmen, ohne die Aufnahmen zu ändern | /talking-head-recut |
| 5 | Erstellen eines beat-synchronisierten Videos aus einer Musikspur, ohne Erzählung oder Website-Erfassung | /music-to-video |
| 6 | Erstellen einer explizit kurzen, unbesprochenen, bewegungsorientierten Einheit, typischerweise unter 10 s | /motion-graphics |
| 7 | Erklären eines GitHub-Pull-Requests oder einer Code-Änderung anhand einer PR-Referenz | /pr-to-video |
| 8 | Vermarkten oder Präsentieren einer Website, Produktseite, App oder eines Unternehmens anhand einer URL oder eines standortspezifischen Briefs | /product-launch-video |
| 9 | Erklären eines Themas, Artikels oder von Notizen mit erfundenen Bildern und ohne Produkt- oder Website-Erfassung | /faceless-explainer |
| 10 | Jedes andere benutzerdefinierte Video oder Komposition | /general-video |
Lesen Sie vor der endgültigen Weiterleitung references/routes/<workflow>.md – eine kleine Datei pro Route: den kanonischen Eingabe-/Ausgabe-/Auslöservertrag (verfügbar, bevor lazy-installierte Workflow-Skills vorhanden sind) plus den Interview-Eintrag dieser Route. Wenn der Kandidat seinen Vertrag nicht erfüllt, setzen Sie die Weiterleitung fort, anstatt die Übereinstimmung zu erzwingen. Lesen Sie nur die Datei der übereinstimmenden Route.
Häufige Unklarheiten beseitigen
- Eine kurze animierte Titelsequenz, ein Logo-Sting, ein Stat-Hit, ein Diagramm-Hit, ein Karten-Hit oder ein eigenständiger unterer Drittel ist
/motion-graphics, wenn es unbesprochen ist und 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 „Erstelle ein Video von dieser Seite" ist
/product-launch-video. - Bestehende Aufnahmen mit Untertiteln werden zu
/embedded-captionsweitergeleitet; Aufnahmen mit gestalteten Informationskarten zu/talking-head-recut. Neu-Timing, Neuordnung, Neufärbung, Neuausrichtung oder Neumischung von Aufnahmen 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 treibt. Musik, die als Hintergrund verwendet wird, überschreibt die themenangepasste Route nicht. - „Ich möchte ein Storyboard" ändert den Überprüfungsprozess, nicht den Workflow. Ohne anderes Weiterleitungssignal verwenden Sie
/general-video. Ein bestätigtes skizziertes Board kann selbst die angeforderte Lieferung sein; die Überprüfungsschleife definiert diesen Stoppunkt. - Spezialisierte narrative Workflows unterstützen bis zu etwa 3 Minuten und sind am stärksten bei 30–90 s. Leiten Sie ein deutlich längeres Stück zu
/general-videoweiter. Die Länge überschreibt niemals eine explizite Portierung, ein Deck, eine Beschriftung, ein Overlay oder eine musikgetriebene Lieferung.
3. Einmal weiterleiten, dann verlassen
Bei frischer Erstellung führt die Absichtsebene (references/intent-interview.md) das vollständige Gespräch – Gedächtnis, Triage, Pitchrunde, Must-haves, Laufform, Übergabe – und endet mit dem Schreiben von BRIEF.md. Der Brief ist das einzige Weiterleitungsartefakt, das der Workflow liest; nichts später eröffnet diesen Skill oder das Interview erneut. Beantworten Sie jede spätere Frage „Was hat die Route verlangt?" aus BRIEF.md.
4. Workflow installieren und betreten
Bevor Sie den ausgewählten Workflow lesen, installieren oder aktualisieren Sie ihn und die Kern-Domänenskills:
npx hyperframes skills update <workflow-name>
Verwenden Sie den bloßen Namen ohne /. Wenn der Befehl fehlschlägt, melden Sie den Fehler; rekonstruieren Sie den Workflow nicht aus dem Gedächtnis. Alles andere zur Installation – die Core-vs-Lazy-Aufteilung, was init aktualisiert, Diagnose, CI-Opt-out und der CLI-freie Fallback – befindet sich in references/skill-lifecycle.md.
5. Domänenskills bei Bedarf laden
| Bedarf | Skill |
|---|---|
| Kompositionsstruktur, Timing-Attribute, Spuren, Variablen, Determinsimus | /hyperframes-core |
| Bewegungsregeln, Szenen-Blueprints, Übergänge, Laufzeit-Adapter | /hyperframes-animation |
Suchsicheres GSAP, CSS, Anime.js, WAAPI, FLIP, Pfade, Masken, SVG, 3D-Keyframes oder hyperframes keyframes-Diagnose | /hyperframes-keyframes |
| Designspezifikationen, Konzept, Palette, Typografie, Erzählung, Beat-Planung | /hyperframes-creative |
| Bilder, Symbole, Logos, Audio, Untertitel, Gradings, LUTs, wiederverwendbare Medien | /media-use |
| Sprachaufnahme, Audio-Effektketten oder Automatisierungshüllkurven auf einer Spur | /hyperframes-audio |
| Init, Lint, Check, Snapshots, Vergleichen, Batch-Rendern, Studio, Rendern, Veröffentlichen oder Diagnose | /hyperframes-cli |
| Registry-Blöcke und Komponenten | /hyperframes-registry |
| Figma-Assets, Tokens, Komponenten oder Storyboard-Frames als rekonstruierte Bewegung | /figma |
Ersteller-Bearbeitungsphrasen sind domänenübergreifende Anfragen. Laden Sie jeden Skill, der in der übereinstimmenden Zeile genannt wird:
| Erstelleranfrage | Erforderliche Domänen |
|---|---|
| „dieses Filmmaterial schneiden", harter Schnitt, trimmen, splissen, neu ordnen oder einen Quellbereich verwenden | /general-video + /hyperframes-core; Core besitzt data-start, data-duration, data-media-start und Spur-Layout. |
| hier zoomen, Punch-in / Punch-out, sanfter Multi-State-Zoom oder Neurahmen, Ken Burns oder Kamerabewegung | /general-video + /hyperframes-core + /hyperframes-keyframes; animieren Sie den inneren visuellen/Beschnitt-Wrapper, nicht den getimten Clip. |
| Match-Cut oder Whip-Pan-Kameraübergang | /general-video + /hyperframes-animation + /hyperframes-keyframes + /hyperframes-registry; suchen/installieren Sie ein Übergangs-Primitiv, bevor Sie es manuell erstellen. |
| Überblendung, Crossfade, Spurlautstärke, Automatisierung, Ducking/Carving oder Audioeffekte | /general-video + /hyperframes-core + /hyperframes-audio; Core platziert Clips, Audio mischt platzierte Spuren. |
| Bild- und Tonbearbeitungen, die Schnitte mit Kamerabewegung oder Mischung kombinieren | /general-video + /hyperframes-core + /hyperframes-keyframes bei visueller Bewegung + /hyperframes-audio bei Ton, der überblendet, gemischt, geduckt, automatisiert oder verarbeitet wird. |
| Medien beschaffen oder generieren oder eine nicht unterstützte Geschwindigkeitsrampe/einen Mid-Source-Freeze vorverarbeiten | /media-use; nur Beschaffung/Generierung/Vorverarbeitung, niemals platzierte Spurmischung. |
Konstantes data-playback-rate ist rendernsicher für Bild und tonhöhenerhaltenen Ton. Es macht Quellgeschwindigkeitsrampen nicht keyframe-fähig; verarbeiten Sie Rampen vor. Für kopierbare Bearbeitungsverträge laden Sie /hyperframes-core → references/creator-editing-recipes.md.
Breites Feedback darüber, wie fotografische Medien aussehen oder sich verhalten, wird ebenfalls zu /media-use weitergeleitet, selbst wenn der Benutzer nie „Farbkorrektur" oder „Effekte" sagt.