Communitygithub.com

hyperframes-studio

Konventionen für das HyperFrames Studio, um eine lesbare Timeline zu gewährleisten und den Aufbau von Filmen zu planen.

Was ist hyperframes-studio?

Die HyperFrames Studio Konventionen sind eine Reihe von Richtlinien für KI-Agenten, die mit dem HyperFrames Studio arbeiten, um Filme und Animationen zu erstellen. Sie stellen sicher, dass jede Timeline in Studio übersichtlich und bearbeitbar bleibt, indem sie Regeln für die Struktur von Szenen, Tonspuren, Captions und sicheren Zonen definieren. Der Skill beschreibt einen klaren Arbeitsablauf von der Kommunikation mit dem Nutzer über die Planung, das Storyboarding bis hin zum Bau des Films. Er betont die Bedeutung der Unterhaltung vor dem Bau, um Fehlinterpretationen zu vermeiden, und gibt spezifische Anweisungen für die Behandlung von Änderungswünschen, Fragen und neuen Ideen. Die Konventionen sind für die Verwendung mit dem HyperFrames Studio und zugehörigen Referenzdokumenten wie `/hyperframes-core`, `/hyperframes-creative` und den Launch-Filmen im Repository `hyperframes-launches` konzipiert. Sie enthalten auch Richtlinien für Produkt-Launch-Filme, einschließlich der Verwendung von echtem Filmmaterial und konsistenter Welten.

Funktioniert mit~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/heygen-com/hyperframes/tree/main/skills/hyperframes-studio

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Plugin-Installation: Führen Sie vor Einrichtungs- oder Aktualisierungsbefehlen die Plugin-Ausführungsregeln aus, wenn sich dieser Skill innerhalb eines HyperFrames-Plugins befindet. Bei eigenständigen Installationen gelten die untenstehenden Aktualisierungshinweise weiterhin.

HyperFrames Studio Konventionen

Das Studio zeichnet eine Timeline-Zeile pro Element der obersten Ebene. Ein Projekt, das die folgenden Regeln befolgt, öffnet sich als kurze, lesbare Timeline; eines, das dies nicht tut, öffnet sich als Wand aus unbeschrifteten Zeilen, die der Benutzer nicht bearbeiten kann. Dies sind Konventionen für das, was gebaut werden soll. Informationen zum Ändern eines Clips finden Sie unter /hyperframes-core references/creator-editing-recipes.md und erfinden Sie niemals eine andere Form derselben Bearbeitung.

0. Reden, bevor Sie bauen

Lesen Sie die Nachricht, bevor Sie eine Datei öffnen. Entscheiden Sie, was darin gefragt wird:

Die PersonSie
nennt eine Änderung, und sei es höflich („machen Sie den Titel größer“, „können Sie die dritte Szene herausschneiden?“)Machen Sie sie.
gibt einen gefühlvollen Hinweis zum gebauten Film („Der Einstieg fühlt sich ruckartig an“, „Es ist nicht lang genug“)Finden Sie die Ursache, ändern Sie das messbare Ding, sagen Sie, was der Hinweis bedeutete und was sich geändert hat, und dokumentieren Sie es gemäß /hyperframes-creative references/storyboard-recipe.md § 4.
stellt eine Frage und nennt keine Änderung („Warum hüpft der Titel?“)Beantworten Sie sie. Ändern Sie nichts.
sagt, ändere nichts, warte, „ich denke nur nach“, „lass uns reden“Ändern Sie keine Datei, nicht einmal einen Fehler, den Sie bemerkt haben. Bieten Sie es in Worten an.
bringt eine Idee für diesen Film ohne konkrete Änderung („Ich möchte, dass das Ende sich größer anfühlt“)Schlagen Sie die Änderung vor und fügen Sie sie dem Plan hinzu (siehe unten). Ändern Sie keine Kompositionsdatei.
bittet um einen neuen FilmPlanen Sie ihn (§ 5).
genehmigt einen Plan („Bau es“, „Los“)Bauen Sie das Genehmigte.

Eine Nachricht, die eine Frage stellt und eine Änderung nennt, erhält die Antwort und die Änderung. Nur wenn Sie nicht erkennen können, ob überhaupt etwas gefragt wird, handelt es sich um ein Gespräch: Eine falsche Antwort kostet eine Nachricht; ein falscher Bau kostet einen langen Durchlauf und eine Runde Anmerkungen.

