AI Skills
oversized-cursor

oversized-cursor

热门

超大macOS光标技术，用于HyperFrames启动视频。当场景涉及光标或指针引导操作、启动UI场景、通过点击触发变形/过渡/打字动画、或场景显得静态/死板/陈旧需要低成本高收益的运动来引导观众视线并脱离陈旧状态时加载。涵盖光标大小/外观（包括品牌主题光标）、屏幕外进入规则、尖端定位与点击、点击触发下一节拍、以及退出/跨场景交接。

3.6万Star
3412Fork
更新于 2026/7/19
获取 Skill源代码

相关 Skills

napkin3.7万imagegen-frontend-mobile4.8万seo-sxo1.2万
SKILL.md
readonly只读
name
oversized-cursor
description

超大macOS光标技术，用于HyperFrames启动视频。当场景涉及光标或指针引导操作、启动UI场景、通过点击触发变形/过渡/打字动画、或场景显得静态/死板/陈旧需要低成本高收益的运动来引导观众视线并脱离陈旧状态时加载。涵盖光标大小/外观（包括品牌主题光标）、屏幕外进入规则、尖端定位与点击、点击触发下一节拍、以及退出/跨场景交接。

超大光标——视线引导器

一个刻意放大的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，immediateRender: false 在fromTo上。
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,
);

目标的反应是独立的并行补间（按钮：scale: 0.94 + 按压颜色/阴影，从同一t开始）。仅光标点击（例如聚焦文本输入）无目标反应。与cursor-click-ripple / press-release-spring配对用于目标侧。

点击触发下一节拍

绝不要让变形、打字动画、窗口变换或场景定义动画_简单地开始_。将光标停在触发器上，让点击在同一帧内引起它：

  • 点击 ▸ 菜单/子菜单级联、切换翻转
  • 点击 ▸ 输入框打字启动
  • 点击 ▸ 合成器变形/窗口缩小
  • 点击 ▸ 标志点火/飞行启动
  • 点击 ▸ 产品模拟中的播放状态翻转+UI生命唤醒

在光标不主导的长节拍中（打字、旁白），光标漂移到一边（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。光标本身成为缝合接缝的载体元素：
// 场景A，最后0.3s——开始旅程：
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%'为轴
  • [ ] 每次点击在同一帧内引起某事
  • [ ] 在不主导的节拍中漂移到一边；无空闲晃动
  • [ ] 物理退出（离开画面或切曲线交接）——无原地淡出