heygen-com/hyperframes

Plugin-Installation: Vor dem Ausführen von Setup- oder Aktualisierungsbefehlen befolgen Sie die Plugin-Ausführungsregeln, wenn sich dieser Skill innerhalb eines HyperFrames-Plugins befindet. Bei eigenständigen Installationen gelten die unten stehenden Aktualisierungshinweise.

HyperFrames Keyframes

Keyframes sind ein Pose-Vertrag: sichtbare Zustände, durchgehende Subjektidentität, suchsichere Laufzeit, verifizierte Pixel.

Verwenden Sie hyperframes-animation für allgemeine Szenenrezepte. Verwenden Sie hyperframes-cli für die vollständige Befehlsdokumentation. Verwenden Sie references/keyframe-patterns.md nur, wenn Sie Implementierungsmechanismen auswählen, nicht den visuellen Stil.

Bearbeitungsgrenze des Erstellers

Keyframes steuern die visuelle Bewegung, nicht die Clip-Assemblierung. Harte Schnitte im Quellbereich, Trimmen, Splice und Neuanordnung gehören zu /hyperframes-core: Pro beibehaltenem Bereich ein Medienelement erstellen, es mit data-start und data-duration platzieren und den Quell-Offset mit data-media-start auswählen. Benachbarte Bereiche ergeben einen harten Schnitt. Ein Crossfade verwendet überlappende Clips auf verschiedenen Spuren plus visuelle Opazitäts-Keyframes; Audioblenden verwenden /hyperframes-audio.

Anfrage des Erstellers	Wahrheitsgetreuer Mechanismus
Punch-in / Punch-out	Keyframe scale mit x/y oder prozentualer Verschiebung auf einem nicht-zeitgesteuerten visuellen/Crop-Wrapper innerhalb des Clips. Verwenden Sie ein kurzes Tween für einen harten Punch und ein Tween für eine sanfte Bewegung.
Sanfter Multi-State-Zoom oder Reframe	Einen Subjekt-Wrapper am Leben erhalten und mehrere Zoom/Reframe-Zustände als Pose-Leiter mit segmentweisem Easing erstellen.
Schwenken, Reframe oder Kameraschwenk	Wrapper-Translation plus Scale animieren. Geometrie wird manuell erstellt; dies ist keine Gesichtsverfolgung oder automatische semantische Neurahmung.
Verkettete Kamerafahrten	Markierte Transform-Beat auf einer registrierten suchsicheren Timeline verketten.
Match Cut oder Whip Pan	/hyperframes-animation besitzt die visuelle Übergabe; /hyperframes-registry liefert Primitive; Keyframes bewahren die erstellte Geometrie, Richtung und Geschwindigkeit. Es gibt keine automatische Framefindung.
Crop- und Mask-Reframe	clip-path oder eine Maske auf einem inneren visuellen Wrapper interpolieren, um zu croppen/reframen, ohne die Quellzeit zu ändern. Polygon-Keyframes können einen Polygon/Masken-Übergang bilden.
Gerichteter Wisch-Schnitt oder Iris/Reveal-Cut	Eine Masken/Clip-Grenze über überlappende visuelle Clips animieren; /hyperframes-animation besitzt die Übergabechoreografie.
Split-Screen-Übergabe	Beide visuellen Clips behalten, die vom Core platziert wurden, dann deren innere Crop/Mask-Wrapper und Trenngeometrie mit Keyframes versehen.
Konstante Quellzeitraffung	/hyperframes-core besitzt normalisierte data-playback-rate (0.1..10) für rendersichere Bild- und tonhöhenerhaltene Tonwiedergabe. Sie ist für das gesamte Medienelement konstant.
Quellgeschwindigkeitsrampen	Eine rate-Spur in data-automation auf <video>/<audio> (t in Clip-Sekunden, v 0.1..10, logarithmische Interpolation); sie überschreibt die konstante Rate.
Freeze / Halten	Ein visuelles Pose, endgültiger Quellframe oder abgeschlossene Sub-Komposition kann gehalten werden. Ein beliebiges Einfrieren mitten im Quellmaterial wird nicht unterstützt; ein Standbild/ein abgeleitetes Segment vorverarbeiten, als eigenen Clip platzieren, dann mit einem anderen Quellbereich fortfahren.