Eine Gesprächsantwort:

  • Antworten Sie zuerst, in einfachen Worten, in ein paar Sätzen.
  • Stellen Sie nur Fragen, deren Antwort den Film verändert, jeweils mit einer empfohlenen Antwort und deren Kompromiss („30 Sekunden passen in einen Feed; 60 lassen Platz für die Demo“).
  • Wenn es eine Idee zu formen gibt: Bei einem neuen Film, Richtungen gemäß /hyperframes references/pitch-round.md; bei einer Idee für diesen Film, zwei oder drei Optionen für den genannten Teil. Empfehlen Sie eine.
  • Beenden Sie mit dem nächsten Schritt und dem Wort, das ihn startet („Sagen Sie Bauen und ich beginne“).

Halten Sie den Plan im Projekt fest, nicht nur im Chat: Die nächste Nachricht kann eine neue Sitzung starten, die diese hier nicht sehen kann. Fügen Sie ihn gemäß /hyperframes-creative references/storyboard-recipe.md § 4, wie eine Runde dokumentiert wird, zur STORYBOARD.md hinzu; überschreiben Sie niemals gesperrte Frames. Wenn die Person Sie gebeten hat, gar nichts zu ändern, schreiben Sie nichts: Halten Sie den Plan in der Antwort fest und bieten Sie an, ihn zu speichern.

1. Jede Szene ist eine Unterkomposition

Die Root-Komposition enthält nur getimte Hosts, Medien und Audio. Jede Szene mit verschachtelter Struktur (ein Div, das Kinder enthält, ein Titel mit einem Untertitel, ein Diagramm) ist eine eigene Datei, geladen mit data-composition-src, verdrahtet in references/sub-compositions.md.

Verschachteltes Markup, das innerhalb der Root verbleibt, wird nicht zu einer eigenen Zeile. Es versteckt sich innerhalb einer undurchsichtigen Zeile, die nicht einzeln getrimmt oder verschoben werden kann.

Autorisieren Sie so, als ob ein Struktur-Lint jeden Verstoß ablehnt.

2. Eine einzelle Caption-Spur

  • Alle Captions leben auf einer Spur: einem einzelnen Unterkompositions-Host (einem data-track-index), markiert mit data-track-kind="captions", der jede Caption-Gruppe in der richtigen Reihenfolge trägt.
  • Niemals eine Zeile pro Caption-Gruppe, und niemals Captions auf einer Spur mit einer anderen Art gemischt.
  • Die Regeln für das Wort-Timing sind unverändert: Siehe /embedded-captions und die caption_* Lint-Regeln.

3. Ein Elementtyp pro Spur

Gruppieren Sie nach Typ, sodass jede Zeile eine Sache ist, die der Benutzer als Set auswählen, stummschalten oder ziehen kann.

Typdata-track-kind
Basisvideo / A-Rollvideo (vom Tag)
Szenen, Overlays, Grafikengraphics
Captionscaptions
Audio (Voiceover, Musik, Soundeffekte)audio (vom Tag)

Setzen Sie data-track-kind auf Unterkompositions-Hosts. Video- und Audio-Typen kommen vom Tag, daher benötigen <video> und <audio> kein Attribut. Geben Sie jedem Typ seinen eigenen data-track-index; die Nummer dient nur der Anzeige; sie ändert niemals, was oben gerendert wird. Verwenden Sie CSS für die Überlagerung.

4. Sichere Zonen

Jedes Lineal oder jede Safe-Box-Überlagerung lebt im Vorschaufenster, niemals innerhalb der Komposition. Fügen Sie daher keine Führungselemente zum HTML hinzu. Beide Rahmungen (breit und vertikal) verwenden dieselben zwei Safe-Boxen, Premiere-Standard. Der Vorschalt-Umschalter zeichnet sie mit einem Teilstrich am Mittelpunkt jeder Kante. Quelle: ACTION_SAFE_PERCENT und TITLE_SAFE_PERCENT in packages/studio/src/utils/previewSafeMargins.ts.

BoxAnteil am FrameEinzug an jeder Kante
Action-safe90%5%
Title-safe80%10%
  • Sichere Ränder: Alles Sichtbare bleibt innerhalb der Action-Safe-Box (90%), und Captions sowie Schlüsselinhalte bleiben innerhalb der Title-Safe-Box (80%).
  • Zwei- und 50/50-Layouts halten den Inhalt jeder Hälfte innerhalb der Title-Safe-Box.

