hyperframes-animation

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

HyperFrames Animation

HyperFrames 动画

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

一站式获取所有动效知识：规则（原子化实现方案）、蓝图（多阶段场景模板）、过渡（场景间切换）、技巧（通用动效设计模式）以及适配器（各运行时API）。

关于组合约定（数据属性、子组合、确定性）请查看

hyperframes-core

。

Default: compose atomic rules

默认方式：组合原子规则

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.

从

rules-index.md

中挑选2-4条规则，通过单个暂停的GSAP时间线将它们整合，即可完成开发。这种方式比从蓝图开始开发更快，且生成的代码量更少。

Load a blueprint when

以下场景请加载蓝图

The scene matches an existing pre-designed multi-phase template (brand-reveal, social-proof, demo-page-scroll-spotlight, etc.) and reusing its phase pipeline saves real authoring time
You want runnable ground-truth code for a complex 4-5 phase choreography

Blueprints live in

blueprints-index.md

. Each entry points to

blueprints/<id>.md

(recipe) and

examples/<id>.html

(runnable sample). Do not read it speculatively; load it when you've already decided you need scene-level orchestration.

当前场景与现有预设计的多阶段模板匹配（品牌展示、社交证明、演示页面滚动聚焦等），复用其阶段流程可节省实际开发时间
你需要复杂的4-5阶段动画编排的可运行基准代码

蓝图存放在

blueprints-index.md

中。每个条目指向

blueprints/<id>.md

（实现方案）和

examples/<id>.html

（可运行示例）。请勿盲目查阅，仅当你确定需要场景级编排时再加载。

Routing

导航指引

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` + `examples/<id>.html`
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`

需求	查阅文档
按触发条件/标签选择原子动效模式	`rules-index.md`
查看某条规则完整的HTML/CSS/GSAP实现方案	`rules/<name>.md`
选择多阶段场景模板	`blueprints-index.md`
查看某份蓝图的完整实现方案	`blueprints/<id>.md` + `examples/<id>.html`
制作场景过渡效果（CSS驱动，两个片段间切换）	`transitions/overview.md` , `transitions/catalog.md`
查阅通用动效设计技巧	`techniques.md`
分析现有组合的动效映射	`scripts/animation-map.mjs`
GSAP API — 时间线/补间动画/位置参数	`adapters/gsap.md`
GSAP — 即插即用效果实现方案	`rules/gsap-effects.md`
GSAP — 变换/性能优化	`adapters/gsap-transforms-and-perf.md`
GSAP — 缓动/ stagger效果	`adapters/gsap-easing-and-stagger.md`
GSAP — 时间线/标签	`adapters/gsap-timeline-and-labels.md`
Lottie / dotLottie（After Effects导出， `window.__hfLottie` ）	`adapters/lottie.md`
Three.js / WebGL（3D场景， `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` 跳转）	`adapters/waapi.md`
TypeGPU / WebGPU（ `navigator.gpu` ，WGSL，计算管线）	`adapters/typegpu.md`
HTML作为纹理 + WebGL/GLSL后期特效（通过 `drawElementImage` 捕获实时DOM）	`adapters/html-in-canvas-patterns.md`
命名文本动效（通过外部 `animate-text` 技能提供24种ID）	`adapters/animate-text.md`

Picking a runtime

运行时选择指南

GSAP is the default for 95% of motion work — covers timeline orchestration, transforms, easing, stagger. All atomic rules in this skill are GSAP-based.
Lottie when an asset has its own pre-baked timeline (typically After Effects exports).
Three.js for 3D scenes, camera motion, shader-driven visuals.
Anime.js for lightweight tweening when GSAP is overkill.
CSS for simple repeated motifs, decoration, shimmer — no JavaScript animation cost.
WAAPI for native browser keyframes without a GSAP dependency.
TypeGPU / WebGPU for GPU-rendered canvases (particles, liquid glass, custom shaders).

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.

GSAP 是95%动效工作的默认选择——涵盖时间线编排、变换、缓动、stagger效果。本技能中的所有原子规则均基于GSAP实现。
Lottie 适用于资产自带预烘焙时间线的场景（通常为After Effects导出内容）。
Three.js 用于3D场景、相机动效、着色器驱动的视觉效果。
Anime.js 适用于轻量补间动画场景，当GSAP过于笨重时选用。
CSS 用于简单重复的图案、装饰、闪烁效果——无JavaScript动画开销。
WAAPI 用于无需依赖GSAP的原生浏览器关键帧动画。
TypeGPU / WebGPU 用于GPU渲染画布（粒子效果、液态玻璃、自定义着色器）。

多个运行时可在同一个组合中共存。每个运行时会将其实例注册到特定全局对象，以便HyperFrames可一次性跳转所有实例。

Critical Constraints

关键约束

Prerequisite:
hyperframes-core
→ Non-Negotiable Rules (single paused timeline,

data-duration

governs length, no

Math.random

Date.now

performance.now

, no

repeat: -1

, no

gsap.set

on later-scene clips, no

display

visibility

animation, no timeline construction inside

async

setTimeout

Promise

). Don't restate those here.

Animation-craft additions on top of core's contract:

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.
Spatial motion uses GSAP transform aliases only (
```
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.

前置要求：
hyperframes-core
→ 不可违背的规则（单暂停时间线、

data-duration

控制时长、禁止使用

Math.random

Date.now

performance.now

、禁止

repeat: -1

、禁止对后期场景片段使用

gsap.set

、禁止动画

display

visibility

属性、禁止在

async

setTimeout

Promise

内构建时间线）。此处不再赘述这些规则。

在核心约定之上的动画制作补充规则：

预计算布局常量 — 绝对不要在补间动画执行时通过
```
getBoundingClientRect()
```
获取位置。补间时进行DOM测量会导致不同步，因为渲染器是并行采样的；应在组合初始化时一次性计算坐标并复用。
空间动效仅使用GSAP变换别名（
```
x
```
、
```
y
```
、
```
scale
```
、
```
rotation
```
）。核心允许列表还允许对非空间属性进行补间，包括
```
opacity
```
/
```
color
```
/
```
backgroundColor
```
/
```
borderRadius
```
——但绝对不要使用
```
width
```
/
```
height
```
/
```
top
```
/
```
left
```
来修改布局。

Scripts

脚本

bash

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.