hyperframes-keyframesvon HeyGen

HyperFrames Keyframes Skill.

Ein Skill für Claude Code und Codex für Motion und Video: Punch-ins, Zooms, Reframes, Ken-Burns-Bewegungen und 2D/3D-Keyframes für HyperFrames.

Motion & Video
Video

OpenDesign herunterladen Anleitung ansehen

heygen-com/hyperframes · skills/hyperframes-keyframes/SKILL.mdSKILL.md

--- name: hyperframes-keyframes description: Use when a HyperFrames composition needs a punch-in, punch-out, zoom, reframe, Ken Burns treatment, camera move, visual match/whip handoff, or other seek-safe 2D/3D keyframes; also for GSAP, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics. Don't use for broad scene strategy, brand design, media sourcing, captions, or general video … --- ## Creator editing boundary ## Procedure ## Contract ## Runtime Rules ## GSAP Skeleton ## Keyframe Forms

Front Matter und Abschnittsüberschriften aus der Ursprungsdatei vom 14.09.2026 · 15.899 Zeichen insgesamt

01 Was es tut

Was der hyperframes-keyframes Skill in Claude Code und Codex leistet

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Behandelt Punch-ins, Punch-outs, Zooms, Reframes, Ken-Burns-Bewegungen, Kamerafahrten, visuelle Match-/Whip-Übergänge sowie seek-sichere 2D-/3D-Keyframes für HyperFrames-Kompositionen. Unterstützt GSAP, CSS-Keyframes, Anime.js, WAAPI, FLIP, Pfade, Masken, SVG-Morph/Draw, Text-Trails und 3D-Tiefe. Keyframes sind ein Pose-Vertrag: sichtbare Zustände, durchgehende Subjektidentität, seek-sichere Laufzeit, verifizierte Pixel.

Konzentriert sich auf visuelle Bewegung innerhalb von Clips, nicht auf Clip-Zusammenstellung oder Szenenstrategie. Erfordert synchronen Laufzeitaufbau, registrierte Timeline-Instanzen und deterministisches Timing. Autoren verifizieren mit hyperframes lint, check, keyframes command, gezielten --shot-Diagnosen und Snapshots zu Proof-Zeitpunkten.

Was er erzeugt

Registrierte GSAP-Timeline-Instanz in window.__timelines[compositionId] mit paused: true

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Subjekt und Zustände identifizieren
Identifizieren Sie das animierte Subjekt, die sichtbaren Zustände, den Endzustand und die Laufzeit, bevor Sie Keyframes erstellen.
02
Den kleinsten Mechanismus wählen
Wählen Sie den kleinsten Mechanismus, der den Prompt belegt, und ziehen Sie references/keyframe-patterns.md nur zu Rate, wenn der Mechanismus unklar ist.
03
Erstellen und Registrieren
Erstellen Sie seek-sichere Keyframes in der deklarierten Laufzeit, bauen Sie synchron auf und registrieren Sie die Laufzeitinstanz.
04
Mit Diagnosen verifizieren
Verifizieren Sie mit hyperframes lint, check, keyframes command, einem gezielten --shot und Snapshots zu Proof-Zeitpunkten.
05
Korrigieren und Erneut Testen
Wenn der Proof fehlschlägt, korrigieren Sie die Quell-Keyframes und führen Sie die kleinste fehlschlagende Diagnose erneut aus, bevor Sie rendern.

02 Finden Sie Ihren Favoriten

Wann Sie das hyperframes-keyframes Skill verwenden

Verwenden Sie das hyperframes-keyframes Skill in Claude Code oder Codex, wenn die Aufgabe Motion und Video dieser Art ist. Eignung und Grenzen unten sind aus der eigenen Datei des Skills übernommen.

Gut geeignet

Punch-in oder Punch-out mit Keyframe-Skalierung und -Translation auf einem nicht getimten visuellen/Crop-Wrapper innerhalb des Clips
Sanfter Multi-Zustand-Zoom oder Reframe, der einen Subjekt-Wrapper mit mehreren Zuständen als Pose-Leiter am Leben hält
Pan, Reframe oder Ken-Burns-Kamerabewegung mit animierter Wrapper-Translation plus Skalierung
Verkettete Kamerabewegungen mit beschrifteten Transform-Beats auf einer registrierten seek-sicheren Timeline
Match Cut oder Whip Pan, das erstellte Geometrie, Richtung und Geschwindigkeit bewahrt

Grenzen kennen

Umfassende Szenenstrategie, Markendesign, Medienbeschaffung, Untertitel oder allgemeine Videoplanung
Harte Schnitte im Quellbereich, Trimmen, Splicing und Neuordnung, die zu hyperframes-core gehören
Speed-Ramps der Quelle mit zeitlich variabler Wiedergaberate-Hülle, die nicht unterstützt werden
Beliebige Standbilder innerhalb der Quelle, die eine Vorverarbeitung eines statischen/abgeleiteten Segments erfordern

Was Sie bereitstellen sollten