Wenn Bild und Ton gemeinsam bearbeitet werden, laden Sie /hyperframes-core, diesen Skill für die visuelle Bewegung und /hyperframes-audio für Blenden, Crossfades, Lautstärkeautomation, Ducking/Carve oder Effekte auf den platzierten Spuren.

Ein visueller Übergang oder eine Zuschneidebehandlung ist kein zeitlicher Quelltrim oder Splice. /hyperframes-core besitzt die Timeline, das Clip-Timing und die Quellbereiche; Keyframes animieren nur die sichtbare Übergabe oder den Zuschnitt auf Wrappern innerhalb dieser Clips. Verwenden Sie für kopierbare kombinierte Bild/Ton-Rezepte /hyperframes-core → references/creator-editing-recipes.md.

Verfahren

1. Das animierte Subjekt, die sichtbaren Zustände, den Endzustand und die Laufzeit identifizieren.
2. Den kleinsten Mechanismus wählen, der die Anfrage beweist. references/keyframe-patterns.md nur lesen, wenn der Mechanismus unklar ist.
3. Suchsichere Keyframes in der deklarierten Laufzeit erstellen. Synchron aufbauen und die Laufzeitinstanz registrieren.
4. Mit hyperframes lint, hyperframes check, hyperframes keyframes, einem fokussierten --shot und Snapshots zu Beweiszeitpunkten verifizieren.
5. Wenn der Beweis fehlschlägt, die Quell-Keyframes korrigieren und die kleinste fehlschlagende Diagnose erneut ausführen, bevor gerendert wird.

Vertrag

• Das sich bewegende Subjekt benennen.
• Die Posen benennen, die benötigt werden, um die beabsichtigte Bewegung zu beweisen, einschließlich des Endzustands.
• Sichtbare Kanäle mit Keyframes versehen, nicht versteckte Hilfszustände.
• Objektidentität bewahren, wenn Kontinuität wichtig ist.
• Crossfade nur, wenn die beabsichtigte Bewegung Ersetzung oder Auflösung ist.
• Lesbare oder semantische Zustände lange genug halten, um sie zu sehen.
• Der letzte Frame ist Teil der Animation, kein Aufräumen.
• Nicht in den Ruhezustand zurücksetzen, es sei denn, es wird verlangt.
• Nicht mit Schwarz enden, es sei denn, es wird verlangt.
• Beim Bearbeiten einer Starterszene Layout, Kopie, Assets, Farben und Endzustand beibehalten, es sei denn, ein Redesign wird verlangt.

Laufzeitregeln

GSAP:

• Synchron beim Seitenladen erstellen
• gsap.timeline({ paused: true }) verwenden
• Als window.__timelines[compositionId] registrieren
• Der Registry-Key muss mit data-composition-id übereinstimmen
• tl.play() nicht für rendkritische Bewegung aufrufen
• Wiederholungen endlich halten

CSS-Keyframes:

• Endliche Dauer und Iterationsanzahl
• Deterministische Verzögerung
• animation-fill-mode: both
• data-start verwenden, wenn das Timing zu einem Clip gehört

Anime.js:

• Synchron erstellen
• autoplay: false
• Endliche Dauer und Schleifen
• Jede Instanz zu window.__hfAnime hinzufügen

WAAPI:

• Endliche duration
• fill: "both"
• Deterministische Konstruktion
• Die Textoberfläche listet WAAPI nicht auf; mit --shot verifizieren (es sucht WAAPI) und Snapshots

Niemals für rendkritische Bewegung verwenden:

• Date.now()
• performance.now()
• Nicht gesetzter Math.random()
• Hover-/Scroll-Trigger
• Timer
• Asynchron erstellte Timelines
• Nicht registriertes requestAnimationFrame
• Unendliche Schleifen

GSAP-Skelett

const root = document.querySelector("[data-composition-id]");
const compositionId = root.dataset.compositionId;
const tl = gsap.timeline({ paused: true });

