mcpField
O
oversized-cursor

oversized-cursor

github.com/heygen-com创意与媒体74.7k60.0k 次安装今天更新
代码仓库

关于 oversized-cursor

面向动态设计的技能，指导在发布视频中使用超大光标引导视线并触发动作，涵盖尺寸、进出路径、点击效果与场景衔接。

主要功能

  1. 01从画外进入并离场
  2. 02光标尖端对准目标并点击
  3. 03点击触发场景动作
  4. 04光标跨剪辑衔接

适用场景

  1. 01引导观众关注发布视频中的内容
  2. 02呈现点击触发界面变化的过程

安装

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

$npx skills add https://github.com/heygen-com/hyperframes --skill oversized-cursor

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

详细介绍

超大光标 — 视线引导者

刻意放大的 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%; /* off-screen below — the resting pose IS off-screen */
  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%'（适用于 viewBox 为 24 个单位的标准箭头路径）。

点击 = 非对称压缩／展开（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,
);

目标的反馈是独立的并行动画补间（按钮：scale: 0.94 + 按压时的颜色／阴影变化，并在相同的 t 开始）。仅光标点击（例如聚焦文本输入框）不应引发目标反馈。目标侧可配合 cursor-click-ripple / press-release-spring 使用。

点击触发下一拍

绝不要让变形、输入、窗口变换或定义场景的动画自行_开始_。将光标停在触发点上，并让点击在同一帧触发动画：

  • 点击 ▸ 菜单／子菜单级联展开、切换开关
  • 点击 ▸ 在输入框中开始输入
  • 点击 ▸ 撰写框向下变形／窗口缩小
  • 点击 ▸ Logo 点亮／启动飞行
  • 点击 ▸ 播放状态切换 + 产品模拟界面唤醒动态效果

在较长且不由光标主导的片段中（输入、旁白），光标应移到一旁（0.5–0.9s，power2.out）——绝不能冻结在动作上方，也不要无意义地晃动。

退出规则与跨场景衔接

两种获准的退出方式——都必须通过实体移动，绝不能原地淡出：

  1. 离开画面：沿最近的边缘加速离开，使用 power2.in （left:'118%'、left:'-12%' 或 top:'116%'），持续 0.5–0.7s。
  2. 截断曲线衔接：在硬切前最后约 0.3s，光标开始加速（power2.in）朝向 下一场景的第一个点击点，走完该路径的前约 1/3；下一个构图通过 gsap.set 将光标设在衔接姿势，然后以匹配的速度使用 power2.out 继续移动。光标本身 成为连接转场断点的载体：
// scene A, last 0.3s — start the journey:
tl.to(cursor, { left: "40.7%", top: "63.7%", duration: 0.3, ease: "power2.in" }, CUT - 0.3);
// scene B, t=0 — finish it at matched velocity:
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%' 为轴心转动
  • 每次点击都会在同一帧触发效果
  • 在不属于它的节拍期间移至一旁；静止时不晃动
  • 通过实体移动退出（离开画面或截断曲线衔接）——不原地淡出

评论

支持 Markdown