Hyperframes

GitHub: greensock/gsap-skills 官网: gsap.com 核心定位 GSAP (GreenSock Animation Platform) 是专业的 JavaScript 动画库，HyperFrames 使用它作为主要动画引擎。 重要更新：GSAP 完全免费，包括所有插件。自 Webflow 收购 GSAP 后，所有插件（包括 formerly Club-only 的 SplitText、MorphSVG 等）对所有人都免费使用，包括商业用途。 安装 Claude Code 插件市场（推荐） 1 2 /plugin marketplace add greensock/gsap-skills /reload-plugins npx skills（通用） 1 npx skills add https://github.com/greensock/gsap-skills HyperFrames Contract HyperFrames 通过 window.__timelines 控制 GSAP，所有 timeline 必须遵循此约定： 1 2 3 4 5 6 7 8 9 window.__timelines = window.__timelines || {}; const tl = gsap.timeline({ paused: true })); // 构建动画 tl.from(".title", { y: 48, opacity: 0, duration: 0.6, ease: "power3.out" }, 0); tl.to(".accent", { scaleX: 1, duration: 0.5, ease: "power2.out" }, 0.25); // 注册 — key 必须与 data-composition-id 匹配 window.__timelines["main"] = tl; 关键规则： ...

GitHub: heygen-com/hyperframes 文档: hyperframes.heygen.com 核心定位 HyperFrames 是一个开源的 HTML 视频渲染框架，用「写 HTML 来渲染视频」的方式工作。最大的特点是 AI-First——AI Agent 天然会写 HTML，不需要额外学习。 与 Remotion 的核心区别： 特性 HyperFrames Remotion 编写方式 HTML + CSS + GSAP React 组件 (TSX) 构建步骤 无，.html 直接可用 需要 bundler 动画精度 Seekable，帧级精确 依赖 wall-clock 开源许可 Apache 2.0（完全开源） 自定义许可证（需付费） HyperFrames 借鉴了 Remotion 的设计思路，代码中保留了对其首创模式的致谢注释。两者的核心分歧在于：Agent 主要写什么。Remotion 选择 React 组件，HyperFrames 选择 HTML。 安装 Claude Code 插件市场（推荐） 1 2 /plugin marketplace add heygen-com/hyperframes /reload-plugins npx skills（通用） 1 npx skills add heygen-com/hyperframes CLI 工具 1 2 3 4 5 6 7 8 9 10 11 12 # 全局安装 CLI npm install -g hyperframes # 初始化新项目 hyperframes init my-video cd my-video # 开发预览 hyperframes preview # 浏览器预览，live reload # 渲染输出 hyperframes render # 输出 MP4 前置要求：Node.js >= 22, FFmpeg ...