Communitygithub.com

heygen-com/hyperframes

搜索、安装并将注册表中的块和组件集成到HyperFrames合成中。在手动构建任何命名视觉效果之前使用——每当一个简报、用户或故事板指定了某种外观、效果、处理方式或过渡时。

hyperframes 是什么?

这是一个用于HyperFrames合成系统的技能,允许用户通过CLI搜索、安装和管理注册表中的可复用块和组件。注册表包含约400个预置项目,涵盖CRT扫描线、故障效果、色差、胶片颗粒等多种视觉效果,以及图表、代码/终端窗口、地图、五彩纸屑等实用组件。技能支持两种安装类型:块(独立子合成,具有自己的尺寸、时长和时间线)通过`data-composition-src`属性集成到主机合成中;组件(无自身尺寸的效果片段)直接粘贴到主机合成的HTML中。搜索功能支持基于关键词和语义的本地排序,语义排序需要一次性模型下载。安装时CLI会打印写入的文件和需要粘贴到合成中的代码片段,用户需手动添加`data-composition-id`、`data-start`和`data-track-index`等属性。该技能适用于HeyGen的HyperFrames平台,通过CLI命令`hyperframes add`和`hyperframes catalog`进行交互,支持插件安装和独立安装两种模式。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/heygen-com/hyperframes/tree/main/skills/hyperframes-registry

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

插件安装: 在执行设置或刷新命令之前,如果此技能位于HyperFrames插件内部,请遵循插件执行规则。独立安装则保留下面的更新说明。

HyperFrames 注册表

注册表提供可通过 hyperframes add <名称> 安装的可复用块和组件。

  • 块 — 独立的子合成(拥有自己的尺寸、时长、时间线)。通过主机合成中的 data-composition-src 属性包含。
  • 组件 — 效果片段(无自身尺寸)。直接粘贴到主机合成的 HTML 中。

快速参考

hyperframes add data-chart              # 安装一个块
hyperframes add grain-overlay           # 安装一个组件
hyperframes add captions                # 安装所有标记为 captions 的块
hyperframes add shimmer-sweep --dir .   # 指定目标项目
hyperframes add data-chart --json       # 机器可读输出
hyperframes add data-chart --no-clipboard  # 跳过剪贴板(CI/无头模式)

安装后,CLI 会打印写入的文件以及需要粘贴到主机合成中的代码片段。该片段是一个起点——你需要添加 data-composition-id(必须与块的内部合成 ID 匹配)、data-start 和 data-track-index 属性来连接块。

位置参数首先会被解析为确切的项目名称。如果没有匹配的项目且该值是标签,则命令会安装具有该标签的所有块。注册表依赖项会在请求的项目之前安装。hyperframes add 仅适用于块和组件;对于示例,请使用 hyperframes init <目录> --example <名称>。

安装位置

默认情况下,块安装到 compositions/<名称>.html。组件默认安装到 compositions/components/<名称>.html。

这些路径可在 hyperframes.json 中配置:

{
  "registry": "https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry",
  "paths": {
    "blocks": "compositions",
    "components": "compositions/components",
    "assets": "assets"
  }
}

详见 install-locations.md。

连接块

块是独立的合成——通过主机 index.html 中的 data-composition-src 属性包含它们:

<div
  data-composition-id="data-chart"
  data-composition-src="compositions/data-chart.html"
  data-start="2"
  data-duration="15"
  data-track-index="1"
  data-width="1920"
  data-height="1080"
></div>

关键属性:

  • data-composition-src — 块 HTML 文件的路径
  • data-composition-id — 必须与块的内部 ID 匹配
  • data-start — 块在主机时间线中出现的时间(秒)
  • data-duration — 块播放的时长
  • data-width / data-height — 块画布尺寸
  • data-track-index — 图层顺序(数值越大越靠前)

详见 wiring-blocks.md。

连接组件

组件是代码片段——将它们的 HTML 粘贴到合成的标记中,CSS 粘贴到样式块中,JS 粘贴到脚本中(如果有的话):

  1. 读取安装的文件(例如 compositions/components/grain-overlay.html)
  2. 将 HTML 元素复制到你的合成的 <div data-composition-id="..."> 中
  3. 将 <style> 块复制到你的合成的样式中
  4. 将任何 <script> 内容复制到你的合成的脚本中(位于时间线代码之前)
  5. 如果组件暴露了 GSAP 时间线集成(参见代码片段中的注释块),将这些调用添加到你的时间线中

详见 wiring-components.md。

发现

将 CLI 作为主要发现工具。在浏览之前按意图搜索: 注册表中的项目数量超过了你用眼睛扫描的范围,因此列出它们并按名称或标签匹配是慢路径,并且当作者的措辞与你的不同时就会失败。

