hyperframes-animationvon HeyGen

HyperFrames Animation Skill.

Ein Skill für Claude Code und Codex für Motion und Video: Animationsregeln, Szenen-Blueprints, Übergänge und Runtime-Adapter für HyperFrames.

Motion & Video
Video

OpenDesign herunterladen Anleitung ansehen

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

--- name: hyperframes-animation description: All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie … --- ## Default: compose atomic rules ## Load a blueprint when ## Routing ## Picking a runtime ## Critical Constraints ## Scripts

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

01 Was es tut

Was das hyperframes-animation 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

Liefert das gesamte Animationswissen für HyperFrames: atomare Bewegungsregeln, mehrphasige Szenen-Blueprints, Szenenübergänge, Motion-Design-Techniken und sieben Runtime-Adapter (GSAP als Standard, außerdem Lottie, Three.js, Anime.js, CSS-Keyframes, Web Animations API, TypeGPU). Nutzer wählen 2-4 atomare Regeln und kombinieren sie zu einer einzigen pausierten GSAP-Timeline, laden ein mehrphasiges Blueprint für komplexe Choreografien mit 4-5 Phasen oder schlagen Runtime-spezifische APIs nach.

Deckt außerdem das Auditieren bestehender Kompositionen über animation-map.mjs und 24 benannte Text-Animationseffekte ab. GSAP ist der Standard für 95 % der Motion-Arbeit und deckt Timeline-Orchestrierung, Transforms, Easing und Stagger ab. Alles ist HyperFrames-native: eine einzige pausierte Timeline, seek-sicher, deterministisch.

Was er erzeugt

animation-map.json mit Choreografie-Audit-Daten zu toten Zonen, Stagger-Konsistenz und Lifecycle-Warnungen

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Atomare Regeln auswählen und kombinieren
Wählen Sie 2-4 Regeln aus rules-index.md aus und fügen Sie sie mit einer einzigen pausierten GSAP-Timeline zusammen. Dies ist der Standard-Workflow, schneller als der Einstieg über ein Blueprint.
02
Ein Blueprint für mehrphasige Szenen laden
Wenn die Szene einer bereits vorhandenen, vordesignten Vorlage wie brand-reveal oder social-proof entspricht, laden Sie deren Rezept aus blueprints-index.md, um die Phasen-Pipeline wiederzuverwenden.
03
Runtime-spezifische APIs nachschlagen
Nutzen Sie die Routing-Tabelle, um GSAP-Eases und Timeline-Steuerungen, Lottie-Player-Methoden, Three.js-Mixer-APIs oder andere Runtime-spezifische Dokumentation nach Bedarf zu finden.
04
Choreografie mit animation-map auditieren
Führen Sie animation-map.mjs aus, um jede GSAP-Timeline zu lesen, alle Tweens aufzulisten, Bounding-Boxen zu sampeln, Flags zu berechnen und animation-map.json für das Auditieren von toten Zonen und Stagger-Konsistenz auszugeben.

02 Finden Sie Ihren Favoriten

Wann Sie das hyperframes-animation Skill verwenden sollten

Verwenden Sie das hyperframes-animation Skill in Claude Code oder Codex, wenn es um Motion und Video dieser Art geht. Einsatzbereich und Grenzen unten stammen aus der eigenen Datei des Skills.

Gut geeignet

Atomare Bewegungsmuster, ausgewählt nach Trigger oder Tag aus rules-index.md
CSS-gesteuerte Szenenübergänge zwischen zwei Clips
3D-Szenen, Kamerabewegung und Shader-gesteuerte Visuals mit Three.js
GPU-gerenderte Canvases mit Partikeln, Liquid-Glass oder benutzerdefinierten Shadern mit TypeGPU

Grenzen kennen

Animieren von Breite, Höhe, Top oder Left für Layoutänderungen

Was Sie bereitstellen sollten

Composition-VerzeichnisGeben Sie beim Ausführen von animation-map.mjs den Pfad zu Ihrem Composition-Verzeichnis an, um die Choreografie zu auditieren.
Blueprint-IDWenn Ihre Szene einer mehrphasigen Vorlage entspricht, geben Sie die Blueprint-ID aus blueprints-index.md an, um das vollständige Rezept zu laden.

03 Innerhalb des Skills

Regeln, die das hyperframes-animation Skill Claude Code und Codex gibt

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