5. Ein neuer Film: Planen, Storyboard, Bauen

Die Filme von hyperframes-launches wurden in dieser Reihenfolge erstellt. Jeder Schritt hat einen Besitzer; folgen Sie ihm und wiederholen Sie ihn hier nicht.

SchrittBesitzer
1. Brief/hyperframes references/intent-interview.md. Innerhalb eines bestehenden Projekts bleibt nur eine Weiterführung desselben Films: Eine neue Version oder ein Cutdown, gleicher Workflow und Seitenverhältnis. Stellen Sie die Muss-Fragen, überspringen Sie hyperframes init, überschreiben Sie niemals BRIEF.md oder STORYBOARD.md, fügen Sie einen neuen datierten Abschnitt zu jeder hinzu und sagen Sie dies in der Antwort. Ein Film mit einem anderen Workflow oder Seitenverhältnis startet ein neues Projekt, und die Antwort sagt dies.
2. Richtungen/hyperframes references/pitch-round.md
3. Storyboard/hyperframes-creative references/storyboard-recipe.md
4. BauenDer Workflow, zu dem der Brief führt (/hyperframes § 2) und seine eigenen Referenzen
5. Anmerkungen/hyperframes references/review-loop.md

Was die Launch-Filme für einen Produkt-Launch hinzufügen. Wo der gewählte Bogen des Workflows etwas anderes sagt, gewinnt der Bogen.

  • Echtes Filmmaterial für das gelaunchte Produkt. Fragen Sie im Brief nach einer Bildschirmaufnahme, es sei denn, der Workflow erfasst sie selbst (eine Site von ihrer URL aus), und halten Sie ihren Platz mit einem beschrifteten Platzhalter, bis sie eintrifft. Nähern Sie niemals die Benutzeroberfläche des gelaunchten Produkts an. Ein Drittanbieter-Tool, das als Kontext gezeigt wird (eine Chat-App, ein Editor), wird originalgetreu aus einer Aufnahme nachgebaut.
  • Eine Welt. Dasselbe Fenster oder Canvas setzt sich über die Beats hinweg fort. Überprüfen Sie jeden Schnitt: Was bestehen bleibt, darf nicht springen.
  • Cursor und gescrollter Inhalt. Ein Cursor oder Inhalt, den das Fenster selbst hinausscrollt, verlässt das Fenster oder die Frame-Kante, nicht durch Ausblenden innerhalb des Frames. Element- und Textwechsel folgen dem cut-catalog.md des Workflows, wo vorhanden.
  • Schließen Sie mit dem Befehl oder der Adresse ab, wobei das Logo in noch bewegtes Filmmaterial einfliegt.
  • Geben Sie die Laufzeit bei jeder Version an. Das Überschreiten des Ziels ist die Entscheidung der Person, nicht Ihre.

Überprüfen Ihrer Arbeit

Führen Sie hyperframes lint aus und beheben Sie jeden Befund. Öffnen Sie dann das Projekt im Studio und überprüfen Sie, ob die Timeline eine Basiszeile, eine Zeile pro Szenen-Host, eine Caption-Zeile und die Audio-Zeilen anzeigt.

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

general-video

>

heygen-com/animejs

Anime.js adapter patterns for HyperFrames. Use when writing Anime.js animations or timelines inside HyperFrames compositions, registering animations on window.__hfAnime, making Anime.js seek-driven and deterministic, or translating Anime.js examples into render-safe HyperFrames HTML.

heygen-com/claude-design-hyperframes

Use when running inside Claude Design specifically. Produces a valid, brand-accurate HyperFrames video draft using pre-valid skeletons. For Claude Code / Cursor / Codex, use the `hyperframes` skill instead.

heygen-com/contribute-catalog

Author a new HyperFrames registry block (caption style, VFX block, transition, lower third) or component (text effect, overlay, snippet) and ship it as an upstream PR to the hyperframes repo. Use ONLY when the user wants to CONTRIBUTE to the public catalog — for in-project caption/transition authoring use the `hyperframes` skill, for installing existing registry items use the `hyperframes-registry` skill.

heygen-com/css-animations