Sichtbare Posen und EndzustandDie Posen, die nötig sind, um die beabsichtigte Bewegung zu belegen, einschließlich des Endzustands, der die Animation abschließt.

03 Innerhalb des Skills

Regeln, die die hyperframes-keyframes Skill Claude Code und Codex vorgibt

8 konkrete Anweisungen, Standardwerte und Grenzen, die die SKILL.md für den Agent festlegt – der Teil der Datei, der das Ergebnis verändert.

Pausierte GSAP-Timelines
GSAP-Timelines müssen gsap.timeline({ paused: true }) verwenden, dürfen tl.play() für renderkritische Bewegung nie aufrufen und müssen als window.__timelines[compositionId] mit einem zu data-composition-id passenden Schlüssel registriert werden.
Anime.js Autoplay False
Anime.js-Instanzen müssen autoplay: false gesetzt haben und mit endlicher duration und loops zu window.__hfAnime hinzugefügt werden.
CSS-Keyframes Fill Mode
CSS-Keyframes erfordern eine endliche duration und iteration count, eine deterministische delay und animation-fill-mode: both.
Niemals Timer oder Zufall verwenden
Verwenden Sie für renderkritische Bewegung niemals Date.now(), performance.now(), unseeded Math.random(), Hover-/Scroll-Trigger, Timer, asynchron erzeugte Timelines, nicht registrierte requestAnimationFrame-Aufrufe oder Endlosschleifen.
Nur sichtbare Kanäle als Keyframes
Setzen Sie Keyframes nur für sichtbare Kanäle wie x/y/z, scale, opacity, clip-path, masks – nicht für verborgenen Hilfszustand.
Objektidentität bewahren
Bewahren Sie die Objektidentität, wenn Kontinuität wichtig ist. Verwenden Sie Crossfades nur, wenn die beabsichtigte Bewegung ein Ersatz oder eine Auflösung ist.
Der letzte Frame ist Teil der Animation
Der letzte Frame ist Teil der Animation, kein Aufräumschritt. Setzen Sie ihn nicht auf den Ruhezustand zurück, sofern nicht ausdrücklich gewünscht. Enden Sie nicht auf Schwarz, sofern nicht ausdrücklich gewünscht.
Subjekte und Posen benennen
Benennen Sie das sich bewegende Subjekt und die Posen, die nötig sind, um die beabsichtigte Bewegung zu belegen, einschließlich des Endzustands.

04 In Betrieb nehmen

Installieren Sie hyperframes-keyframes in Claude Code oder Codex

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

Fügen Sie hyperframes-keyframes zu Claude Code, Codex oder Ihrem Agent hinzu

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

Terminal

npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-keyframes

Generische skills-CLI-Form für skills/hyperframes-keyframes/SKILL.md; das Repository kann einen eigenen Pfad dokumentieren.

Geben Sie dem Skill eine erste Motion- und Video-Aufgabe

In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr Material.

Starter prompt

Add a Ken Burns punch-in to [clip-id] starting at 2.5s: scale from 1.0 to 1.4 over 3 seconds with ease-out, translating the wrapper 15% right and 10% up to reframe on the subject's face. Hold the final framing for 1 second. Register the timeline and verify with a strip shot showing the route.

Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

Führen Sie hyperframes lint aus, um auf strukturelle Probleme zu prüfen
Führen Sie hyperframes check aus, um die Composition zu validieren
Führen Sie hyperframes keyframes mit --shot und --samples aus, um Ziele, Stopps, Pfade und zeitliche Abstände zu überprüfen
Verwenden Sie --layout strip, um Bewegung vor Ort, Überlappungen, Kontakt und subtile Skalierungs-/Opazitätsänderungen nachzuweisen
Verwenden Sie --ghost mit --angle, um Canvas-, WebGL-, Shader-Bewegung und 3D-Tiefenprojektion nachzuweisen
Erstellen Sie Snapshots am ersten Frame, bei Beweis-Posen, final-minus-hold und exaktem Endframe, um Masken, Textlesbarkeit, vollständigen Zustand und das Fehlen von Schwarz-/Reset-Enden zu überprüfen

In OpenDesign importieren Sie hyperframes-keyframes über den SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es dann in der oberen Leiste aus.

OpenDesign herunterladen Quickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Author: HeyGen
Repository: github.com/heygen-com/hyperframes Branch main
Skill-Datei: skills/hyperframes-keyframes/SKILL.md Content-Prüfsumme bei Verifizierung erfasst; Commit 558c11b
License: Apache-2.0 Aus LICENSE.
Repository-Sterne: 49.761 GitHub-Snapshot vom 14.09.2026 für das gesamte Repository heygen-com/hyperframes, das 9 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl speziell für hyperframes-keyframes.
Verifiziert von OpenDesign: 14.09.2026 Quelldatei, Pfad, Lizenztext und Sternezählung wurden geprüft. Nicht in OpenDesign main gebündelt (geprüft 28.08.2026); ein Live-Durchlauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

