mcpField
H
hyperframes-animation

hyperframes-animation

github.com/calesthio创意与媒体73.0k993 次安装1 天前更新
代码仓库

关于 hyperframes-animation

hyperframes-animation 是用于创作 HyperFrames 合成动画的技能库，面向动画创作者，提供动作配方、多阶段场景蓝图、转场、技巧及各运行时指南。

主要功能

  1. 01原子动作规则与配方
  2. 02多阶段场景蓝图
  3. 03场景间转场
  4. 04多种动画运行时指南
  5. 05用于编排审查的动画映射脚本

适用场景

  1. 01为场景选择动作模式
  2. 02构建多阶段动画序列
  3. 03审查时间轴编排和补间行为

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/calesthio/openmontage --skill hyperframes-animation

安装后在 Claude Code 中输入/hyperframes-animation确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

blueprints-index.md
adapters/
animate-text.md
animejs.md
css-animations.md
gsap-easing-and-stagger.md
gsap-timeline-and-labels.md
gsap-transforms-and-perf.md
gsap.md
html-in-canvas-patterns.md
lottie.md
three.md
typegpu.md
waapi.md
blueprints/
comparison-split.md
constellation-hub.md
cta-morph-press.md
cursor-ui-demo.md
dataviz-countup.md
device-surface-showcase.md
grid-card-assemble.md
kinetic-type-beats.md
logo-assemble-lockup.md
overwhelm-surround.md
spatial-pan-stations.md
ticker-takeover.md
titlecard-reveal.md
typewriter-reveal.md
video-text-pivot.md
examples/assets/avatars/
02.avif
examples/assets/brands/
github.avif

详细介绍

HyperFrames 动画

所有动画知识都集中在一个技能中：规则（原子配方）、蓝图（多阶段场景模板）、转场（场景之间的切换）、技术（更广泛的动态设计模式）和适配器（各运行时的 API）。

关于合成约定（数据属性、子合成、确定性），请参阅 hyperframes-core。

默认：组合原子规则

从 rules-index.md 中选择 2-4 条规则，用一个暂停的 GSAP 时间线将它们组合起来即可。这样比从蓝图开始更快，代码也更少。

适合加载蓝图的情况

  • 场景符合现有的预设计多阶段模板（品牌展示、社会认同等），并且复用其阶段流程能显著节省创作时间
  • 你需要复杂的 4-5 阶段编排的可运行基准代码

蓝图位于 blueprints-index.md。每个条目都指向 blueprints/<id>.md（配方）。不要仅仅为了探索而读取；确定需要场景级编排后再加载。

路由

想要……阅读
根据触发条件 / 标签选择原子动画模式rules-index.md
阅读某条规则完整的 HTML / CSS / GSAP 配方rules/<name>.md
选择多阶段场景模板blueprints-index.md
阅读某个蓝图的完整配方blueprints/<id>.md
编写场景转场（由 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 — 缓动 / 交错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 关键帧（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

选择运行时

  • GSAP 是 95% 动画工作的默认选择，涵盖时间线编排、变换、缓动和交错。此技能中的所有原子规则都基于 GSAP。
  • Lottie 适用于资源自带预先制作的时间线（通常是 After Effects 导出内容）的情况。
  • Three.js 适用于 3D 场景、摄像机运动和着色器驱动的视觉效果。
  • Anime.js 适用于 GSAP 大材小用时的轻量级补间。
  • CSS 适用于简单的重复图案、装饰和闪光效果，无需承担 JavaScript 动画开销。
  • WAAPI 适用于无需依赖 GSAP 的原生浏览器关键帧。
  • TypeGPU / WebGPU 适用于 GPU 渲染的画布（粒子、液态玻璃、自定义着色器）。

多个运行时可以共存于一个合成中。每个运行时都会将其实例注册到对应的全局对象，以便 HyperFrames 在一次处理中定位所有实例。

核心约束

前提：hyperframes-core → 不可妥协的规则（单个暂停的时间线、data-duration 决定时长、不得使用 Math.random / Date.now / performance.now、不得使用 repeat: -1、不得对后续场景片段使用 gsap.set、不得对 display / visibility 执行动画、不得在 async / setTimeout / Promise 内构建时间线）。此处不要重述这些规则。

在 core 契约基础上补充的动画制作规则：

  • 预先计算布局常量 — 绝不要在补间执行时通过 getBoundingClientRect() 推导位置。由于渲染器会并行采样，补间执行时测量 DOM 会导致不同步；应在合成设置时计算一次坐标并重复使用。
  • 空间运动仅使用 GSAP 变换别名（x、y、scale、rotation）。对于非空间属性补间，Core 的允许列表还包含 opacity / color / backgroundColor / borderRadius — 但绝不能使用 width / height / top / left 更改布局。

脚本

node skills/hyperframes-animation/scripts/animation-map.mjs <composition-dir> \
  --out <composition-dir>/.hyperframes/anim-map

读取注册在 window.__timelines 上的每个 GSAP 时间线，枚举补间，采样边界框，计算标记，并输出 animation-map.json。编写完成后，使用它审查编排情况（空白区、交错一致性、生命周期警告）。

另请参阅

  • hyperframes-core — 合成结构、数据属性、子合成、确定性渲染契约
  • hyperframes-creative — 调色板、排版、旁白、节拍规划（非动画创意指导）
  • hyperframes-cli — npx hyperframes lint / validate / inspect / preview / render

评论

支持 Markdown