HyperFrames Catalog 使用指南：一行命令安装 150+ 转场、图表、地图可视化组件

HyperFrames Catalog 使用指南：一行命令安装 150+ 转场、图表、地图可视化组件

【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes

HyperFrames Catalog是开源项目 HyperFrames（写 HTML、渲染视频、为 AI Agent 而生的视频工具）内置的可复用视频组件库：转场、图表、地图可视化、字幕、下三分之一、特效，一行npx hyperframes add命令即可安装到你的项目里，无需从零编写动画。

🎬 什么是 HyperFrames Catalog

HyperFrames 的核心工作流很简单：用 HTML + CSS + GSAP 描述每一帧画面，然后由渲染引擎输出 MP4。而Catalog解决了"每次都从零手写动画"的痛点——它把社区沉淀的 300+ 个视觉效果做成了开箱即用的组件，你可以像装插件一样把它们装进自己的视频项目。

💡 上图是 Catalog 中一个"说话人（talking head）"块的预览画面——这类写实镜头素材与 HTML 特效叠加，正是 Catalog 的典型玩法。

Catalog 目录本身由注册表自动生成，入口文档见 docs/catalog/index.mdx，组件清单定义在 registry/registry.json。

📦 两种组件类型：Blocks 与 Components

Catalog 里的条目分为两类，选型时先看这张表：

• Block 源文件位于 registry/blocks/，例如美国地图动画registry/blocks/us-map/
• Component 源文件位于 registry/components/
• 每个条目都用一个 registry-item.json 清单文件声明尺寸、时长和可改参数

具体区别与贡献规范可参考 docs/contributing/catalog.mdx。

⚡ 一行命令安装：npx hyperframes add 全流程

这是 Catalog 最核心的用法。在任意 HyperFrames 项目目录下，运行：

npx hyperframes add us-map

命令会从注册表解析该组件，并把文件写入项目（例如写入compositions/us-map.html）。完整日常流程只有四步：

1. 创建项目：npx hyperframes init my-video
2. 安装 Catalog 组件：npx hyperframes add <组件名>
3. 校验结构：npx hyperframes check
4. 渲染出片：npx hyperframes render --output output.mp4

命令速查表收录在 docs/developers/cli.mdx 的"Reuse and inspect"一节。

🖱️ 另一种方式：在 Studio 里点选添加

不想敲命令？Studio（可视化工作台）里有图形化的 Catalog 面板：

1. 打开Catalog面板，浏览或搜索想要的视觉效果
2. 预览动效（可直接播放 1080p 动效预览）
3. 支持直接插入的条目，点击Add即可放置到时间轴当前播放位置
4. 其余条目会生成一段提示词，复制到你的 Agent 对话中，由 AI 帮你适配到当前画面

详细步骤见 docs/studio/assets-and-blocks.mdx。

🗺️ 地图可视化组件：新闻片头级别的地理动效

做新闻解说、地缘分析、旅行类视频？Catalog 的地图类 Block 是最出彩的一类：

• us-map：美国州级填色地图，逐州渐显 + 数值标签 + 渐变图例，纯内联 SVG 实现
• us-map-bubble / us-map-flow / us-map-hex：气泡、流动、六边形三种数据呈现变体
• world-map：世界地图基础款
• nyc-paris-flight：跨洋航线动画，配 16:9 底图
• spain-map及东亚地区专题地图

🗺️ 提示：地图类组件的数据通常是写死在 HTML 里的示例数据，安装后替换成你自己的数据即可，无需重新学习任何 API。

🎞️ 转场与特效组件

视频剪辑中最耗时的"转场"，Catalog 提供两大体系：

Shader 转场（GPU 着色器）——transitions-3d、transitions-dissolve、transitions-distortion、transitions-grid、transitions-radial、transitions-push、transitions-scale、transitions-cover、transitions-blur、transitions-light、transitions-mechanical等十余个系列，源码见 packages/shader-transitions/。

经典 CSS/GSAP 特效——whip-pan（甩镜）、glitch（故障风）、light-leak（漏光）、ripple-waves（涟漪）、flash-through-white（闪白）、chromatic-radial-split（色散分裂）、gravitational-lens（引力透镜）等，全部是独立 Block，装进来就是完整镜头。

📊 图表与数据可视化组件

数据类内容的"成品级"动画，无需自己写 D3：

🧩 字幕、下三分之一与高频小件

• 字幕：caption-kinetic-slam（动能字幕）、caption-glitch-rgb、caption-neon-glow、caption-matrix-decode（矩阵解码）等 20+ 款
• 下三分之一（Lower Third）：lt-clean-bar、lt-neon-border、lt-kicker-name、lt-mask-reveal等 10 款人名条/标题条
• 社媒覆盖层：x-post、reddit-post、instagram-follow、yt-comment-card等，做"屏幕里屏幕"的社媒风内容

所有条目的动效预览页面都生成在 docs/catalog/ 下，每个条目一个页面（如 docs/catalog/blocks/us-map.mdx），页面自动生成逻辑在 scripts/generate-catalog-pages.ts。

📁 核心文件与资源路径

💡 给新手的 3 个快速建议

1. 先看预览再安装：每个 Catalog 条目都有动效预览，确认节奏和风格匹配再add
2. 可复用 ≠ 已完成：官方明确提示——装进来后记得替换示例文案、删掉与你的叙事无关的装饰性动画
3. 善用参数化：条目清单中的params（颜色、文本、数字、下拉）会同步到 Studio 检查器，改品牌色、改标题不用碰 HTML

🚀 总结：HyperFrames 用 HTML 写视频，Catalog 让视频特效"一行命令即装即用"。从npx hyperframes add开始，把转场、图表、地图这些重活交给现成组件，把精力留给内容本身。

【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes