超大游標 —— 視線引導者
一個刻意放大的 macOS 風格指針，作為 可視主角 在畫面中移動：它從畫外進入，引導觀眾視線到下一個重點，點擊觸發下一事件，然後離開。本技術已在多個啟動影片中經過實戰驗證。
為何需要它。 在啟動影片中，大游標移動是「最廉價的高回報動態來源」之一：只需一個元素、transform-only 補間動畫，就能 (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.9 秒，power2.out）——絕不凍結在動作上方，也不無謂晃動。
離開法則與跨場景交接
兩種正規出口——都是物理性的，絕不原地不透明度淡出：
- 離開畫面：以
power2.in加速離開最近的邊緣（left:'118%'、left:'-12%'或top:'116%'），0.5–0.7 秒。 - 切曲線交接：在硬切剪前的最後約 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%'為軸心 - 每次點擊在同影格內造成某件事
- 在不屬於它主導的環節中漂移到旁邊；零無謂晃動
- 物理性離開（畫外或切曲線交接）——無原地淡出