HyperFrames Keyframes

Was macht HyperFrames Keyframes?

Keyframes sind ein Posenvertrag: sichtbare Zustände, kontinuierliche Subjektidentität, suchsichere Laufzeit, verifizierte Pixel.

Verwende hyperframes-animation für umfassende Szenenrezepte. Verwende hyperframes-cli für die vollständige Befehlsdokumentation. Verwende references/keyframe-patterns.md nur dann, wenn du Implementierungsmechanismen und nicht den visuellen Stil auswählst.

Grenzen der Creator-Bearbeitung

Keyframes besitzen die visuelle Bewegung, nicht die Clip-Montage. Harte Schnitte, Trimmen, Splice und Neuanordnen von Quellbereichen gehören zu /hyperframes-core: Author ein Medienelement pro beibehaltenem Bereich, platziere es mit data-start und data-duration und wähle seinen Quellversatz mit data-media-start. Angrenzende Bereiche erzeugen einen harten Schnitt. Ein Überblenden verwendet überlappende Clips auf verschiedenen Spuren plus visuelle Opazitäts-Keyframes; Tonüberblendungen verwenden /hyperframes-audio.

Creator-Anfrage	Wahrheitsgemäßer Mechanismus
Punch-in / Punch-out	Keyframe scale mit x/y oder prozentualer Verschiebung auf einem nicht zeitgesteuerten visuellen/Crop-Wrapper innerhalb des Clips. Verwende ein festes/kurzes Tween für einen harten Punch und ein Tween für eine sanfte Bewegung.
Sanfter Multi-State-Zoom oder Reframe	Halte einen Subjekt-Wrapper am Leben und autorisiere mehrere Zoom/Reframe-Zustände als Posenleiter mit segmentweiser Easing.
Schwenken, Reframe oder Ken-Burns-Kamerabewegung	Animiere Wrapper-Verschiebung plus Skalierung. Die Geometrie wird authored; dies ist keine Gesichtsverfolgung oder automatische semantische Neurahmung.
Verkettete Kamerabewegungen	Verkette beschriftete Transform-Beats auf einer registrierten suchsicheren Timeline.
Match Cut oder Whip Pan	/hyperframes-animation besitzt die visuelle Übergabe; /hyperframes-registry liefert Primitive; Keyframes bewahren die authored Geometrie, Richtung und Geschwindigkeit. Es gibt keine automatische Frame-Erkennung.
Crop- und Masken-Reframe	Interpoliere clip-path oder eine Maske auf einem inneren visuellen Wrapper, um zu croppen/reframen, ohne die Quellzeit zu ändern. Polygon-Keyframes können einen Polygon/Masken-Übergang bilden.
Direktionaler Wipe-Schnitt oder Iris/Reveal-Schnitt	Animiere eine Masken/Clip-Grenze über überlappende visuelle Clips; /hyperframes-animation besitzt die Übergabechoreografie.
Split-Screen-Übergabe	Behalte beide visuellen Clips bei, die von Core platziert wurden, und keyframe dann ihre inneren Crop/Masken-Wrapper und die Teilungsgeometrie.
Konstante Quellzeitänderung	/hyperframes-core besitzt die normalisierte data-playback-rate (0,1..5) für render-sicheres Bild und tonhöhenerhaltenen Ton. Sie ist konstant für das gesamte Medienelement.
Quellgeschwindigkeitsrampen	Nicht unterstützt: Es gibt keine zeitveränderliche Wiedergabegeschwindigkeitshüllkurve. Verarbeite ein abgeleitetes Medien-Asset vor und platziere es dann über Core.
Einfrieren / Halten	Eine visuelle Pose, der letzte Quellframe oder eine abgeschlossene Unterkomposition kann gehalten werden. Ein beliebiges Einfrieren in der Mitte der Quelle wird nicht unterstützt; verarbeite ein Standbild/abgeleitetes Segment vor, platziere es als eigenen Clip und fahre mit einem anderen Quellbereich fort.

Wenn du Bild und Ton zusammen bearbeitest, lade /hyperframes-core, dieses Skill für visuelle Bewegung und /hyperframes-audio für Ein-/Ausblendungen, Überblendungen, Lautstärkeautomation, Ducking/Carve oder Effekte auf den platzierten Spuren.