tl.addLabel("state-a", 0);
tl.to(".subject", {
  keyframes: [
    { x: 0, opacity: 1, duration: 0.2 },
    { x: 120, opacity: 1, duration: 0.4, ease: "power2.out" },
    { x: 100, opacity: 1, duration: 0.2, ease: "power2.inOut" },
  ],
  ease: "none",
});

window.__timelines = window.__timelines || {};
window.__timelines[compositionId] = tl;

Labels für semantische Zustände verwenden. Positionsparameter anstelle von verketteten Verzögerungen verwenden. immediateRender: false für spätere from()/fromTo()-Tweens verwenden, die dieselbe Eigenschaft berühren.

Keyframe-Formen

• Array-Keyframes: Pose-Leiter mit Schritt-für-Schritt-Dauer/Easing.
• Prozent-Keyframes: exaktes Timing innerhalb eines Tweens.
• Eigenschafts-Arrays: kompakte Multi-Stop-Änderungen.
• ease: "none" auf dem Elternteil, wenn jeder Stop sein eigenes Easing trägt.
• easeEach, wenn jedes Segment dasselbe Gefühl haben soll.

Keine numerischen Abstände oder Timings aus Beispielen kopieren. Sie aus der tatsächlichen Zusammensetzungsgeometrie und -dauer ableiten.

Für ein Subjekt, das sich zwischen zwei Boxen bewegt, einen kontinuierlichen Transform-Tween oder FLIP bevorzugen. Aufgeteilte x/y/scale in mehrere erleichterte Keyframes nur dann, wenn der Betrachter unterschiedliche Beats spüren soll; jedes Segment ändert die Geschwindigkeit und kann als Ruckler gelesen werden.

Kanäle

Bevorzugen Sie Compositor-/Visuelle Kanäle: x/y/z, xPercent/yPercent, scale, rotationX/Y/Z, skew, transformOrigin, svgOrigin, opacity, autoAlpha, clip-path, Masken, CSS-Vars, SVG-Pfad/Dash-Werte, Kamera-Transformationen, Shader-Uniforms.

Vermeiden Sie Layout-/Lifecycle-Kanäle: top/left/right/bottom, width/height, margin/padding, display, visibility, späte DOM-Erstellung, Helfer-Overlays, die Subjektbewegung ausführen.

Für Sichtbarkeitsänderungen verwenden Sie autoAlpha auf der registrierten suchsicheren GSAP-Timeline, oder ein tl.set() mit Nulldauer an einer expliziten Grenze. Zielen Sie nur auf ein Nicht-Clip-Element oder einen Wrapper innerhalb des Clips; zielen Sie niemals auf .clip selbst. Niemals rohes visibility mit Dauer tweenen und niemals display tweenen.

Mechanismusauswahl

Wählen Sie den kleinsten Mechanismus, der die Anfrage beweist:

Bedarf	Mechanismus
Gleiches Subjekt ändert Box oder Hierarchie	Gemeinsames Element / FLIP
Subjekt reist eine sichtbare Route	Pfadreise
Strich wächst oder zeichnet	Strich zeichnen
Form wird zu einer anderen Form	Forminterpolation
Enthüllungsgrenze ist sichtbar	Clip, Maske oder Shader-Uniform
Viele Elemente bewegen sich mit Ordnung	Stagger / indizierte Verzögerung
Text selbst bewegt sich	Zeilen-, Wort-, Zeichen- oder Bandunterteilung
Oberfläche biegt, dehnt oder croppt	Eltern/Kind-Gegentransform
UI hat Zustände	Explizite Zustandsmaschine
Szene hat Tiefe	DOM 3D, Three.js oder WebGL-Kamera/Objekt-Keyframes

Mechanismen können kombiniert werden, aber jeder muss die Idee klären. Dekoration ist kein Beweis.

Timing