Layout-Konstanten vorab berechnen
Positionen niemals zur Tween-Zeit aus getBoundingClientRect ableiten.
Räumliche Bewegung Verwendet Ausschließlich GSAP-Transform-Aliase
Verwenden Sie x, y, scale und rotation für alle räumlichen Bewegungen. Animieren Sie niemals width, height, top oder left für Layout-Änderungen.
GSAP Ist Die Standard-Laufzeitumgebung
GSAP ist bei 95 % der Motion-Arbeit die Standardwahl und deckt Timeline-Orchestrierung, Transforms, Easing und Stagger ab. Alle atomaren Regeln in diesem Skill basieren auf GSAP.
Atomare Regeln Standardmäßig Kombinieren
Wählen Sie 2–4 Regeln aus rules-index.md und kombinieren Sie sie. Das ist schneller und ergibt weniger Code, als mit einem Blueprint zu beginnen.
Mehrere Laufzeitumgebungen Können Koexistieren
Mehrere Runtimes können in einer Komposition koexistieren. Jede registriert ihre Instanzen auf der runtime-spezifischen Globalen, sodass HyperFrames alle in einem Durchgang finden kann.
Blueprints Nicht Spekulativ Lesen
Lesen Sie eine Blueprint-Datei nicht spekulativ; laden Sie sie erst, wenn Sie bereits entschieden haben, dass Sie eine Orchestrierung auf Szenenebene brauchen.
Nicht-räumliche Eigenschaften Sind Zulässig
Die Allowlist erlaubt opacity, color, backgroundColor und borderRadius für nicht-räumliche Eigenschafts-Tweens, aber niemals width, height, top oder left für Layout-Änderungen.

04 In Betrieb nehmen

hyperframes-animation in Claude Code oder Codex installieren

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

Fügen Sie hyperframes-animation 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-animation

Generische skills-CLI-Form für skills/hyperframes-animation/SKILL.md; das Repository kann seinen 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

Build a brand-reveal scene for [product name] using the multi-phase blueprint. The hero text should fade in with elastic ease at y:40, followed by a product card sliding up from y:60 with 0.2s stagger between child elements. Add a subtle pulse to the CTA button starting at 2.5s. Use GSAP as the runtime, ensure all spatial motion uses transform aliases (x, y, scale, rotation), and pre-calculate any layout constants at composition setup. Run animation-map.mjs on [composition directory] and output the audit results.

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:

Bestätigen Sie, dass alle Laufzeitinstanzen auf ihren laufzeitspezifischen Globals registriert sind, damit HyperFrames sie in einem Durchgang finden kann

In OpenDesign importieren Sie hyperframes-animation ü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-animation/SKILL.md Inhalts-Prüfsumme bei Verifizierung aufgezeichnet; 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 für hyperframes-animation.
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

Standard: atomare Regeln kombinierenWählen Sie 2–4 Regeln aus rules-index.md und kombinieren Sie sie mit der GSAP-Timeline, schneller als Blueprints
Blueprint laden, wennVerwenden Sie es, wenn die Szene einer Multi-Phasen-Vorlage entspricht oder Sie eine lauffähige Choreografie mit 4–5 Phasen benötigen
RoutingTabelle, die Aufgaben Dateien zuordnet: rules, blueprints, transitions, techniques, adapters, scripts
Eine Laufzeitumgebung wählenWann GSAP, Lottie, Three.js, Anime.js, CSS, WAAPI, TypeGPU zu verwenden ist
Kritische EinschränkungenVorberechnete Layout-Konstanten, ausschließlich GSAP-Transform-Aliase, keine width/height/top/left-Tweens
SkripteFühren Sie animation-map.mjs aus, um die Choreografie zu prüfen und animation-map.json auszugeben
Siehe auchLinks zu hyperframes-core, hyperframes-creative, hyperframes-cli

Die eigene Beschreibung des Skills

„Gesamtes Animationswissen für HyperFrames – atomare Bewegungsregeln, mehrphasige Szenenbaupläne, Szenenübergänge, erweiterte Motion-Design-Techniken UND die sieben Laufzeitadapter (GSAP Standard, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Für jede Bewegungs- oder Animationsaufgabe verwenden: 2–4 Regeln wählen und komponieren, oder einen Bauplan laden, oder laufzeitspezifische API nachschlagen (z. B. GSAP eases / Lottie player / Three.js mixer). Deckt auch die Prüfung der Choreografie (Animation Map) einer bestehenden Komposition und 24 benannte Textanimationseffekte ab. HyperFrames-nativ: einzelne pausierte Timeline, seek-sicher, deterministisch."

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

HyperFrames-Animation

Führen Sie hyperframes-animation mit einer echten Motion- und Video-Aufgabe aus.

Laden Sie OpenDesign herunter, importieren Sie hyperframes-animation über den SKILL.md-Link, fügen Sie den obigen Prompt ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladen Alle Skills durchsuchen

Terminal

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

Was das hyperframes-animation Skill in Claude Code und Codex leistet

In den eigenen Worten des Skills

So funktioniert es

Wann Sie das hyperframes-animation Skill verwenden sollten

Gut geeignet

Grenzen kennen

Was Sie bereitstellen sollten

Regeln, die das hyperframes-animation Skill Claude Code und Codex gibt

Layout-Konstanten vorab berechnen

Räumliche Bewegung Verwendet Ausschließlich GSAP-Transform-Aliase

GSAP Ist Die Standard-Laufzeitumgebung

Atomare Regeln Standardmäßig Kombinieren

Mehrere Laufzeitumgebungen Können Koexistieren

Blueprints Nicht Spekulativ Lesen

Nicht-räumliche Eigenschaften Sind Zulässig