Plugin-Installation: Vor Setup- oder Frische-Befehlen befolge die Plugin-Ausführungsregeln, wenn sich dieses Skill innerhalb eines HyperFrames-Plugins befindet. Bei eigenständigen Installationen gelten die untenstehenden Update-Anweisungen.
HyperFrames-Animation
Sämtliches Bewegungs-(Animations-)Wissen in einem Skill: Regeln (atomare Rezepte), Blaupausen (mehrphasige Szenenvorlagen), Übergänge (Szene-zu-Szene), Techniken (umfassende Motion-Design-Patterns) und Adapter (pro Laufzeit-APIs).
Den Kompositionsvertrag (Datenattribute, Subkompositionen, Determiniertheit) findest du in hyperframes-core.
Standard: Atomare Regeln kombinieren
Wähle 2-4 Regeln aus rules-index.md, füge sie mit einer einzelnen pausierten GSAP-Timeline zusammen – fertig. Das ist schneller und produziert weniger Code, als mit einer Blaupause zu beginnen.
Lade eine Blaupause, wenn …
- Die Szene einer vorhandenen, vorgefertigten mehrphasigen Vorlage (Marken-Enthüllung, Social Proof usw.) entspricht und die Wiederverwendung ihrer Phasen-Pipeline echte Authoring-Zeit spart.
- Du ausführbaren Ground-Truth-Code für eine komplexe 4-5-phasige Choreografie haben möchtest.
Blaupausen befinden sich in blueprints-index.md. Jeder Eintrag verweist auf blueprints/<id>.md (Rezept). Lies sie nicht spekulativ; lade sie erst, wenn du bereits entschieden hast, dass du eine szenenweite Orchestrierung benötigst.
Navigation
| Wunsch … | Lese dies |
|---|---|
| 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 einer Blaupause lesen | blueprints/<id>.md |
| Einen Szenenübergang (CSS-gesteuert, zwischen zwei Clips) erstellen | transitions/overview.md, transitions/catalog.md |
| Eine umfassende Motion-Design-Technik nachschlagen | techniques.md |
| Bewegungsunschärfe – Shutter-Smear auf einem Element und wann nicht | references/motion-blur.md |
| Die Animationskarte einer bestehenden Komposition analysieren | scripts/animation-map.mjs |
| GSAP-API – Timeline / Tweens / Positionsparameter | adapters/gsap.md |
| GSAP – vorgefertigte Effektrezepte | rules/gsap-effects.md |
| GSAP – Transforms / Performance | adapters/gsap-transforms-and-perf.md |
| GSAP – Easings / 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-Suche) | adapters/waapi.md |
TypeGPU / WebGPU (navigator.gpu, WGSL, Compute-Pipelines) | adapters/typegpu.md |
HTML-als-Textur + WebGL/GLSL-Post-FX (Live-DOM via drawElementImage) | adapters/html-in-canvas-patterns.md |
Benannte Textanimationseffekte (24 IDs über externes animate-text Skill) | adapters/animate-text.md |
Auswahl einer Laufzeit
- GSAP ist der Standard für 95% der Bewegungsarbeit – deckt Timeline-Orchestrierung, Transforms, Easing, Stagger ab. Alle atomaren Regeln in diesem Skill basieren auf GSAP.
- Lottie wenn ein Asset seine eigene vorberechnete Timeline hat (typischerweise After-Effects-Exporte), einschließlich Charakteren, die gehen, gestikulieren oder reagieren.
- Three.js für 3D-Szenen, Kamerabewegung, shadergetriebene Visuals.
- Anime.js für leichtgewichtige Tweens, wenn GSAP übertrieben wäre.
- CSS für einfache, sich wiederholende 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 → Unverhandelbare 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 auf späteren Szenen-Clips, keine display- oder rohen visibility-Tweens und keine Timeline-Konstruktion innerhalb von async / setTimeout / Promise). GSAP autoAlpha und Null-Dauer-Sichtbarkeitssetzungen an expliziten Timeline-Grenzen bleiben durch den Kern erlaubt. Verwende diese Ausnahmen nur für Nicht-Clip-Elemente oder Wrapper innerhalb eines Clips; das Framework besitzt den .clip-Lebenszyklus. Wiederhole hier nicht den vollständigen Vertrag.
Zusätzliche Animations-Erstellungsregeln über den Kernvertrag hinaus:
- Vorberechnete Layout-Konstanten – leite Positionen niemals während der Tween-Zeit aus
getBoundingClientRect()ab. DOM-Messungen zur Tween-Zeit desynchronisieren, weil der Renderer parallel abtastet; berechne Koordinaten einmalig beim Kompositions-Setup und verwende sie wieder. - Räumliche Bewegung verwendet nur GSAP-Transform-Alias (
x,y,scale,rotation). Die Zulassungsliste des Kerns erlaubt auchopacity/color/backgroundColor/borderRadiusfür nicht-räumliche Property-Tweens – aber niemalswidth/height/top/leftfür Layout-Änderungen.
Skripte
node skills/hyperframes-animation/scripts/animation-map.mjs <kompositionsverzeichnis> \
--out <kompositionsverzeichnis>/.hyperframes/anim-map
Liest jede auf window.__timelines registrierte GSAP-Timeline, zählt Tweens auf, tastet Bounding-Boxen ab, berechnet Flags und gibt animation-map.json aus. Verwende es, um die Choreografie nach dem Authoring zu überprüfen (tote Zonen, Stagger-Konsistenz, Lebenszyklus-Warnungen).
animation-map.mjs löst Hilfspakete zuerst aus dem aktuellen Projekt auf und kann dann die gebündelte HyperFrames-Paketversion bootstrappen. Setze HYPERFRAMES_SKILL_PKG_VERSION=<version> nur, wenn du das Skill außerhalb der gebündelten CLI/Skill-Installation ausführst und diese Bootstrap-Version explizit festlegen musst.
Siehe auch
hyperframes-core– Kompositionsstruktur, Datenattribute, Subkompositionen, deterministischer Rendervertraghyperframes-creative– Paletten, Typografie, Erzählung, Beat-Planung (nicht-animatorische kreative Richtung)hyperframes-cli–npx hyperframes lint / check / snapshot / preview / render