Eine visuelle Überblendung oder Crop-Behandlung ist kein zeitliches Trimmen oder Spleißen der Quelle. /hyperframes-core besitzt die Timeline, das Clip-Timing und die Quellbereiche; Keyframes animieren nur die sichtbare Übergabe oder den Crop auf den Wrappern innerhalb dieser Clips. Für kopierbare kombinierte Bild/Ton-Rezepte verwende /hyperframes-core → references/creator-editing-recipes.md.

Vorgehen

1. Identifiziere das animierte Subjekt, die sichtbaren Zustände, den Endzustand und die Laufzeit.
2. Wähle den kleinsten Mechanismus, der die Aufforderung beweist. Lese references/keyframe-patterns.md nur, wenn der Mechanismus unklar ist.
3. Autorisiere suchsichere Keyframes in der deklarierten Laufzeit. Baue synchron auf und registriere die Laufzeitinstanz.
4. Überprüfe mit hyperframes lint, hyperframes check, hyperframes keyframes, einem fokussierten --shot und Schnappschüssen zu den Beweiszeitpunkten.
5. Wenn der Beweis fehlschlägt, korrigiere die Quell-Keyframes und führe die kleinste fehlschlagende Diagnose erneut aus, bevor du renderst.

Vertrag

• Benenne das sich bewegende Subjekt.
• Benenne die Posen, die benötigt werden, um die beabsichtigte Bewegung zu beweisen, einschließlich des Endzustands.
• Keyframe sichtbare Kanäle, keine verborgenen Helferzustände.
• Bewahre die Objektidentität, wenn Kontinuität wichtig ist.
• Überblende nur, wenn die beabsichtigte Bewegung ein Austausch oder eine Auflösung ist.
• Halte lesbare oder semantische Zustände lange genug, um sie zu sehen.
• Der letzte Frame ist Teil der Animation, kein Aufräumen.
• Setze nicht auf Ruhe zurück, es sei denn, es wurde angefordert.
• Beende nicht auf Schwarz, es sei denn, es wurde angefordert.
• Wenn du eine Startszene bearbeitest, bewahre Layout, Kopie, Assets, Farben und Endzustand, es sei denn, du wirst gebeten, sie neu zu gestalten.

Laufzeitregeln

GSAP:

• Baue synchron beim Seitenladen
• verwende gsap.timeline({ paused: true })
• registriere als window.__timelines[compositionId]
• Registrierungsschlüssel muss mit data-composition-id übereinstimmen
• rufe tl.play() nicht für renderkritische Bewegungen auf
• halte Wiederholungen endlich

CSS-Keyframes:

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

Anime.js:

• erstelle synchron
• autoplay: false
• endliche Dauer und Schleifen
• schiebe jede Instanz zu window.__hfAnime

WAAPI:

• endliche duration
• fill: "both"
• deterministische Konstruktion
• die Textoberfläche listet WAAPI nicht auf; überprüfe mit --shot (es sucht WAAPI) und Schnappschüssen

Verwende niemals für renderkritische Bewegungen:

• Date.now()
• performance.now()
• ungesätes Math.random()
• Hover/Scroll-Trigger
• Timer
• asynchron erstellte Timelines
• nicht registrierte requestAnimationFrame
• Endlosschleifen

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;

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

Keyframe-Formen

• Array-Keyframes: Posenleiter mit schrittweiser Dauer/Easing.
• Prozentuale Keyframes: exaktes Timing innerhalb eines Tweens.
• Eigenschafts-Arrays: kompakte Multi-Stop-Änderungen.
• ease: "none" auf dem Elternteil, wenn jeder Stop sein eigenes Easing hat.
• easeEach, wenn jedes Segment dasselbe Gefühl teilen soll.

Kopiere keine numerischen Abstände oder Timings aus Beispielen. Leite sie aus der tatsächlichen Kompositionsgeometrie und -dauer ab.

Für ein Subjekt, das sich zwischen zwei Boxen bewegt, bevorzuge einen kontinuierlichen Transform-Tween oder FLIP. Teile x/y/scale nur dann in mehrere erweichte Keyframes auf, wenn der Betrachter deutliche Beats spüren soll; jedes Segment ändert die Geschwindigkeit und kann als Ruckeln wahrgenommen werden.

Kanäle

Bevorzuge Kompositor-/visuelle Kanäle: x/y/z, xPercent/yPercent, scale, rotationX/Y/Z, skew, transformOrigin, svgOrigin, opacity, autoAlpha, clip-path, Masken, CSS-Variablen, SVG-Pfad/Dash-Werte, Kameratransformationen, Shader-Uniforms.

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

