oversized-cursor

特大カーソル — 視線を運ぶ存在

意図的に大きくしたmacOS風ポインターが、画面内を移動し、_目に見える主人公_として振る舞います。画面外から入り、次の注目ポイントへ視線を導き、クリックして次の展開を引き起こし、画面外へ去ります。複数のローンチ映像で実績があります。

必要な理由。 大きなカーソルの動きは、ローンチ動画で最も低コストで高い効果が得られるモーション表現のひとつです。要素はひとつだけで、トゥイーンもtransformのみです。そして、（1）そのままでは動きのない印象になるシーンで画面全体に視線を導き、（2）モーフやトランジションに因果関係を与え（「クリックしたから変化した」）、（3）新しいシーンや複雑なアニメーションシーケンスを始めるときに、停滞した状態から視線を切り替えます。大きいほど効果的です。実寸のカーソルは動画のサイズでは見えなくなります。

サイズと外観（標準規定）

• フルフレームのシーン：7cqw（1920pxで約134px）。モック内／小さなフレームのバリエーション： 4.6–5.5cqw。これより小さくしないでください。
• どこでも同じSVGの矢印形状を使います。実績のある塗りは2種類です。白い本体＋黒いストローク、または黒い本体（#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%; /* 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;
}

登場のルール — 物理的に登場させ、決して出現させない

カーソルは必ず画面外から入ります（標準形：下から、top:115–120%）。最初のターゲットまで、減速しながら一度に移動します。_部屋に入ってきた_と感じられる動きにしてください。静止位置で不透明度を下げた状態からフェードインさせたり、マスクで表示したりしないでください。そうすると不具合のように見えます（実際に何度も確認されている失敗パターンです）。

• デフォルトの経路：ターゲットまでy軸に沿って真っすぐ上へ移動します。分断された斜め移動は避けてください。 ターゲットが軸から外れていて、斜めの移動がストーリーそのものである場合は問題ありません。ただし、その場合も移動は途切れない一本のベクトルにします。
• duration: 0.4–0.92s、ease: power3.out、fromToにはimmediateRender: falseを指定します。

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を組み合わせます。

クリックで次のビートを発火させる

モーフ、タイピング、ウィンドウの変形、シーンを決定づけるアニメーションを、ただ_開始_させてはいけません。カーソルをトリガーの上に止め、クリックと同じフレームで動作を引き起こします。

• クリック ▸ メニュー／サブメニューの連鎖表示、トグルの切り替え
• クリック ▸ 入力欄へのタイピング開始
• クリック ▸ コンポーザーのモーフダウン／ウィンドウの縮小
• クリック ▸ ロゴの点火／飛行の開始
• クリック ▸ 製品モックの再生状態を切り替え、UIの動きを起動

タイピングやナレーションなど、カーソルが長いビートを主導しない間は、脇へ流します（0.5〜0.9秒、power2.out）。アクションの上で静止させたり、何もせず揺らしたりしてはいけません。

離脱ルールとシーン間の引き継ぎ

認められている離脱方法は2つです。どちらも物理的に移動させます。その場で不透明度をフェードさせることはありません。

1. フレーム外へ移動：最も近い端に向かって power2.in で加速しながら移動します （left:'118%'、left:'-12%'、または top:'116%'）。時間は0.5～0.7秒です。
2. カーブを切り替えて引き継ぎ：ハードカットの直前の約0.3秒間に、カーソルが次のシーンの最初のクリック位置に向かって 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);

チェックリスト

• 全画面で7cqw以上（モック内では4.6～5.5cqw）にします。迷ったら大きくします。
• 画面外から1本の連続したベクトルに沿って入ります（フェードやマスクによる表示は不可）
• 先端をターゲットの中心に合わせます。押下時は transformOrigin: '21% 14%' を支点にします。
• クリックするたびに、同じフレーム内で何かが起こります。
• 担当しないビートの間は脇に移動します。待機中の揺れは一切ありません。
• 物理的に離脱します（フレーム外へ移動、またはカーブを切り替えて引き継ぎ）。その場でフェードさせません。