特大カーソル — 視線誘導役
意図的に大きくしたmacOSスタイルのポインターが、フレーム内を可視の主役として移動します。画面外から登場し、視聴者の目を次の注目点へ導き、クリックして次のアクションを引き起こし、そして退場します。複数のローンチ動画で実績のある技法です。
なぜ必要なのか。 大きなカーソルの動きは、ローンチ動画における最も安価で効果的な動きの源の一つです。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%）、最初のターゲットまで減速しながら一筆書きで移動します。あたかも部屋に入ってきたように感じさせる必要があります。決して静止位置で不透明度フェードインさせたり、マスクで出現させたりしてはいけません — それはグリッチに見えます（実際に繰り返し観察された失敗モードです）。
- デフォルトパス: 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%'を中心に - すべてのクリックが同じフレームで何かを引き起こす
- 所有しないビート中は脇にそれる; 無駄な揺れゼロ
- 物理的に退出（フレーム外またはカーブカットハンドオフ）— その場でのフェードなし