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 player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
실행 점수 미검증
설치 방법 보기설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
All motion knowledge in one skill: rules (atomic recipes), blueprints (multi-phase scene templates), transitions (scene-to-scene), techniques (broader motion-design patterns), and adapters (per-runtime APIs).
For the composition contract (data attributes, sub-compositions, determinism) see hyperframes-core.
Pick 2-4 rules from rules-index.md, glue them together with a single paused GSAP timeline, done. This is faster and produces less code than starting from a blueprint.
Blueprints live in blueprints-index.md. Each entry points to blueprints/<id>.md (recipe). Do not read it speculatively; load it when you've already decided you need scene-level orchestration.
| Want to… | Read |
|---|---|
| Pick an atomic motion pattern by trigger / tag | rules-index.md |
| Read one rule's full HTML / CSS / GSAP recipe | rules/<name>.md |
| Pick a multi-phase scene template | blueprints-index.md |
| Read one blueprint's full recipe | blueprints/<id>.md |
| Author a scene transition (CSS-driven, between two clips) | transitions/overview.md, transitions/catalog.md |
| Look up a broader motion-design technique | techniques.md |
| Analyze an existing composition's animation map | scripts/animation-map.mjs |
| GSAP API — timeline / tweens / position parameters | adapters/gsap.md |
| GSAP — drop-in effect recipes | rules/gsap-effects.md |
| GSAP — transforms / perf | adapters/gsap-transforms-and-perf.md |
| GSAP — eases / stagger | adapters/gsap-easing-and-stagger.md |
| GSAP — timeline / labels | adapters/gsap-timeline-and-labels.md |
Lottie / dotLottie (After Effects exports, window.__hfLottie) | adapters/lottie.md |
Three.js / WebGL (3D scenes, 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-as-texture + WebGL/GLSL post-fx (capture live DOM via drawElementImage) | adapters/html-in-canvas-patterns.md |
Named text-animation effects (24 IDs via external animate-text skill) | adapters/animate-text.md |
Multiple runtimes can coexist in one composition. Each registers its instances on the runtime-specific global so HyperFrames can seek all of them in one pass.
Prerequisite: hyperframes-core → Non-Negotiable Rules (single paused timeline, data-duration governs length, no Math.random / Date.now / performance.now, no repeat: -1, no page-load gsap.set on later-scene clips, no display or raw visibility tweens, and no timeline construction inside async / setTimeout / Promise). GSAP autoAlpha and zero-duration visibility sets at explicit timeline boundaries remain allowed by core. Use those exceptions only on non-clip elements or wrappers inside a clip; the framework owns .clip lifecycle. Don't restate the full contract here.
Animation-craft additions on top of core's contract:
getBoundingClientRect() at tween time. Tween-time DOM measurements desync because the renderer samples in parallel; compute coordinates once at composition setup and reuse.x, y, scale, rotation). Core's allowlist also permits opacity / color / backgroundColor / borderRadius for non-spatial property tweens — but never width / height / top / left for layout changes.node skills/hyperframes-animation/scripts/animation-map.mjs <composition-dir> \
--out <composition-dir>/.hyperframes/anim-map
Reads every GSAP timeline registered on window.__timelines, enumerates tweens, samples bboxes, computes flags, outputs animation-map.json. Use it to audit choreography (dead zones, stagger consistency, lifecycle warnings) after authoring.
animation-map.mjs resolves helper packages from the current project first, then can bootstrap the bundled HyperFrames package version. Set HYPERFRAMES_SKILL_PKG_VERSION=<version> only when running the skill outside the bundled CLI/skill install and you need to pin that bootstrap version explicitly.
hyperframes-core — composition structure, data attributes, sub-compositions, deterministic render contracthyperframes-creative — palettes, typography, narration, beat planning (non-animation creative direction)hyperframes-cli — npx hyperframes lint / check / snapshot / preview / render아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.
로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.
Use when the user wants to learn, be taught, be quizzed, or understand an idea across any domain — science, math, philosophy, code, law, politics, psychology, medicine, arts, or history — with active scaffolding.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
This skill helps with using the @ax-llm/ax TypeScript library for building LLM applications. Use when the user asks about ax(), ai(), f(), s(), agent(), flow(), AxGen, AxAgent, AxFlow, signatures, streaming, or mentions @ax-llm/ax.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
This skill helps an LLM generate correct AxAgent code using @ax-llm/ax. Use when the user asks about agent(), child agents, namespaced functions, discovery mode, shared fields, llmQuery(...), RLM code execution, recursionOptions, or agent runtime behavior. For tuning and eval with agent.optimize(...), use ax-agent-optimize.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
This skill helps an LLM generate correct AxAgent tuning and evaluation code using @ax-llm/ax. Use when the user asks about agent.optimize(...), judgeOptions, eval datasets, optimization targets, saved optimizedProgram artifacts, or recursive optimization guidance.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
This skill helps an LLM generate correct AI provider setup and configuration code using @ax-llm/ax. Use when the user asks about ai(), providers, models, presets, embeddings, extended thinking, context caching, or mentions OpenAI/Anthropic/Google/Azure/Groq/DeepSeek/Mistral/Cohere/Together/Ollama/HuggingFace/Reka/OpenRouter with @ax-llm/ax.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
This skill helps an LLM generate correct AxFlow workflow code using @ax-llm/ax. Use when the user asks about flow(), AxFlow, workflow orchestration, parallel execution, DAG workflows, conditional routing, map/reduce patterns, or multi-node AI pipelines.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.