Bearbeitungsgrenze für ErstellerKeyframes steuern die visuelle Bewegung; der Core übernimmt Clip-Zusammenstellung, Trimmen, Spleißen, Quelloffsets und Hard Cuts
AblaufFünfstufiger Workflow von der Identifikation von Subjekt und Zuständen über die Erstellung und Verifikation bis zu diagnosegetriebenen Korrekturen
VertragBenennen Sie Subjekte und Posen, definieren Sie Keyframes für sichtbare Kanäle, bewahren Sie die Identität, halten Sie Zustände lange genug, behandeln Sie den letzten Frame als Animation
LaufzeitregelnGSAP pausierte Timelines, CSS fill-mode both, Anime autoplay false, Registrierungsanforderungen, verbotene Timer-/Zufalls-/Async-Muster
Keyframe-FormenArray-Keyframes, Prozent-Keyframes, Property-Arrays, ease-none-Parent mit Easing pro Stop, easeEach für einheitliches Gefühl
KanäleBevorzugen Sie Compositor-/Visualkanäle wie x/y/scale/opacity; vermeiden Sie Layout-/Lifecycle-Kanäle wie top/left, width/height, display
MechanismusauswahlTabelle, die Anforderungen den kleinstmöglichen Mechanismen zuordnet: FLIP, Pfadbewegung, Stroke Draw, Formeninterpolation, Stagger, Textunterteilung, 3D
TimingAntizipation, Beschleunigung, Höhepunkt-Nachweis, Nachlauf, Overshoot, Ease-Wahl, Stagger-Offsets, finale Halts, kontinuierliche Geschwindigkeit
TextBewahren Sie Zeilenboxen, Wortabstände, Lesbarkeit, finale Passform; bewegen Sie Glyphen oder maskierte Bänder; erstellen Sie Snapshots lesbarer Frames
SVGDrawSVGPlugin für Stroke-Wachstum, MorphSVGPlugin für Formeninterpolation, Konvertierung von Primitiven in Pfade, Aufteilung komplexer Silhouetten
3DVerwenden Sie perspective, preserve-3d, z-Bewegung, Rotation, Kamera-/Weltbewegung, Verdeckung, Layer-Reihenfolge; belegen Sie Tiefe mit diagnostischen Winkeln
Canvas / WebGLKeyframes für Kamera, Objekttransformation, Material, Shader-Uniforms; Rendern aus der HyperFrames-Zeit; --ghost zum Nachweis verwenden

Die eigene Beschreibung des Skills

„Verwenden Sie dies, wenn eine HyperFrames-Komposition einen Punch-in, Punch-out, Zoom, Reframe, Ken-Burns-Effekt, Kamerabewegung, visuellen Match/Whip-Übergang oder andere seek-sichere 2D/3D-Keyframes benötigt; auch für GSAP, CSS-Keyframes, Anime.js, WAAPI, FLIP, Pfade, Masken, SVG-Morph/Draw, Text-Trails, 3D-Tiefe oder `hyperframes keyframes`-Diagnose. Nicht verwenden für breite Szenenstrategie, Markendesign, Medienbeschaffung, Untertitel oder allgemeine Videoplanung."

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 15.899 Zeichen. Vollständige Datei auf GitHub lesen.

06 Vor der Installation

Fragen zum Skill hyperframes-keyframes

Die Antworten stammen aus der SKILL.md, gelesen am 14.09.2026, nicht aus einem protokollierten Lauf.

Was ist der Unterschied zwischen diesem Skill und hyperframes-animation?

Dieser Skill übernimmt die Keyframe-Implementierung und die Mechanik der visuellen Bewegung. Verwenden Sie hyperframes-animation für breite Szenen-Rezepte und visuelle Übergabe-Choreografie. Verwenden Sie hyperframes-cli für die vollständige Befehlsdokumentation. Dieser Skill konzentriert sich auf das Erstellen, Registrieren und Verifizieren der eigentlichen Keyframes.

HyperFrames Keyframes

hyperframes-keyframes für eine echte Motion- und Video-Aufgabe ausführen.

OpenDesign herunterladen, hyperframes-keyframes über den SKILL.md-Link importieren, den obigen Prompt einfügen und den Plan vor dem Ergebnis lesen.

OpenDesign herunterladen Alle Skills durchsuchen

Terminal

npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-keyframes

Was der hyperframes-keyframes Skill in Claude Code und Codex leistet

In den eigenen Worten des Skills

So funktioniert es

Wann Sie das hyperframes-keyframes Skill verwenden

Gut geeignet

Grenzen kennen

Was Sie bereitstellen sollten

Regeln, die die hyperframes-keyframes Skill Claude Code und Codex vorgibt

Pausierte GSAP-Timelines

Anime.js Autoplay False

CSS-Keyframes Fill Mode

Niemals Timer oder Zufall verwenden

Nur sichtbare Kanäle als Keyframes

Objektidentität bewahren

Der letzte Frame ist Teil der Animation

Subjekte und Posen benennen