1仕組みと動作原理
総綱:マウスカーソルを「目に見える主人公」として扱う——画面外から侵入し、視聴者の視線を次の注目点へと運び、1回のクリックで次に起きる出来事を**引き起こし**、そして退場する。
A deliberately oversized macOS-style pointer that travels the frame as a _visible protagonist_: it enters from off-screen, walks the viewer's eye to the next point of interest, clicks to cause the next thing that happens, and leaves.
実施する価値:特大カーソルはローンチビデオにおいて最も安価で高効果なモーションソースである——単一要素かつ純粋な transform の tween でありながら、「画面が死んで見える」「変形やトランジションに動機がない」「新シーン切替時に視聴者が古い状態から引き離されない」という3つの課題を同時に解決する。また、「大きいほど良い、実サイズは動画スケールでは見えないに等しい」という実践的な判定基準を提示する。
Big cursor movement is one of the cheapest high-yield motion sources in a launch video: one element, transform-only tweens, and it (1) brings the eye across the screen on scenes that would otherwise read as dead, (2) gives causal ignition to morphs/transitions ("the click did that"), and (3) segments the eye out of a stale state when kicking off a new scene or a complex animation sequence. Bigger is better — an actual-size cursor disappears at video scale.
サイズと形状は厳格な規約:全画面シーンでは 7cqw(横幅1920時≈134px)、モック内配置では 4.6–5.5cqw、それ以下は不可。形状は固定の SVG 矢印を用い、白ボディ・黒ボーダーまたは黒ボディ(#1c1c1c)・白ボーダー(1.4px)のいずれかをシーンのコントラストに応じて選択し、映像全体で統一を保つ。
- **Full-frame scenes: `7cqw`** (≈134px at 1920). In-mock / small-frame variants: `4.6–5.5cqw`. Never smaller. - One SVG arrow geometry everywhere. Two proven fills — white body + black stroke, or black body (`#1c1c1c`) + white stroke (1.4px). Pick per scene contrast, keep it constant per film.
登場の法則:常に画面外から登場させる(標準は下部 top:115–120% から)。最初のターゲットへ1回の減速スライドで進入し、「部屋に入ってきた感覚」を持たせなければならない。配置後のフェードインやマスクによる表示は絶対に禁止——グリッチとして認識されるため(作者が繰り返し観察した実際の失敗パターンとして明記)。
The cursor **always enters from off-screen** (canonical: from below, `top:115–120%`) and travels to its first target in one decelerating glide. It must _feel like it entered the room_. Never opacity-fade it in at a resting position, never mask-reveal it — that reads as a glitch (a real, repeatedly observed failure mode).
ヒットポイントの基準:ホットスポットはバウンディングボックスの中心ではなく矢印の**先端**である。先端がターゲットの中心に重なり、すべての押し込みスケールは先端を支点(transformOrigin: '21% 14%')とする。クリック=非対称な縮小・跳ね返り(1:2 の比率がリアルなクリックとして認識される)。
The hot-spot is the arrow TIP, not the box center. Land the **tip** on the target's center, and pivot all press scaling on the tip: `transformOrigin: '21% 14%'` (for the house arrow path in a 24-unit viewBox). Click = asymmetric compress/expand (1:2 ratio reads as a real tap):
クリックで次のビートを点火:変形、タイピングストリーム、ウィンドウ遷移、シーンを決定づけるアニメーションが「勝手に始まる」ことを禁止する——カーソルをトリガーポイントに静止させ、同一フレームでのクリックによって発生させる(メニュー展開/タイピング開始/ウィンドウ縮小/ロゴ点火/再生状態のトグル)。
Never let a morph, typing run, window transform, or scene-defining animation simply _start_. Park the cursor on the trigger and let the click cause it, same-frame:
ドリフトと静止の境界:管轄外のビートでは、カーソルは 0.5–0.9s、power2.out で脇へ漂わせ、アクションの真上でフリーズさせたり、アイドル状態で小刻みに揺らしたり(idle wobble)しない。
During long beats it doesn't own (typing, narration), the cursor **drifts aside** (0.5–0.9s, `power2.out`) — never sits frozen on top of the action, never wobbles idly.
退場の法則:許可される2つの退場パスはいずれも物理的でなければならず、その場でのフェードアウトは厳禁——① 画面外への加速退出(最寄りの画面端へ、power2.in、0.5–0.7s);② cut-the-curve ハンドオフ(ハードカットの直前約0.3秒から次シーンの最初のクリックポイントへ向けて加速を開始し、そのパスの前半1/3をカバー。次コンポジションでは gsap.set でハンドオフ姿勢に配置後、速度を合わせて power2.out で継続走行)——このときカーソル自身がカットの継ぎ目を縫合するキャリア要素となる。
2. **Cut-the-curve handoff**: in the final ~0.3s before a hard cut, the cursor starts accelerating (`power2.in`) toward the NEXT scene's first click point, covering the first ~1/3 of that path; the next composition `gsap.set`s the cursor at the handoff pose and continues with `power2.out` at matched velocity. The cursor itself becomes the carrier element that stitches the seam:
ブランドモチーフカーソルは「強力な一手」だが前提条件あり:メインブランドに識別可能なカーソルアイデンティティがある場合(コラボツールの色付きマルチプレイヤー矢印+ネームタグ、クリエイティブツールの精密な十字カーソル、独自プロダクトのポインタなど)、macOS 矢印の代わりにそのカーソルを採用する——同様の法則がそのまま適用され(特大スケール、物理的な出入場、先端ヒット、クリック点火)、ネームタグ派生形は1つの剛体として全体が移動する。ただしモチーフが真に識別可能な場合に限られ、誰も認識できないカーソルはただの奇妙な矢印に過ぎないため、macOS にフォールバックすべきである。
Reach for it only when the motif is genuinely referenceable; a cursor nobody recognizes is just a weird arrow — default back to macOS.
2コア機能
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| package | 兄弟 skill 依赖(被指名配对):motion-doctrine(carrier / same-frame ignition 的上位法则)、cut-the-curve(退场交接技法)、cursor-click-ripple 与 press-release-spring(目标侧按压/涟漪) |
| package | 运行时库(片段运行于宿主 composition 的 GSAP 时间线;本 skill 不自带库) |
4推奨統制措置と判定根拠
- SKILL.md: 純粋なプロンプト指示およびルールテキストであり、スクリプト実行や外部への影響を持たない
5二重目の独立検証
- [ok] 是否存在隐蔽的脚本或网络调用(green 档前提) — 全目录仅 SKILL.md;全文无 shebang、无 ```bash 块、无 curl/npx/node 调用;URL 与 process.env 零命中。文中出现的 `// scene A, last 0.3s …` 是给作品用的 GSAP 注释代码,不是本 skill 的执行入口。
- [ok] 第一遍抽取的数值参数是否逐条可回源 — 7cqw / 4.6–5.5cqw、0.4–0.92s + power3.out + immediateRender:false、transformOrigin '21% 14%'、1:2 压缩回弹(0.84/0.1s + 1/0.22s)、漂移 0.5–0.9s power2.out、退场 0.5–0.7s power2.in、交接 0.3s power2.in + 0.6s power2.out、drop-shadow(0 4px 6px rgba(0,0,0,.3))、z-index:20、pointer-events:none — 均在源文件逐字命中。
- [ok] 「品牌母题光标」是否被写成无门槛的鼓励(会误导为「随便换」) — 原文有明确门槛与退回条件(`Reach for it only when the motif is genuinely referenceable; a cursor nobody recognizes is just a weird arrow — default back to macOS.`),且强调同样法则原样适用,并给出门槛示例(Figma 式多人箭头+名牌、创作套件十字准星)。第一遍未夸大。
- [ok] 「点击点火」是否与目标侧反应混淆(第一遍的表述风险点) — 原文把两件事分开:光标的压缩/回弹 tween 在 t 起,目标的反应用**并行独立 tween**(按钮 scale 0.94 + 按压色/影,同 t 起);并明确 `Cursor-only taps (e.g. focusing a text input) get NO target reaction.` 本 JSON 已按此分别表述。
- [ok] 退场是否有「原地淡出」的例外(避免把规则写得比原文更绝对) — 原文 `Two sanctioned exits — both physical, **never an opacity fade in place**`,清单亦写 `exits physically (off-frame or cut-the-curve handoff) — no fade-in-place`。无例外,第一遍表述准确。
6結論
c81758bc876bab42…