Content & Media Creation · heygen-com/hyperframes

hyperframes-animation

Name: hyperframes-animation
Author: heygen-com/hyperframes

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.

L4 High-Privilege · Graded auth & full auditV1 Commit-PinnedExecute CommandInstall DepsNetwork AccessWrite FileDual-pass Audit

Author heygen-comGitHub heygen-com/hyperframes ↗Stars 48297License Apache-2.0（仓库根 LICENSE；GitHub API spdx Apache-2.0）Commit b8328f9573

Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

SKILL.md serves as the entry point and router for four layers of knowledge: atomic rules (rules-index.md indexing 48 recipes in rules/<name>.md) → multi-phase scene blueprints (blueprints-index.md indexing 22 blueprints) → transitions directory (16 files) → techniques.md; plus 12 runtime adapter cards.

skills/hyperframes-animation/SKILL.md

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).

The routing table contains about 30 lines: 'Pick an atomic motion pattern by trigger / tag | rules-index.md', 'Read one blueprint's full recipe | blueprints/<id>.md', etc. Actual file counts: 48 in rules/, 22 in blueprints/, 13 HTML files in examples/, 12 markdown files in adapters/, and 16 in transitions/.

The default authoring approach is composing atomic rules: pick 2-4 rules and stitch them together using a single paused GSAP timeline rather than starting from blueprints—claiming faster workflows and less code; blueprints are used only when a scene matches a pre-designed template.

skills/hyperframes-animation/SKILL.md

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.

Every rule in rules-index.md includes its own contract: a single paused timeline, bidirectionally seek-safe (fromTo explicit from-state), deterministic (bans Math.random/Date.now, relies on index-derived pseudorandomness), bans width/height/top/left tweens, bans CSS transitions on animated elements, etc.

All recipes are strictly constrained within the determinism contract of core, appending motion-layer-specific rules: pre-calculating layout constants (banning getBoundingClientRect during tweens—parallel renderer sampling would lose sync) and using only GSAP transform aliases for spatial movement.

skills/hyperframes-animation/SKILL.md

**Pre-calculated layout constants** — never derive positions from `getBoundingClientRect()` at tween time. Tween-time DOM measurements desync because the renderer samples in parallel; compute coordinates once at composition setup and reuse.

