超大游標——視線載體
一個刻意放大的 macOS 風格指標，以「可見主角」的姿態在畫面中移動：從螢幕外進入，引導觀眾視線到下一關注點，點擊觸發後續事件，然後離開。經多個發布影片實戰驗證。
為何存在。 在發布影片中，大幅游標移動是成本最低但回報最高的動態來源之一：單一元素、純變形動畫，它能夠 (1) 在原本靜止的場景中引導視線穿越螢幕，(2) 為形變/轉場提供因果觸發（「是這個點擊造成的」），(3) 在啟動新場景或複雜動畫序列時，幫助視線從停滯狀態中脫離。越大越好——實際大小的游標在影片比例中會消失。
尺寸與外觀（團隊慣例）
- 全螢幕場景：
7cqw（約 134px，以 1920 為基準）。在模擬器/小畫面變體中：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）——絕不凍結在動作上方，也不無意義地晃動。
退出法則與跨場景移交
兩種經批准的退出方式——皆為物理性移動，絕不原地不透明度淡出：
- 離開畫面：以
power2.in加速朝向最近的邊緣離開（left:'118%'、left:'-12%'或top:'116%'），0.5–0.7s。 - 曲線切割移交：在硬切換前的最後約 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%'為軸心 - 每次點擊都在同一幀內觸發某件事
- 在不主導的節拍期間漂移到一旁；零無意義晃動
- 以物理方式退出（離開畫面或曲線切割移交）——不原地淡出