AI Skills
oversized-cursor

oversized-cursor

熱門

HyperFrames 啟動影片專用的室內風格超大 macOS 游標技巧。當場景涉及游標或指標引導的動作、啟動 UI 場景、透過點擊觸發變形/轉場/打字效果，或當場景顯得靜態、死板或停滯，需要一個低成本高回報的動態來源來引導觀眾視線並脫離停滯狀態時使用。涵蓋游標尺寸/外觀（包括品牌主題游標）、螢幕外進場法則、尖端定位與點擊、點擊觸發下一拍，以及退場/跨場景交接。

3.6萬星標
3412分支
更新於 2026/7/19
獲取技能源代碼

相關技能

napkin3.7萬imagegen-frontend-mobile4.8萬seo-sxo1.2萬
SKILL.md
readonlyread-only
name
oversized-cursor
description

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.

超大游標 — 視線引導者

一個刻意放大的 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 處理目標端。

點擊觸發下一拍

絕不讓變形、打字效果、視窗變形或場景定義動畫直接開始。將游標停在觸發點上，讓點擊在同一幀內引起它：

  • 點擊 ▸ 選單/子選單層疊、切換翻轉
  • 點擊 ▸ 輸入框打字啟動
  • 點擊 ▸ 合成器變形縮小 / 視窗縮小
  • 點擊 ▸ 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%' 為軸心
  • [ ] 每次點擊都在同一幀內引起某件事
  • [ ] 在不屬於它的節拍中漂移開；零無聊晃動
  • [ ] 物理性退場（離開畫面或切曲線交接）— 無原地淡出