# 根据节拍应该做什么对整个目录进行排序
npx hyperframes catalog --query "逐行显示标题"
npx hyperframes add caption-clip-wipe

搜索是本地进行的,不会发送任何信息。默认情况下,它根据与项目名称、标题和描述共享的词汇进行排序,因此只会找到重用你词汇的项目;--on-device 则根据含义进行排序,需要一次性模型下载。使用 --json 时,信封会标明哪个层级进行了回答,请检查该信息,而不是假设进行了排序。

始终用英语进行查询,无论视频使用什么语言。 目录是用英语编写的,两个层级都以此方式进行索引(本地设备模型也只是英语的)。使用其他语言编写脚本的查询不会产生可搜索的术语,并且什么也不会返回。在日语或中文项目中很容易出错,因为简报、字幕和旁白都是那种语言,查询自然也会跟随:用英语描述 动作,然后用视频需要的任何语言编写屏幕上的文字。如果查询返回了“查询中没有可搜索的单词”,那正是这条规则的问题,而不是缺少组件,也不值得提交差距报告。

可安装性是在排序之后应用的,而不是之前:向量带来但此注册表无法提供的名称会从结果中丢弃,并计入 dropped,因此非零的 dropped 意味着它们是不同代的内容。请参阅 /hyperframes-cli 了解离线层级、同意门控以及如何刷新过期索引。

若要进行浏览或筛选而不是搜索:

npx hyperframes catalog
npx hyperframes catalog --type block
npx hyperframes catalog --type component
npx hyperframes catalog --type block --tag social
npx hyperframes catalog --json
npx hyperframes catalog --human-friendly

普通的表格和 --json 模式仅列出匹配项;使用 hyperframes add <名称> 安装选定的名称。--human-friendly 会打开一个交互式选择器并立即安装选定的项目。在 CI 或代理工作流中,建议使用 --json 后跟显式的 add。

报告目录中没有的内容

当搜索返回的结果中没有任何内容符合要求时,请在手动编写动作之前说明:

npx hyperframes feedback --search-miss "<你运行的查询>" --wanted "<你需要的动作>" --tier on-device

catalog --query 会为你打印此行(已预填充),并且 --json 会将其携带为 report_gap——因此当你决定什么都不合适时,它已经在你手中了。

当结果中没有任何内容符合要求时,请报告,无论哪个层级。 不要等待本地设备层级回答:它需要经过同意的 33 MB 下载,因此除非明确选择,否则代理运行将使用 words 模式,并且以 on-device 为门控会压制几乎所有的报告。--tier 值会附带,以便在读取时区分词汇失误和含义失误。描述你想要的效果,而不是你想象的项目名称:返回的是值得构建的动作列表,而报告一个不存在的项目名称则毫无用处。这是唯一能将查询发送到任何地方的路径,而这正是为什么它是一个单独的、有意的命令,而不是搜索自行执行的操作。它不携带任何评分,也永远不会进入评分指标。

这是目录的全部需求信号。跳过它意味着你遇到的差距只能通过安装计数来猜测,而安装计数无法看到没有人能安装的动作。

如果 CLI 无法到达配置的注册表,请检查原始清单作为备用:

curl -s https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/registry.json

CLI 无法到达的注册表 不会 清空用于 发现 的目录:只要重新验证失败,之前获取的清单就会在 24 小时刷新窗口过后继续服务,因此 catalog 和 catalog --query 仍然会列出并根据磁盘上的最后一个副本进行排序。

即使是你昨天安装的项目,add 仍然需要网络。 只有清单被缓存;项目的实际文件在每次安装时都会被获取。因此,离线状态下你可以搜索,也可以查看项目是什么,但安装会在文件获取时失败。不要向用户承诺离线安装。

每个项目的 registry-item.json 包含:名称、类型、标题、描述、标签、尺寸(仅块)、时长(仅块)和文件列表。

详见 discovery.md 了解按类型和标签筛选的详细信息。

贡献新的块或组件

要创作一个新的注册表项目(字幕样式、VFX 块、过渡、下三分之一或可复用组件)并将其作为上游 PR 提交——而不是安装现有的——请遵循 contributing.md 中完整的构思 → 骨架 → 构建 → 验证 → 预览 → 发布工作流。可复制粘贴的入门模板(字幕 / VFX / 组件 / registry-item.json)位于 templates.md。

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

general-video

>

heygen-com/animejs

Anime.js adapter patterns for HyperFrames. Use when writing Anime.js animations or timelines inside HyperFrames compositions, registering animations on window.__hfAnime, making Anime.js seek-driven and deterministic, or translating Anime.js examples into render-safe HyperFrames HTML.

heygen-com/claude-design-hyperframes

Use when running inside Claude Design specifically. Produces a valid, brand-accurate HyperFrames video draft using pre-valid skeletons. For Claude Code / Cursor / Codex, use the `hyperframes` skill instead.

