oversized-cursor
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.
1How It Works & Mechanism
General Principle: Treat the mouse cursor as a "visible protagonist"—it enters from off-screen, leads the viewer's eye to the next point of interest, **causes** what happens next with a click, and then exits.
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.
Why it's worth doing: The oversized cursor is the cheapest, highest-yield motion source in launch videos—a single element driven purely by transform tweens that simultaneously resolves three issues: "the scene feels dead," "morphs/transitions lack a cause," and "the viewer isn't shaken out of the previous state during scene changes." It also establishes an actionable criterion: "the bigger the better; actual size is practically invisible at video scale."
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.
Size and style are strict conventions: 7cqw for full-frame scenes (≈134px at 1920 width), 4.6–5.5cqw when nested inside mocks, never smaller. The visual format is fixed to an SVG arrow: either a white body with a black stroke or a dark body (#1c1c1c) with a white stroke (1.4px), chosen based on scene contrast and kept consistent throughout the entire video.
- **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.
Entry Law: Always enter from off-screen (standard: from below at top:115–120%) with a single decelerating glide to the first target, mustering the feeling of "entering a room." Never allow fading in or mask-revealing once in place—that reads as a glitch (noted by the author as a repeatedly observed real failure mode).
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).
Hit-point Criterion: The hotspot is the arrow's **tip**, not the bounding box center. The tip lands on the target's center, and all click compression scales use the tip as the pivot (transformOrigin: '21% 14%'). Click = asymmetric squash/rebound (a 1:2 ratio reads as a realistic click).
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):
Click must ignite the next beat: Morphs, typing runs, window transitions, and scene-defining animations are never allowed to "start on their own"—park the cursor at the trigger point and let the click cause it on the exact same frame (menu cascading / typing start / window shrinking / logo ignition / playhead toggling).
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:
Boundary between drift and rest: During beats outside its control, the cursor drifts aside over 0.5–0.9s with power2.out, never freezing directly above the action and never idling with wobble.
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.
Exit Law: Both permitted exit paths must be physical, never fading out in place—① Accelerating off-screen (toward the nearest edge, power2.in, 0.5–0.7s); ② Cut-the-curve handoff (accelerating toward the next scene's first click target starting ~0.3s before a hard cut, covering the first 1/3 of the path; the next composition sets the handoff pose via gsap.set and continues with power2.out at matching velocity)—turning the cursor itself into a carrier element that stitches the seam.
2. **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:
Brand motif cursors are a "power move" with prerequisites: When the subject brand has an identifiable cursor identity (multiplayer colored arrows + name tags in collab tools, precise crosshairs in creative suites, or distinctive product pointers), substitute the macOS arrow with that cursor—the same rules apply unchanged (oversized scale, physical entry/exit, tip targeting, click ignition), with name tag variants moving as a single rigid body. Use only when the motif is genuinely recognizable; an unrecognizable cursor is just a bizarre arrow and should fall back to macOS.
Reach for it only when the motif is genuinely referenceable; a cursor nobody recognizes is just a weird arrow — default back to macOS.
2Core Capabilities
3External Dependencies
| Kind | Dependency / Endpoint |
|---|---|
| package | 兄弟 skill 依赖（被指名配对）：motion-doctrine（carrier / same-frame ignition 的上位法则）、cut-the-curve（退场交接技法）、cursor-click-ripple 与 press-release-spring（目标侧按压/涟漪） |
| package | 运行时库（片段运行于宿主 composition 的 GSAP 时间线；本 skill 不自带库） |
4Recommended Governance & Evidence
- SKILL.md: Pure prompt directives and rule text, without script execution or external impacts
5Second-Pass Verification
- [ok] 是否存在隐蔽的脚本或网络调用（green 档前提） — 全目录仅 SKILL.md；全文无 shebang、无 ```bash 块、无 curl/npx/node 调用；URL 与 process.env 零命中。文中出现的 `// scene A, last 0.3s …` 是给作品用的 GSAP 注释代码，不是本 skill 的执行入口。
- [ok] 第一遍抽取的数值参数是否逐条可回源 — 7cqw / 4.6–5.5cqw、0.4–0.92s + power3.out + immediateRender:false、transformOrigin '21% 14%'、1:2 压缩回弹（0.84/0.1s + 1/0.22s）、漂移 0.5–0.9s power2.out、退场 0.5–0.7s power2.in、交接 0.3s power2.in + 0.6s power2.out、drop-shadow(0 4px 6px rgba(0,0,0,.3))、z-index:20、pointer-events:none — 均在源文件逐字命中。
- [ok] 「品牌母题光标」是否被写成无门槛的鼓励（会误导为「随便换」） — 原文有明确门槛与退回条件（`Reach for it only when the motif is genuinely referenceable; a cursor nobody recognizes is just a weird arrow — default back to macOS.`），且强调同样法则原样适用，并给出门槛示例（Figma 式多人箭头+名牌、创作套件十字准星）。第一遍未夸大。
- [ok] 「点击点火」是否与目标侧反应混淆（第一遍的表述风险点） — 原文把两件事分开：光标的压缩/回弹 tween 在 t 起，目标的反应用**并行独立 tween**（按钮 scale 0.94 + 按压色/影，同 t 起）；并明确 `Cursor-only taps (e.g. focusing a text input) get NO target reaction.` 本 JSON 已按此分别表述。
- [ok] 退场是否有「原地淡出」的例外（避免把规则写得比原文更绝对） — 原文 `Two sanctioned exits — both physical, **never an opacity fade in place**`，清单亦写 `exits physically (off-frame or cut-the-curve handoff) — no fade-in-place`。无例外，第一遍表述准确。
6Verdict & Scenarios
c81758bc876bab42…