HyperFrames Einstiegspunkt
HyperFrames rendert Video aus HTML – eine Komposition ist eine HTML-Datei, deren DOM das Timing mit data-*-Attributen deklariert, deren Animations-Laufzeit suchbar ist und deren Medienwiedergabe dem Framework gehört. Der vollständige Autorenvertrag befindet sich in /hyperframes-core; lesen Sie ihn, bevor Sie Kompositions-HTML schreiben.
1. Vom Projektstatus starten
Wenden Sie die erste zutreffende Zeile an; werten Sie keine niedrigeren Statuszeilen aus:
| Status | Aktion |
|---|---|
| Expliziter Port einer vorhandenen Remotion-Quelle zu HyperFrames | Lesen Sie references/routes/remotion-to-hyperframes.md, dann leiten Sie direkt zu diesem Workflow weiter. Überspringen Sie die Absichtsebene. |
| Spezifischer Vorgang an einem bestehenden HyperFrames-Projekt: inspizieren, diagnostizieren, validieren, Vorschau, rendern, veröffentlichen oder Batch-Rendering | Führen Sie nur diesen Vorgang aus. Überspringen Sie die Absicht und das Workflow-Routing; laden Sie /hyperframes-cli und alle erforderlichen Domänen-Skills. |
| 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 kurzen Fragen. |
Kein Briefing, aber hyperframes.json oder STORYBOARD.md existieren | Setzen Sie aus Projektdateien und aufgezeichneten Präferenzen fort. Leiten Sie den zugehörigen Workflow aus vorhandenen Artefakten ab. Wenn er nicht eindeutig bestimmt werden kann, stellen Sie eine reine Routing-Frage; führen Sie das Absichtsinterview nicht durch. |
| Frische Erstellung | Führen Sie die Absichtsebene aus – references/intent-interview.md – leiten Sie dann einmalig mit der Tabelle von § 2 weiter. |
Wenn eine frische Anfrage das Thema oder die Eingabe nicht identifiziert, fragen Sie, worum es in dem Video geht, bevor Sie weiterleiten. Überprüfen Sie Präferenzen und Rezepte, bevor Sie etwas fragen (references/intent-interview.md, Schritt 1). Eine figma.com-Eingabe oder ein benanntes Rezept ändert den Aufnahmeprozess, nicht das Routing – der Abschnitt „Adapt orthogonal inputs“ des Interviews behandelt beides.
Halten Sie die CLI des Projekts aktuell
Ein eingerüstetes Projekt pinnt hyperframes@<version> in seinen package.json-Skripten, damit Renderings reproduzierbar bleiben; der Pin wird niemals von selbst aktualisiert, und eine gepinnte Ausführung 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-beeinflussenden Befehl:
npx hyperframes@latest upgrade --project . --check
Die Prüfung ist schreibgeschützt und meldet den Pin gegen die neueste Version; behalten Sie den expliziten . – bei älteren CLI-Versionen verbraucht ein nacktes --project gefolgt von einem weiteren Flag dieses Flag als Verzeichniswert. Wenn es meldet, dass das Projekt zurückliegt – oder eine CLI-Ausgabe es bereits anzeigt (der Stderr-Hinweis This project pins hyperframes@… (latest …), oder _meta.updateAvailable: true in einem --json-Ergebnis aus einem gepinnten Skript) – wenden Sie npx hyperframes@latest upgrade --project . an, überprüfen Sie dann mit npx hyperframes check. Eine bestandene Prüfung bestätigt, dass die Kompositionen des Projekts mit der neuen Version noch gültig sind – nicht, dass das gerenderte Ergebnis rahmenidentisch mit dem alten Pin ist – daher ist ein erfolgreicher Bump 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 package.json-Änderung rückgängig, fahren Sie mit der gepinnten Version fort und melden Sie, auf welcher Version das Projekt bleibt und warum. Handeln Sie auf das Signal, anstatt es an den Benutzer weiterzuleiten; lassen Sie niemals einen gebumpten Pin ungeprüft.
2. Frische Erstellung weiterleiten
Verwenden Sie die erste zutreffende Zeile. Ordnen Sie das angeforderte Ergebnis zu, nicht ein Wort oder einen Dateityp, der beiläufig erwähnt wird.
| Priorität | Anfrage | Workflow |
|---|---|---|
| 1 | Expliziter Port einer vorhandenen Remotion-Quelle | /remotion-to-hyperframes |
| 2 | Erstellen einer Präsentation, Pitch-Deck oder navigierbaren interaktiven Präsentation | /slideshow |
| 3 | Hinzufügen von einfachen Untertiteln zu vorhandenem Talking-Head-Material, ohne es zu ändern | /embedded-captions |
| 4 | Hinzufügen von gestalteten Grafik-Overlays zu vorhandenem Talking-Head-, Interview- oder Podcast-Material, ohne das Material zu ändern | /talking-head-recut |
| 5 | Erstellen eines beat-synchronisierten Videos aus einem Musiktitel, ohne Erzählung oder Website-Capture | /music-to-video |
| 6 | Erstellen einer 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, Produktseite, App oder eines Unternehmens anhand einer URL oder eines site-spezifischen Briefings | /product-launch-video |
| 9 | Erklären eines Themas, Artikels oder von Notizen mit erfundenen visuellen Elementen und ohne Produkt- oder Website-Capture | /faceless-explainer |
| 10 | Jedes andere benutzerdefinierte Video oder jede andere Komposition | /general-video |
Lesen Sie vor der endgültigen Routenentscheidung references/routes/<workflow>.md – eine kleine Datei pro Route: den kanonischen Eingabe-/Ausgabe-/Trigger-Vertrag (verfügbar bevor lazy-installierte Workflow-Skills vorhanden sind) plus den Interview-Einstieg dieser Route. Wenn der Kandidat seinen Vertrag nicht erfüllt, setzen Sie das Routing fort, anstatt den Treffer zu erzwingen. Lesen Sie nur die Datei der zugeordneten Route.
Häufige Mehrdeutigkeiten auflösen
- Eine kurze animierte Titel-, Logo-Sting, Statistik-, Diagramm-, Karten- oder eigenständige Lower-Third ist
/motion-graphics, wenn sie unerzählt 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 „Erstelle ein Video von dieser Site“-Anfrage ist
/product-launch-video. - Vorhandenes Filmmaterial mit Untertiteln wird an
/embedded-captionsweitergeleitet; Filmmaterial mit gestalteten Informationskarten wird an/talking-head-recutweitergeleitet. Neusynchronisierung, Neuordnung, Neufärbung, Neurahmung oder Neumischung von Filmmaterial ist eine benutzerdefinierte Bearbeitung und fällt auf/general-videozurück. - Eine Musikdatei wählt
/music-to-videonur dann aus, wenn ihr Beat-Raster das Stück antreibt. Als Hintergrund verwendete Musik überschreibt nicht die themenzugeordnete Route. - „Ich möchte ein Storyboard“ ändert den Überprüfungsprozess, nicht den Workflow. Ohne anderes Routing-Signal verwenden Sie
/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 von 30–90 s. Leiten Sie ein deutlich längeres Stück an
/general-videoweiter. Die Länge überschreibt niemals ein explizites Port, Deck, Untertitel, Overlay oder musikgesteuertes Ergebnis.
3. Einmal weiterleiten, dann verlassen
Bei frischer Erstellung führt die Absichtsebene (references/intent-interview.md) das vollständige Gespräch – Gedächtnis, Triage, Pitch-Runde, Must-haves, Laufform, Übergabe – und endet mit dem Schreiben von BRIEF.md. Das Briefing ist das einzige Routing-Artefakt, das der Workflow liest; nichts später öffnet dieses Skill oder das Interview erneut. Beantworten Sie jede spätere Frage „Was hat die Route verlangt?“ aus BRIEF.md.
4. Installieren und in den Workflow eintreten
Bevor Sie den ausgewählten Workflow lesen, installieren oder aktualisieren Sie ihn und die Kern-Domänen-Skills:
npx hyperframes skills update <workflow-name>
Verwenden Sie den bloßen Namen ohne /. Wenn der Befehl fehlschlägt, zeigen Sie den Fehler an; rekonstruieren Sie den Workflow nicht aus dem Gedächtnis. Alles andere zur Installation – die Kern- vs. Lazy-Aufteilung, was init aktualisiert, Diagnose, CI-Opt-out und der No-CLI-Fallback – befindet sich 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 |
Suche-sichere 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 |
| Voiceover-Carve, Audio-Effektketten, Automatisierungshüllkurven oder eine Kette/Regler über mehrere Spuren (Submix-Bus) | /hyperframes-audio |
| 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 |
Creator-Bearbeitungsphrasen sind Domänen-übergreifende Anfragen. Laden Sie jedes Skill, das in der passenden Zeile genannt wird:
| Creator-Anfrage | Erforderliche Domänen |
|---|---|
| „dieses Filmmaterial schneiden“, harter Schnitt, Trimmen, Verbinden, Neuordnen oder eine Quellbereich verwenden | /general-video + /hyperframes-core; Core besitzt data-start, data-duration, data-media-start und Spurenlayout. |
| hier zoomen, Punch-In / Punch-Out, sanfter Multi-State-Zoom oder Neurahmung, 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 von Hand authorisieren. |
| Fade, Crossfade, Spurlautstärke/-lautstärke, Automatisierung, Duck/Carve, Audio-Effekte oder ein Effekt über mehrere Spuren | /general-video + /hyperframes-core + /hyperframes-audio; Core platziert Clips, Audio mischt platzierte Spuren – einschließlich eines Submix-Busses über eine Gruppe von ihnen. |
| Bild- und Tonbearbeitungen, die Schnitte mit Kamerabewegung oder Mischung kombinieren | /general-video + /hyperframes-core + /hyperframes-keyframes bei visueller Bewegung + /hyperframes-audio bei Ton, der ausgeblendet, gemischt, geduckt, automatisiert oder verarbeitet wird. |
| Medien beschaffen oder generieren oder eine nicht unterstützte Geschwindigkeitsrampe / mid-source-Freeze vorverarbeiten | /media-use; nur Beschaffung/Generierung/Vorverarbeitung, niemals platzierte Spurenmischung. |
Konstante data-playback-rate ist für Bild und tonhöhenerhaltenen Ton render-sicher. Es macht keine Quellgeschwindigkeitsrampen keyframe-bar; verarbeiten Sie Rampen vor.
Für kopierbare Bearbeitungsverträge laden Sie /hyperframes-core → references/creator-editing-recipes.md.
Breites Feedback dazu, wie fotografische Medien…