heygen-com/contribute-catalog

Author a new HyperFrames registry block (caption style, VFX block, transition, lower third) or component (text effect, overlay, snippet) and ship it as an upstream PR to the hyperframes repo. Use ONLY when the user wants to CONTRIBUTE to the public catalog — for in-project caption/transition authoring use the `hyperframes` skill, for installing existing registry items use the `hyperframes-registry` skill.

heygen-com/css-animations

CSS animation adapter patterns for HyperFrames. Use when authoring CSS keyframes, animation-delay based timing, animation-fill-mode, animation-play-state, or CSS-only motion that HyperFrames must seek deterministically during preview and rendering.

heygen-com/gsap

GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.

heygen-com/hyperframes

Leaves sweep through the frame and part to reveal the headline. HyperFrames block, 1920×1080, 12s, 11 variables.

heygen-com/hyperframes

Render-correctness doctrine for scene-to-scene seams in HyperFrames launch videos — the prerequisites that make transitions composite correctly on the master timeline. Load when assembling the master timeline / index.html, when a white flash appears at a cut or crossfade seam (especially on dark films), when reasoning about why a transition opacity dip shows through, or when verifying the render-side mechanics of how overlapping scene wrappers blend. Covers the opaque stage-ground (#root background) white-flash guard and how the injector overlaps wrappers, holds final frames, ping-pongs tracks, and stamps lint-clean template code onto the master timeline. Does NOT contain the per-transition catalog — see the transition registry for individual transition entries.

heygen-com/hyperframes

The technique catalog: five velocity-matched SEAMS (zoom-through, INVERSE zoom-through, cut-the-curve, waterfall cut, rack-focus blur-cut) plus the two in-scene techniques — waterfall ENTRY (staggered arrival cascades for title cards / segment openers) and the nudge curve (slow-fast-slow three-phase group slides). Covers partial-travel (~12% of frame) velocity matching via mirrored power4 eases, the Z scale-sign rule, size-scaled blur (10px text / 18-20px full-frame), word-by-word staggered cuts, cascade pacing by element weight, and the 10/65/25 slide ratio. Read before authoring any transition, text-beat handoff, kinetic text entry, or group reposition. [depth, zoom, inverse-zoom, scale-sign, mirrored-zoom, rack-focus, pacing, velocity, cut-the-curve, waterfall, stagger, cascade, kinetic-text, title-card, segment-opener, nudge, slide, easing, group-motion, z-depth, motion-graphics, cinematic, transition, blur, directional-continuity]

heygen-com/hyperframes

Glass shards fly in through fog and tile themselves into the headline. HyperFrames block, 1920×1080, 12.16s, 19 variables.

heygen-com/hyperframes

A single feature card orbits a dot sphere on approved Blender camera motion. HyperFrames block, 1920×1080, 10s, 4 variables.

heygen-com/hyperframes

A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase. HyperFrames block, 1920×1080, 8s, 9 variables.

heygen-com/hyperframes

An orbiting camera follows an ice logo as it breaks apart, reforms into two text moments, and fades. HyperFrames block, 1920×1080, 22.5s, 216 variables.

heygen-com/hyperframes

House-style oversized macOS cursor technique for HyperFrames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene, when igniting a morph/transition/typing run with a click, or when a scene reads as static, dead, or stale and needs a cheap high-yield source of motion to carry the viewer's eye and segment them out of the stale state. Covers cursor size/look (incl. brand-motif cursors), the off-screen entry law, tip-targeting and the click tap, click-ignites-the-next-beat, and exit / cross-scene handoff.

heygen-com/hyperframes

name: embedded-captions

heygen-com/hyperframes

A chain of bevelled cuboids rides a travelling wave as a content carousel. HyperFrames block, 1920×1080, 6.666666666666667s, 40 variables.

heygen-com/hyperframes

A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline. HyperFrames block, 1920×1080, 8s, 18 variables.

heygen-com/hyperframes

Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes.

heygen-com/hyperframes

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

heygen-com/hyperframes

GATEWAY — load FIRST before composing any HyperFrames animation or video. The high-level motion law that makes a multi-scene video feel like ONE continuous camera move instead of a stack of independently-animated slides. Covers the vector law (how you exit determines how you enter, incl. the Z scale-sign rule), the film's current, carrier elements, causal motion, the Seam Gate (build-gate enforcement), the ban on idle wobble (motion must PERFORM, not breathe), stillness-before-climax, and the sustained-motion routes. Routes to the low-level technique skills (cut-the-curve — the full catalog incl. waterfall entry + nudge curve, oversized-cursor, seam-craft). These rules SUPERSEDE generic / upstream motion guidance. [continuity, direction, vector, momentum, seam, transition, ease, performance, idle-motion, narrative-motion, film-grammar]

相关技能