特大カーソル — 視線を運ぶ存在
意図的に大きくしたmacOSスタイルのポインターが、フレームを_目に見える主役_として移動します。画面外から進入し、視聴者の視線を次の注目ポイントへ誘導し、クリックして次のアクションを引き起こし、そして去っていきます。複数のローンチフィルムで実績のある手法です。
なぜ存在するのか。 大きなカーソルの動きは、ローンチビデオにおいて最も安価で効果的なモーションソースの1つです。1つの要素とトランスフォームのみのトゥイーンで、(1) 静的に見えるシーンに視線を導き、(2) モーフやトランジションに因果関係を与え（「そのクリックが起こした」）、(3) 新しいシーンや複雑なアニメーションシーケンスを開始する際に、視聴者の視線を古い状態から切り離します。大きい方が良いです — 実際のサイズのカーソルはビデオスケールでは見えなくなります。
サイズと外観（ハウスコンベンション）
- フルフレームシーン:
7cqw（1920pxで約134px）。モック内/小フレームのバリアント:4.6–5.5cqw。それより小さくしないでください。 - どこでも同じSVG矢印ジオメトリを使用します。実績のある2つの塗りつぶし — 白い本体+黒いストローク、または黒い本体（
#1c1c1c）+白いストローク（1.4px）。シーンのコントラストに応じて選び、フィルム内では一定に保ってください。 - ブランドモチーフのカーソル（切り札）。 macOSの矢印はデフォルトであり、必須ではありません。対象ブランドに認識可能なカーソルアイデンティティがある場合 — コラボレーションデザインツールの名前タグ付きカラフルなマルチプレイヤー矢印（Figmaスタイル）、クリエイティブスイートの精密なクロスヘア、特徴的な製品ポインター — そのカーソルを使用してください。製品を知っている人には即座に理解可能なブランド言語となります。同じルールが変更されずに適用され（特大スケール、物理的な進入/終了、先端ターゲティング、クリック起動）、名前タグ付きバリアントは1つの剛体ユニットとして移動します（タグは矢印の後ろに付きます）。モチーフが本当に参照可能な場合にのみ使用してください。誰も認識できないカーソルは単なる奇妙な矢印に過ぎません — デフォルトの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%）、最初のターゲットまで1回の減速するグライドで移動します。_部屋に入ってきた_ように感じさせる必要があります。静止位置で不透明度フェードインさせたり、マスクで出現させたりしないでください — それはグリッチのように見えます（実際に繰り返し観察された失敗モードです）。
- デフォルトパス: Y軸に沿って真っ直ぐターゲットへ — 断片的な対角線は避けます。対角線は、それがストーリー上必要である場合（軸外のターゲットに向かって進入するなど）は問題ありませんが、いずれにしても1つの連続したベクトルです。
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つの認可された終了方法 — 両方とも物理的で、その場での不透明度フェードは禁止:
- フレームから去る:
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）— 不明な場合は大きく
- 1つの連続したベクトルで画面外から進入する（フェード/マスク出現なし）
- 先端がターゲットの中心に着地する。押下は
transformOrigin: '21% 14%'を中心に行う - すべてのクリックが同じフレーム内で何かを引き起こす
- 所有しないビート中は脇に退く。無意味な揺れゼロ
- 物理的に終了する（フレーム外へ、またはカーブカットハンドオフ）— その場でのフェード禁止