CSS animation adapter patterns for HyperFrames. Use when authoring CSS keyframes, animation-delay based timing, animation-fill-mode, animation-play-state, or CSS-only motion that HyperFrames must seek deterministically during preview and rendering.

heygen-com/gsap

GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.

heygen-com/hyperframes

Leaves sweep through the frame and part to reveal the headline. HyperFrames block, 1920×1080, 12s, 11 variables.

heygen-com/hyperframes

Render-correctness doctrine for scene-to-scene seams in HyperFrames launch videos — the prerequisites that make transitions composite correctly on the master timeline. Load when assembling the master timeline / index.html, when a white flash appears at a cut or crossfade seam (especially on dark films), when reasoning about why a transition opacity dip shows through, or when verifying the render-side mechanics of how overlapping scene wrappers blend. Covers the opaque stage-ground (#root background) white-flash guard and how the injector overlaps wrappers, holds final frames, ping-pongs tracks, and stamps lint-clean template code onto the master timeline. Does NOT contain the per-transition catalog — see the transition registry for individual transition entries.

heygen-com/hyperframes

The technique catalog: five velocity-matched SEAMS (zoom-through, INVERSE zoom-through, cut-the-curve, waterfall cut, rack-focus blur-cut) plus the two in-scene techniques — waterfall ENTRY (staggered arrival cascades for title cards / segment openers) and the nudge curve (slow-fast-slow three-phase group slides). Covers partial-travel (~12% of frame) velocity matching via mirrored power4 eases, the Z scale-sign rule, size-scaled blur (10px text / 18-20px full-frame), word-by-word staggered cuts, cascade pacing by element weight, and the 10/65/25 slide ratio. Read before authoring any transition, text-beat handoff, kinetic text entry, or group reposition. [depth, zoom, inverse-zoom, scale-sign, mirrored-zoom, rack-focus, pacing, velocity, cut-the-curve, waterfall, stagger, cascade, kinetic-text, title-card, segment-opener, nudge, slide, easing, group-motion, z-depth, motion-graphics, cinematic, transition, blur, directional-continuity]

heygen-com/hyperframes

Glass shards fly in through fog and tile themselves into the headline. HyperFrames block, 1920×1080, 12.16s, 19 variables.

heygen-com/hyperframes

A single feature card orbits a dot sphere on approved Blender camera motion. HyperFrames block, 1920×1080, 10s, 4 variables.

heygen-com/hyperframes

A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase. HyperFrames block, 1920×1080, 8s, 9 variables.

heygen-com/hyperframes

An orbiting camera follows an ice logo as it breaks apart, reforms into two text moments, and fades. HyperFrames block, 1920×1080, 22.5s, 216 variables.

heygen-com/hyperframes

House-style oversized macOS cursor technique for HyperFrames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene, when igniting a morph/transition/typing run with a click, or when a scene reads as static, dead, or stale and needs a cheap high-yield source of motion to carry the viewer's eye and segment them out of the stale state. Covers cursor size/look (incl. brand-motif cursors), the off-screen entry law, tip-targeting and the click tap, click-ignites-the-next-beat, and exit / cross-scene handoff.

heygen-com/hyperframes

name: embedded-captions

heygen-com/hyperframes

A chain of bevelled cuboids rides a travelling wave as a content carousel. HyperFrames block, 1920×1080, 6.666666666666667s, 40 variables.

heygen-com/hyperframes

A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline. HyperFrames block, 1920×1080, 8s, 18 variables.

heygen-com/hyperframes

Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes.

heygen-com/hyperframes

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

heygen-com/hyperframes

GATEWAY — load FIRST before composing any HyperFrames animation or video. The high-level motion law that makes a multi-scene video feel like ONE continuous camera move instead of a stack of independently-animated slides. Covers the vector law (how you exit determines how you enter, incl. the Z scale-sign rule), the film's current, carrier elements, causal motion, the Seam Gate (build-gate enforcement), the ban on idle wobble (motion must PERFORM, not breathe), stillness-before-climax, and the sustained-motion routes. Routes to the low-level technique skills (cut-the-curve — the full catalog incl. waterfall entry + nudge curve, oversized-cursor, seam-craft). These rules SUPERSEDE generic / upstream motion guidance. [continuity, direction, vector, momentum, seam, transition, ease, performance, idle-motion, narrative-motion, film-grammar]

Verwandte Skills