The Critical Constraints section references the Non-Negotiable Rules of core item by item without duplicating the full text ('Don't restate the full contract here')—enforcing a strictly one-way downward delegation of responsibilities across layers.

A functional runtime adapter layer exists: seven types of runtimes (GSAP default + Lottie/Three.js/Anime.js/CSS/WAAPI/TypeGPU-WebGPU) each register to the global scope (window.__hfLottie, window.__hfAnime, etc.), allowing HyperFrames to seek them all at once; adapter cards provide registration and seek conventions for each runtime within HyperFrames.

skills/hyperframes-animation/SKILL.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.

The routing table lists which card to read for each runtime (gsap.md / lottie.md / three.md / animejs.md / css-animations.md / waapi.md / typegpu.md / html-in-canvas-patterns.md / animate-text.md).

Auditability is backed by an actual script: animation-map.mjs reads all GSAP timelines in window.__timelines, enumerates tweens, samples bounding boxes, computes flags, and outputs animation-map.json for choreography review (dead zones, stagger consistency, lifecycle warnings).

skills/hyperframes-animation/scripts/animation-map.mjs

Reads every GSAP timeline registered in window.__timelines, enumerates tweens, samples bboxes at N points per tween, computes flags and human-readable summaries. Outputs a single animation-map.json.

Implemented via package-loader importing @hyperframes/producer and @hyperframes/core to run createCaptureSession (headless capture session)—requires packages to be installed in the project; bootstrapping only prompts for consent when missing (npm install --ignore-scripts, protected by pinned specs).

Dependency bootstrapping includes security guardrails: package-loader.mjs only installs pinned package specs, uses --ignore-scripts to disable dependency lifecycle scripts, spawns npm with an argv array rather than concatenating shell strings, displays install lines without executing them directly, and requests consent via confirmBootstrap prior to bootstrapping.

skills/hyperframes-animation/scripts/package-loader.mjs

// package-loader — bootstrap optional helper packages only when missing, with // defense-in-depth so a malicious or typo'd dependency can't run on install: // • install runs `npm install --ignore-scripts` — package lifecycle scripts // never execute

Comments from the same file: 'npm is spawned with an argv array (no shell) — never a built command string'; 'installLine strings below are DISPLAY ONLY … never handed to a shell or executed.'

2Core Capabilities

0148 atomic motion rules (categories including text, data, 3D, cursor, UI demos; searchable by tag or trigger word)

0222 multi-phase scene blueprints (brand-reveal, social-proof, etc., including runnable ground-truth code)

03Scene transitions catalog (transitions/: overview + catalog + individual CSS transition implementation cards)

0412 runtime adapter cards (GSAP, Lottie, Three.js, Anime.js, CSS, WAAPI, TypeGPU, HTML-in-canvas, animate-text)

0524 named text animation effects (integrated via the external animate-text skill)

06Animation map auditing (animation-map.mjs: timeline enumeration, tween sampling, bbox flags, JSON reports)

3External Dependencies

Kind	Dependency / Endpoint
package	@hyperframes/producer / @hyperframes/core（animation-map.mjs 运行时依赖；项目优先，缺失才 bootstrap）
network	产物运行期 CDN 库（gsap/three/animejs 经 jsdelivr 进 composition/示例——作品级依赖，渲染浏览器加载）
cli	hyperframes CLI（lint/check/snapshot/render，验证动画产出；命令细节在 hyperframes-cli）
package	外部 animate-text skill（24 个具名文本动画效果的实现方）

4Recommended Governance & Evidence

Suggested Controls for Safe Operation

For Agent Runtime

Graded/per-use authorization, sandbox recommended

For Administrators

Approval workflow, rollback support, full audit

Evidence & Triggers (File Paths & Excerpts)

scripts/: Executes local scripts or commands: node skills/hyperframes-animation/scripts/animation-map.mjs <composition-di
scripts/ 或 SKILL.md: Declares dynamic installation of external language package dependencies
网络端点: Declares external network access: package bootstrap (only when dependencies are missing and user consents): official @hyperframes packages from npm registry
本地工作目录: File read/write and artifact output: Author output: composition HTML/styles/scripts (within project)

Audit Notes: No credential access and no third-party data exfiltration; executes official hyperframes packages (prioritizes local project install, bootstrapping via npm install --ignore-scripts only upon user consent when missing) alongside local headless capture; composition runtime pulls public animation libraries via CDN. Involves no destructive or delete operations; classified under blue tier per unified guidelines ('ships local scripts, writes local configs, no credential contact' with network access limited to official packages/public CDNs, touching no tokens).

5Second-Pass Verification

[ok] rules-index/blueprints 数量与路由声称一致 — find 实测 rules/ 48 个 md、blueprints/ 22 个 md、examples/ 13 个 html、adapters/ 12 个 md、transitions/ 16 个，与 SKILL.md/rules-index 描述一致。
[ok] 『7 个运行时适配器』声称（GSAP+Lottie+Three+Anime+CSS+WAAPI+TypeGPU） — adapters/ 目录实测含对应 7 种 + html-in-canvas-patterns + animate-text + gsap 细分 3 卡；TypeGPU 卡存在（WebGPU/WGSL）。
[ok] package-loader 安全声称（防依赖投毒） — 源码注释与实现复核：pinned spec 断言（assertPinnedPackageSpecs）、--ignore-scripts、argv spawn、display-only installLine、confirmBootstrap 征求同意——逐条命中。
[discrepancy] animation-map 是否会在无依赖时擅自联网 — 首轮注记偏『项目优先』；复核发现若项目无包且用户同意 bootstrap 会执行 npm install（网络）——非默认路径但确实存在，已在外联 deps/scripts_executed 如实标注并保持 blue（官方包 + consent + --ignore-scripts）。
[ok] 有无把文档站链接误当外发依赖 — gsap.com/threejs.org/animejs.com 等仅为 adapter 卡内的 API 文档引用（人类阅读），非运行依赖，未列入 external_deps。

6Verdict & Scenarios

Knowledge is structured into four layers, each consumable independently: atomic rule composition as default, blueprints on-demand, and transitions/adapters by lookup—authoring overhead scales smoothly with complexity

Establishes 'deterministic / seek-safe' as the premise for all rules and defines it clearly once, keeping the rule library self-consistent without duplication

Script-level defensive design (pinned specs + --ignore-scripts + argv spawn + consent) serves as a best-practice model in the ecosystem

Unifies multiple runtimes (Lottie, Three.js, Anime.js, WAAPI, TypeGPU) into the seek architecture, accommodating real-world After Effects and 3D asset workflows

Best for: Suited for any HyperFrames motion authoring (from single rules to multi-phase scene blueprints to 3D/Lottie asset integration), animation choreography audits on existing compositions (animation-map), and skill authors seeking a reference for 'rule library + index + adapter layer' knowledge engineering architecture.

Not for: Not suited for non-animation visual, branding, or narrative direction (→ hyperframes-creative) or HTML structural contracts (→ hyperframes-core); advanced adapters like TypeGPU/WebGPU require host renderer support and cannot run in non-WebGPU environments.

Install Agent-Ready

① Verified Mirror 2026-09-09

Option A · Direct DownloadDownload hyperframes-animation.tar.gz

sha256: f370d7615a306ee2…

Option B · Copy Guide for Agent

install.json

Agents automatically download and verify mirrors from this JSON guide.

② Upstream GitHub

GitHub Repo ↗

Pinned to commit b8328f9573.