oversized-cursor

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Oversized Cursor — the eye-carrier

超大光标 — 视觉引导者

A deliberately oversized macOS-style pointer that travels the frame as a visible protagonist: it enters from off-screen, walks the viewer's eye to the next point of interest, clicks to cause the next thing that happens, and leaves. Production-proven across multiple launch films.

Why it exists. Big cursor movement is one of the cheapest high-yield motion sources in a launch video: one element, transform-only tweens, and it (1) brings the eye across the screen on scenes that would otherwise read as dead, (2) gives causal ignition to morphs/transitions ("the click did that"), and (3) segments the eye out of a stale state when kicking off a new scene or a complex animation sequence. Bigger is better — an actual-size cursor disappears at video scale.

一款刻意放大的macOS风格指针，作为「可见主角」穿梭于画面中：它从屏幕外进入，引导观众视线至下一个关注点，点击触发后续事件，然后离开。该技巧已在多部启动视频中验证有效。

设计初衷。在启动视频中，大光标移动是成本最低、收益最高的动态元素之一：仅需一个元素、纯变换补间动画，就能实现（1）在原本沉闷的场景中引导观众视线穿越屏幕，（2）为变形/转场提供因果触发逻辑（「点击导致了变化」），（3）在开启新场景或复杂动画序列时，帮助观众摆脱视觉疲劳状态。尺寸越大效果越好——实际大小的光标在视频尺度下会消失不见。

Size & look (house convention)

尺寸与外观（品牌规范）

Full-frame scenes:
7cqw
(≈134px at 1920). In-mock / small-frame variants:
```
4.6–5.5cqw
```
. Never smaller.
One SVG arrow geometry everywhere. Two proven fills — white body + black stroke, or black body (
```
#1c1c1c
```
) + white stroke (1.4px). Pick per scene contrast, keep it constant per film.
Brand-motif cursors (the power play). The macOS arrow is the DEFAULT, not a mandate. When the subject brand has a recognizable cursor identity — a collaborative design tool's colored multiplayer arrow with a name tag (Figma-style), a creative suite's precision crosshair, a distinctive product pointer — use THAT cursor instead: instantly legible brand language for anyone who knows the product. Same laws apply unchanged (oversized scale, physical entry/exit, tip-targeting, click-ignition), and a name-tag variant travels as one rigid unit (tag trailing the arrow). Reach for it only when the motif is genuinely referenceable; a cursor nobody recognizes is just a weird arrow — default back to macOS.

filter: drop-shadow(0 4px 6px rgba(0,0,0,.3))

pointer-events: none

z-index

above all scene content,

will-change: transform

css

#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;
}

全屏场景：
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

。

css

#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;
}

Entry law — physical, never revealed

入场规则 — 物理化，绝不突兀显现

The cursor always enters from off-screen (canonical: from below,

top:115–120%

) and travels to its first target in one decelerating glide. It must feel like it entered the room. Never opacity-fade it in at a resting position, never mask-reveal it — that reads as a glitch (a real, repeatedly observed failure mode).

Default path: straight up the y-axis to the target — no fragmented diagonals. A diagonal is fine when it IS the story (entering toward an off-axis target), but it is one continuous vector either way.

duration: 0.4–0.92s

ease: power3.out

immediateRender: false

on the fromTo.

tl.fromTo(
  cursor,
  { left: "48.6%", top: "115%" },
  { left: "48.6%", top: "55%", duration: 0.85, ease: "power3.out", immediateRender: false },
  0.25,
);

光标始终从屏幕外入场（标准路径：从下方进入，

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,
);

Tip-targeting & the click tap

尖端定位与点击操作

The hot-spot is the arrow TIP, not the box center. Land the tip on the target's center, and pivot all press scaling on the tip:

transformOrigin: '21% 14%'

(for the house arrow path in a 24-unit viewBox).

Click = asymmetric compress/expand (1:2 ratio reads as a real tap):

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,
);

The target's reaction is a separate, parallel tween (button:

scale: 0.94

+ press color/shadow, starting at the same

). Cursor-only taps (e.g. focusing a text input) get NO target reaction. Pair with

cursor-click-ripple

press-release-spring

for the target side.

光标热点是箭头尖端，而非光标框中心。将尖端落在目标中心，所有按压缩放都以尖端为轴心：

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

+ 按压颜色/阴影，与点击动画同时启动）。仅光标点击（例如聚焦文本输入框）不需要目标元素反应。可搭配

cursor-click-ripple

press-release-spring

实现目标元素的反馈效果。

The click IGNITES the next beat

点击触发下一节奏点

Never let a morph, typing run, window transform, or scene-defining animation simply start. Park the cursor on the trigger and let the click cause it, same-frame:

click ▸ menu/submenu cascade, toggle flip
click ▸ typing kickoff into an input
click ▸ composer morph-down / window shrink
click ▸ logo ignition / flight launch
click ▸ play-state flip + UI-life wake in a product mock

During long beats it doesn't own (typing, narration), the cursor drifts aside (0.5–0.9s,

power2.out

) — never sits frozen on top of the action, never wobbles idly.

绝对不能让变形、打字、窗口变换或场景级动画凭空启动。将光标停留在触发点上，让点击触发后续事件，且在同一帧完成：

点击 ▸ 菜单/子菜单展开、切换翻转
点击 ▸ 输入框启动打字动画
点击 ▸ 编辑器向下变形 / 窗口缩小
点击 ▸ Logo激活 / 启动动画
点击 ▸ 播放状态切换 + 产品原型UI激活

在不属于光标的长节奏点（打字、旁白）期间，光标移至侧边（0.5–0.9s，

power2.out

缓动）——绝对不能停留在动作上方静止不动，也不能无意义地晃动。

Exit law & cross-scene handoff

退场规则与跨场景交接

Two sanctioned exits — both physical, never an opacity fade in place:

Leave the frame: accelerate off the nearest edge with
```
power2.in
```
(
```
left:'118%'
```
,
```
left:'-12%'
```
, or
```
top:'116%'
```
), 0.5–0.7s.
Cut-the-curve handoff: in the final ~0.3s before a hard cut, the cursor starts accelerating (
```
power2.in
```
) toward the NEXT scene's first click point, covering the first ~1/3 of that path; the next composition
```
gsap.set
```
s the cursor at the handoff pose and continues with
```
power2.out
```
at matched velocity. The cursor itself becomes the carrier element that stitches the seam:

// 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);

两种合规的退场方式——均为物理化退场，绝对不能在原地通过透明度淡出：

移出画面：以
```
power2.in
```
缓动加速移出最近的边缘（
```
left:'118%'
```
、
```
left:'-12%'
```
或
```
top:'116%'
```
），时长0.5–0.7s。
曲线切割交接：在硬切前最后约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);

Checklist

检查清单

≥ 7cqw full-frame (4.6–5.5cqw inside a mock) — when unsure, bigger
enters from off-screen on one continuous vector (no fade/mask reveal)
tip lands on the target center; press pivots on
```
transformOrigin: '21% 14%'
```
every click causes something, same-frame
drifts aside during beats it doesn't own; zero idle wobble
exits physically (off-frame or cut-the-curve handoff) — no fade-in-place

全屏场景尺寸≥7cqw（原型内场景为4.6–5.5cqw）——拿不准时，选更大尺寸
从屏幕外沿连续矢量路径入场（禁止淡入/遮罩显现）
尖端落在目标中心；按压动画以
```
transformOrigin: '21% 14%'
```
为轴心
每一次点击都触发同步帧的后续事件
在非主导节奏点移至侧边；无无意义晃动
物理化退场（移出画面或曲线切割交接）——禁止原地淡出