Für Sichtbarkeitsänderungen verwende autoAlpha auf der registrierten suchbaren GSAP-Timeline oder ein nulldauerndes tl.set() an einer expliziten Grenze. Ziele nur auf ein Nicht-Clip-Element oder einen Wrapper innerhalb des Clips; ziele niemals auf .clip selbst. Tweene niemals visibility mit Dauer und tweene niemals display.

Mechanismusauswahl

Wähle den kleinsten Mechanismus, der die Aufforderung beweist:

Bedarf	Mechanismus
Gleiches Subjekt ändert Box oder Hierarchie	gemeinsames Element / FLIP
Subjekt reist auf sichtbarer Route	Pfadreise
Strich wächst oder zeichnet nach	Strichzeichnung
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-Gegentransformation
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 verdeutlichen. Dekoration ist kein Beweis.

Timing

• Antizipation nur, wenn sie Ursache oder Richtung verdeutlicht.
• Beschleunigung verlässt die Ruhe.
• Der Höhepunkt des Beweises zeigt den Mechanismus unverkennbar.
• Nachschwung verkauft Energie und Richtung.
• Überschwingen nur, wenn sich das Subjekt elastisch oder taktil anfühlen soll.
• Gleichmäßige Pfadreise benötigt normalerweise ease: "none".
• Diskrete UI-Zustände benötigen normalerweise ein scharfes Ease-Out.
• Wiederholte Elemente benötigen geordnete Versätze, keine identischen Timings.
• Endverriegelungen benötigen längere Halte als Übergangsposen.
• Glätte bedeutet kontinuierliche Geschwindigkeit auf demselben Subjekt.
• Überschneide keine Tweens, die dieselbe Transform-Eigenschaft schreiben, es sei denn, die Überschneidung ist beabsichtigt und verifiziert.
• Vermeide das Animieren großer clip-path/Masken-Änderungen, während dieselbe Heldenoberfläche auch skaliert oder reist; verwende verschachtelte Enthüllungen, nachdem sich die Hauptbewegung beruhigt hat.

Text

Bewahre Zeilenboxen, Wortabstände, Lesbarkeit und endgültige Passform. Wenn sich Text intern bewegt, bewege die Glyphen oder maskierten Bänder, nicht nur Dekorationen um den Text herum. Mache Schnappschüsse von lesbaren Frames.

SVG

Für Strichwachstum bevorzuge DrawSVGPlugin, dann stroke-dasharray/stroke-dashoffset. Für Forminterpolation bevorzuge MorphSVGPlugin; konvertiere Primitive bei Bedarf in Pfade und teile komplexe Silhouetten in einfachere Teile.

3D

Skalierung allein ist falsche Tiefe. Verwende Perspektive auf einem stabilen Elternteil, transform-style: preserve-3d, z-Reise, Rotation, Kamera/Welt-Bewegung, Okklusion und Ebenenreihenfolge, wenn sich Objekte kreuzen.

Verwende einen oder zwei diagnostische Winkel, die die Tiefenbeziehung offenlegen. Wenn der angewinkelte Beweis keine Tiefenkreuzung zeigt, verbessere z/Kamera/Okklusion.

Canvas / WebGL

Keyframe Kameraposition, Kameraziel, Objekttransformation, Materialopazität, Shader-Uniforms und Postprocess-Intensität durch deterministischen Zustand. Rendere aus der HyperFrames-Zeit. Verwende --ghost, weil Markerboxen interne Canvas-Bewegungen nicht sehen können.

CLI-Proof

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ähle <selector> für das echte animierte Subjekt. Wähle <times> für den ersten Frame, Beweisposen, End-minus-Halte und exaktes Ende. Wähle <angle> nur, wenn Tiefe bewiesen werden muss.

Werkzeug	Beweist
keyframes	Ziele, explizite Stops, Pfade, Spuren, zusammengesetzte Eltern/Kind-Bewegung, CSS-Stops, 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, Endverriegelung, Schwarz/Rücksetz-Schwänze

Wenn der Selektorbeweis falsch aussieht:

1. führe --json erneut aus
2. finde das tatsächliche animierte Ziel
3. schieße auf dieses Ziel
4. mache Schnappschüsse von vollständigen Frames
5. vertraue gemalten Pixeln mehr als Logs

Diagnostisches Lesen

flat bedeutet keine expliziten mittleren Posen. keyframes bedeutet, dass explizite Stops existieren. motion-path .