• Antizipation nur, wenn sie die Ursache oder Richtung klärt.
• Beschleunigung verlässt den Ruhezustand.
• Höhepunktbeweis zeigt den Mechanismus unverkennbar.
• Durchlauf verkauft Energie und Richtung.
• Überschwingen nur, wenn sich das Subjekt elastisch oder taktil anfühlen soll.
• Reisen mit konstanter Geschwindigkeit benötigen normalerweise ease: "none".
• Diskrete UI-Zustände benötigen normalerweise ein scharfes Aus-Easing.
• Wiederholte Elemente benötigen geordnete Offsets, nicht identisches Timing.
• Finale Verriegelungen benötigen längere Haltezeiten als Übergangsposen.
• Glätte bedeutet kontinuierliche Geschwindigkeit auf demselben Subjekt.
• Überlappen Sie keine Tweens, die dasselbe Transform-Eigenschaft schreiben, es sei denn, die Überlappung ist beabsichtigt und verifiziert.
• Vermeiden Sie es, große clip-path/Masken-Änderungen zu animieren, während dieselbe Hauptoberfläche auch skaliert oder reist; verwenden Sie verschachtelte Enthüllungen, nachdem sich die Hauptbewegung beruhigt hat.

Text

Bewahren Sie Zeilenboxen, Wortabstände, Lesbarkeit und endgültige Passung. Wenn sich Text intern bewegt, bewegen Sie die Glyphen oder maskierten Bänder, nicht nur Dekorationen um den Text. Erstellen Sie Snapshots von lesbaren Frames.

SVG

Für Strichwachstum bevorzugen Sie DrawSVGPlugin, dann stroke-dasharray/stroke-dashoffset. Für Forminterpolation bevorzugen Sie MorphSVGPlugin; konvertieren Sie Primitive bei Bedarf in Pfade und teilen Sie komplexe Silhouetten in einfachere Teile auf.

3D

Maßstab allein ist falsche Tiefe. Verwenden Sie Perspektive auf einem stabilen Elternteil, transform-style: preserve-3d, Z-Reise, Rotation, Kamera-/Weltbewegung, Okklusion und Ebenenordnung, wenn Objekte sich kreuzen.

Verwenden Sie ein oder zwei diagnostische Winkel, die die Tiefenbeziehung offenlegen. Wenn der angewinkelte Beweis keine Tiefenkreuzung zeigt, verbessern Sie Z/Kamera/Okklusion.

Canvas / WebGL

Bewegen Sie die Kameraposition, das Kameraziel, die Objekttransformation, die Materialopazität, die Shader-Uniforms und die Nachbearbeitungsintensität durch deterministischen Zustand. Rendern Sie aus der HyperFrames-Zeit. Verwenden Sie --ghost, da Marker-Boxen die interne Canvas-Bewegung nicht sehen können.

CLI-Beweis

npx hyperframes lint
npx hyperframes check
npx hyperframes keyframes .
npx hyperframes keyframes . --json
npx hyperframes keyframes . --runtime all
npx hyperframes keyframes . --selector "<selector>" --shot "<file>" --samples <n>
npx hyperframes keyframes . --selector "<selector>" --shot "<file>" --layout strip --from <t0> --to <t1>
npx hyperframes keyframes . --shot "<file>" --ghost --angle <angle>
npx hyperframes snapshot . --at <times>

Wählen Sie <selector> für das reale animierte Subjekt. Wählen Sie <times> für den ersten Frame, Beweisposen, Final-Minus-Halt und exakten End-Frame. Wählen Sie <angle> nur, wenn Tiefe bewiesen werden muss.

Tool	Beweist
keyframes	Ziele, explizite Stopps, Pfade, Spuren, zusammengesetzte Eltern/Kind-Bewegung, CSS-Stopps, Anime-Registrierung
--shot	Geister, Routenform, Zeitabstände, DOM-3D-Projektion, fokussierter Selektorbeweis
--layout strip	Bewegung an Ort und Stelle, Überlappungen, Kontakt, subtile Skalierung/Opazität, Textwellen
--ghost	Canvas, WebGL, Shader-Bewegung, gerendertes 3D
snapshot --at	Masken, Textlesbarkeit, vollständiger Zustand, endgültige Verriegelung, Schwarz-/Reset-Schwänze

Wenn der Selektorbeweis seltsam aussieht ...