Communitygithub.com

heygen-com/hyperframes

为 HyperFrames 发布视频设计的超大 macOS 风格光标技术方案。每当场景涉及光标或指针引导操作时,在启动 UI 场景或通过点击触发变形、过渡、打字效果时,以及当场景显得静态、死板或过时需要一种低成本高收益的运动源来引导观众视线并打破静止状态时,均可加载使用。涵盖光标尺寸/外观(包括品牌主题光标)、屏幕外入场法则、尖端定位与点击轻触、点击触发下一节拍以及退出/跨场景交接。

hyperframes 是什么?

该技能(`heygen-com/hyperframes`)提供了一种经过生产验证的、用于发布视频的超大 macOS 风格光标动画工业标准。其核心在于将光标作为视觉主角:它从屏幕外进入,引导观众视线到达下一个兴趣点,通过点击触发后续事件,然后物理离开。这一技术特别适合在静态或沉闷的场景中注入动态感,是高性价比的运动来源。技能详细规定了光标尺寸(全屏 7cqw,模拟场景 4.6-5.5cqw)、品牌主题光标(如 Figma 风格的多彩协作用户光标)的使用规则、物理入场(禁止透明度渐入)、尖端定位的点击反馈(transformOrigin 为 21% 14%)、以及通过点击触发下一节拍(如菜单弹出、打字开始、窗口变形)的时序控制。退出方式同样强调物理性:要么加速离开画面,要么通过“截弯取直”交接在硬切换前将光标指向下一场景的点击点来缝合画面间隙。该技能适用于使用 GSAP 动画库的 Web 或动画平台(如 HyperFrames、Rive、Lottie 等),核心原理通过 CSS 和 Timeline 代码片段进行说明。

兼容平台~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/heygen-com/hyperframes/tree/HEAD/.agents/skills/oversized-cursor

在你喜欢的 AI 中提问

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

文档

超大光标——视觉牵引者

一个刻意放大的 macOS 风格指针,作为可见主角在画面中穿行:从屏幕外进入,引导观众视线至下一个兴趣点,点击触发下一动作,然后离开。已在多个发布影片中经过生产验证。

存在的理由。 大型光标运动是发布视频中成本最低的高收益运动源之一:一个元素,仅需变换补间,即可(1)在原本死板的场景中将视线拉过屏幕,(2)为变形/过渡提供因果触发(“是那个点击造成的”),以及(3)在启动新场景或复杂动画序列时,将视线从静止状态中拉出来。越大越好——实际尺寸的光标在视频缩放后会消失。

尺寸与外观(工作室惯例)

  • 全屏场景:7cqw(在 1920 下约为 134px)。在模拟/小尺寸变体中:4.6–5.5cqw。永远不要更小。
  • 所有地方都使用一个 SVG 箭头几何形状。两种经过验证的填充色——白色主体 + 黑色描边,或黑色主体(#1c1c1c)+ 白色描边(1.4px)。根据场景对比度选择,并在整部影片中保持恒定。
  • 品牌主题光标(王牌选择)。 macOS 箭头是默认选项,而非强制要求。当主题品牌具有可识别的光标身份时——协作设计工具中带有名称标签的彩色多人箭头(Figma 风格)、创意套件的精确定位十字线、或独特的产品指针——则改为使用那个光标:对于任何了解该产品的人来说,这是即刻可识别的品牌语言。同样的法则不变(超大尺寸、物理进出、尖端定位、点击触发),且带名称标签的变体作为一个刚性整体移动(标签跟在箭头后面)。仅当该主题真正可被引用时采用;如果没人认识那个光标,那它只是个奇怪的箭头——退回使用 macOS。
  • filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)),pointer-events: none, z-index 高于所有场景内容,will-change: transform。
#root .cursor {
  position: absolute;
  left: 48%;
  top: 115%; /* 屏幕外底部——静止姿态就是屏幕外 */
  width: 7cqw;
  height: 7cqw;
  z-index: 20;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
  pointer-events: none;
  will-change: transform;
}

入场法则——物理性的,从不暴露

