Plugin-Installationen: Bevor Sie Setup- oder Aktualisierungsbefehle ausführen, befolgen Sie die Plugin-Ausführungsregeln, wenn dieses Skill innerhalb eines HyperFrames-Plugins verwendet wird. Bei eigenständigen Installationen gelten die unten stehenden Aktualisierungshinweise.
HyperFrames-Animation
Das gesamte Bewegungs-Wissen in einem Skill: Regeln (atomare Rezepte), Blueprints (mehrphasige Szenenvorlagen), Übergänge (Szene-zu-Szene), Techniken (breitere Motion-Design-Muster) und Adapter (pro-Laufzeit-APIs).
Für den Kompositionsvertrag (Datenattribute, Unterkompositionen, Determinismus) siehe hyperframes-core.
Standard: Atomare Regeln kombinieren
Wählen Sie 2-4 Regeln aus rules-index.md aus, verknüpfen Sie sie mit einer einzelnen pausierten GSAP-Timeline – fertig. Das ist schneller und erzeugt weniger Code, als mit einem Blueprint zu beginnen.
Ein Blueprint laden, wenn
- Die Szene mit einer vorhandenen, vordefinierten mehrphasigen Vorlage übereinstimmt (Marken-Enthüllung, Social-Proof usw.) und die Wiederverwendung ihrer Phasen-Pipeline echte Autorenzeit spart
- Sie ausführbaren Ground-Truth-Code für eine komplexe 4-5-Phasen-Choreografie wünschen
Blueprints befinden sich in blueprints-index.md. Jeder Eintrag verweist auf blueprints/<id>.md (Rezept). Lesen Sie es nicht spekulativ; laden Sie es erst, wenn Sie sich bereits für eine szenenweite Orchestrierung entschieden haben.
Routing
| Möchten Sie… | Lesen Sie |
|---|---|
| Ein atomares Bewegungsmuster nach Auslöser/Tag auswählen | rules-index.md |
| Das vollständige HTML/CSS/GSAP-Rezept einer Regel lesen | rules/<name>.md |
| Eine mehrphasige Szenenvorlage auswählen | blueprints-index.md |
| Das vollständige Rezept eines Blueprints lesen | blueprints/<id>.md |
| Einen Szenenübergang erstellen (CSS-gesteuert, zwischen zwei Clips) | transitions/overview.md, transitions/catalog.md |
| Eine breitere Motion-Design-Technik nachschlagen | techniques.md |
| Bewegungsunschärfe — Shutter-Smear auf einem Element und wann man es nicht nutzen sollte | references/motion-blur.md |
| Den Animationsplan (animation map) einer bestehenden Komposition analysieren | scripts/animation-map.mjs |
| GSAP-API — Timeline / Tweens / Positionsparameter | adapters/gsap.md |
| GSAP — fertige Effekt-Rezepte | rules/gsap-effects.md |
| GSAP — Transformationen / Performance | adapters/gsap-transforms-and-perf.md |
| GSAP — Easing / Stagger | adapters/gsap-easing-and-stagger.md |
| GSAP — Timeline / Labels | adapters/gsap-timeline-and-labels.md |
Lottie / dotLottie (After-Effects-Exporte, window.__hfLottie) | adapters/lottie.md |
| Charakteranimation (Gehzyklus, Maskottchen, Gelenkpuppe, Gesten) | adapters/lottie.md → Charaktere |
Three.js / WebGL (3D-Szenen, AnimationMixer, hf-seek) | adapters/three.md |
Anime.js (window.__hfAnime) | adapters/animejs.md |
CSS-Keyframes (animation-delay / play-state / fill-mode) | adapters/css-animations.md |
Web Animations API (element.animate(), currentTime seek) | adapters/waapi.md |
TypeGPU / WebGPU (navigator.gpu, WGSL, Compute-Pipelines) | adapters/typegpu.md |
HTML-als-Textur + WebGL/GLSL-Post-Effekte (live DOM via drawElementImage erfassen) | adapters/html-in-canvas-patterns.md |
Benannte Textanimationseffekte (24 IDs via externes animate-text-Skill) | adapters/animate-text.md |
Auswahl einer Laufzeit
- GSAP ist der Standard für 95% der Bewegungsarbeit – deckt Timeline-Orchestrierung, Transformationen, Easing, Stagger ab. Alle atomaren Regeln in diesem Skill basieren auf GSAP.
- Lottie wenn ein Asset eine eigene vorgefertigte Timeline hat (typischerweise After-Effects-Exporte), einschließlich Charakteren, die gehen, gestikulieren oder reagieren.
- Three.js für 3D-Szenen, Kamerabewegungen, shader-basierte Visualisierungen.
- Anime.js für leichtgewichtiges Tweening, wenn GSAP übertrieben ist.
- CSS für einfache, wiederholte Motive, Dekoration, Schimmer – ohne JavaScript-Animationskosten.
- WAAPI für native Browser-Keyframes ohne GSAP-Abhängigkeit.
- TypeGPU / WebGPU für GPU-gerenderte Canvases (Partikel, Flüssigglas, benutzerdefinierte Shader).
Mehrere Laufzeiten können in einer Komposition koexistieren. Jede registriert ihre Instanzen auf der laufzeitspezifischen globalen Variable, sodass HyperFrames alle in einem Durchlauf suchen kann.
Kritische Einschränkungen
Voraussetzung: hyperframes-core → Nicht verhandelbare Regeln (einzelne pausierte Timeline, data-duration bestimmt die Länge, kein Math.random / Date.now / performance.now, kein repeat: -1, kein gsap.set beim Seitenladen für Clips späterer Szenen, kein display oder rohes visibility-Tweening, und keine Timeline-Erstellung innerhalb von async / setTimeout / Promise). GSAP-autoAlpha und Sichtbarkeitseinstellungen mit null Dauer an expliziten Timeline-Grenzen bleiben vom Kern erlaubt. Verwenden Sie diese Ausnahmen nur für Nicht-Clip-Elemente oder Wrapper innerhalb eines Clips; das Framework besitzt den .clip-Lebenszyklus. Wiederholen Sie den vollständigen Vertrag hier nicht.
Zusätzliche Einschränkungen für die Animationserstellung:
- Vorkalkulierte Layout-Konstanten — leiten Sie Positionen niemals zur Tween-Zeit von
getBoundingClientRect()ab. DOM-Messungen zur Tween-Zeit desynchronisieren, weil der Renderer parallel abtastet; berechnen Sie Koordinaten einmalig beim Kompositions-Setup und verwenden Sie sie wieder. - Räumliche Bewegungen verwenden ausschließlich GSAP-Transform-Aliase (
x,y,scale,rotation). Die Whitelist des Kerns erlaubt auchopacity/color/backgroundColor/borderRadiusfür nicht-räumliche Eigenschafts-Tweens – aber niemalswidth/height/top/leftfür Layout-Änderungen.
Skripte
node skills/hyperframes-animation/scripts/animation-map.mjs <composition-dir> \
--out <composition-dir>/.hyperframes/anim-map
Liest jede GSAP-Timeline aus, die auf window.__timelines registriert ist, zählt Tweens auf, tastet Bounding-Boxen ab, berechnet Flags und gibt animation-map.json aus. Verwenden Sie es, um nach der Erstellung die Choreografie zu prüfen (Totzonen, Stagger-Konsistenz, Lebenszyklus-Warnungen).
animation-map.mjs löst zuerst Helfer-Pakete aus dem aktuellen Projekt auf und kann dann die gebündelte HyperFrames-Paketversion bootstrappen. Setzen Sie HYPERFRAMES_SKILL_PKG_VERSION=<version> nur, wenn Sie das Skill außerhalb der gebündelten CLI/Skill-Installation ausführen und diese Bootstrap-Version explizit festlegen müssen.
Siehe auch
hyperframes-core— Kompositionsstruktur, Datenattribute, Unterkompositionen, deterministischer Render-Vertraghyperframes-creative— Paletten, Typografie, Erzählung, Beat-Planung (nicht-animatorische kreative Ausrichtung)hyperframes-cli—npx hyperframes lint / check / snapshot / preview / render