光标总是从屏幕外进入(标准:从下方,top:115–120%)并以一次减速滑行到达其第一个目标。必须让人觉得“它走进了房间”。永远不要通过透明度渐入将其淡入到静止位置,也不要通过遮罩来揭示它——这会被视为故障(一个真实的、反复观察到的失败模式)。

  • 默认路径:沿 Y 轴直线向上到达目标——没有分段的对角线。当对角线的确符合故事时(例如朝向偏轴目标入场),它可以被使用,但无论哪种方式,都只是一条连续的向量。
  • duration: 0.4–0.92s,ease: power3.out,在 fromTo 中使用 immediateRender: false。
tl.fromTo(
  cursor,
  { left: "48.6%", top: "115%" },
  { left: "48.6%", top: "55%", duration: 0.85, ease: "power3.out", immediateRender: false },
  0.25,
);

尖端定位与点击轻触

热区是箭头的尖端,而非盒子中心。将尖端落在目标中心,并将所有按压缩放以尖端为轴心:transformOrigin: '21% 14%'(对于在 24 单元 viewBox 中的工作室箭头路径)。

点击 = 非对称压缩/展开(1:2 比率感觉像真实点击):

tl.to(cursor, { scale: 0.84, duration: 0.1, ease: "power2.in", transformOrigin: "21% 14%" }, t);
tl.to(
  cursor,
  { scale: 1, duration: 0.22, ease: "power2.out", transformOrigin: "21% 14%" },
  t + 0.1,
);

目标的反应是独立、并行的补间(按钮:从同一 t 开始,scale: 0.94 + 按压颜色/阴影)。光标单独点击(例如聚焦文本输入)则没有目标反应。在目标侧配合使用 cursor-click-ripple / press-release-spring。

点击触发下一节拍

永远不要让变形、打字效果、窗口变换或场景定义动画简单地“开始”。将光标停在触发器上,让点击在同一帧内引起该动作:

  • 点击 ▸ 菜单/子菜单级联,切换翻转
  • 点击 ▸ 在输入框中开始打字
  • 点击 ▸ 创作器变形收缩/窗口缩小
  • 点击 ▸ Logo 点火/飞行启动
  • 点击 ▸ 产品模拟中的播放状态翻转 + UI 生命唤醒

在光标不“拥有”的长时间节拍中(打字、旁白),光标移向一边(0.5–0.9s,power2.out)——绝不死冻在动作之上,也绝不无意义地晃动。

退出法则与跨场景交接

两种认可的退出方式——均为物理方式,绝不在原地进行透明度渐隐:

  1. 离开画面:以 power2.in 加速离开最近的边缘(left:'118%',left:'-12%',或 top:'116%'),0.5–0.7s。
  2. 截弯取直交接:在硬切换前的最后约 0.3 秒,光标开始加速(power2.in)朝向下一场景的第一个点击点,覆盖该路径的前约 1/3;下一个合成使用 gsap.set 将光标置于交接姿态,并以匹配速度继续使用 power2.out。光标本身成为缝合画面间隙的载体元素:
// 场景 A,最后 0.3 秒——开始旅程:
tl.to(cursor, { left: "40.7%", top: "63.7%", duration: 0.3, ease: "power2.in" }, CUT - 0.3);
// 场景 B,t=0——以匹配速度完成:
gsap.set(cursorB, { left: "40.7%", top: "63.7%" });
tl.to(cursorB, { left: "22%", top: "45%", duration: 0.6, ease: "power2.out" }, 0);

检查清单

  • 全屏 ≥ 7cqw(模拟场景内 4.6–5.5cqw)——不确定时,越大越好
  • 从屏幕外沿一条连续向量入场(无淡出/遮罩揭示)
  • 尖端落在目标中心;按压以 transformOrigin: '21% 14%' 为轴心
  • 每次点击都在同一帧内触发某件事
  • 在光标不拥有的节拍中移向一边;零无意义晃动
  • 物理退出(离开画面或截弯取直交接)——无原地淡出

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

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

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

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

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

Glass shards fly in through fog and tile themselves into the headline. HyperFrames block, 1920×1080, 12.16s, 19 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

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

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

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]

heygen-com/hyperframes

Turn a weekly changelog .md into a finished branded changelog video (square 1080, ~45-60s, Annie VO, animated brand background, mock-UI visualizations, lowkey captions). Use when the user provides a changelog/digest markdown and wants the weekly video, or says "changelog video". Self-contained — fonts, background, lexicon, and scripts ship in this skill.

相关技能