コンテンツ制作 · heygen-com/hyperframes

oversized-cursor

HyperFrames ローンチビデオ向けのハウススタイル特大 macOS カーソル手法。カーソルやポインタ主導のアクションを伴うシーン、UI シーンの開始、クリックによる変形・トランジション・タイピング動作の発火、あるいは静止し活気がなく陳腐化したシーンで視線を誘導し停滞状態から脱却させる安価で高効果なモーションソースが必要な場合にロードします。カーソルのサイズ・外観(ブランドモチーフカーソルを含む)、画面外からの侵入法則、先端ターゲティングとクリックタップ、クリックによる次ビート点火、および退場・シーン間ハンドオフを網羅します。

L1 基本 · ソース登録のみV1 コミット固定Dual-pass Audit
Author heygen-comGitHub heygen-com/hyperframes ↗Stars 44283License Apache-2.0(仓库根 LICENSE 为 Apache License Version 2.0)Commit d2f0bc7f34
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

1仕組みと動作原理

総綱:マウスカーソルを「目に見える主人公」として扱う——画面外から侵入し、視聴者の視線を次の注目点へと運び、1回のクリックで次に起きる出来事を**引き起こし**、そして退場する。

.claude/skills/oversized-cursor/SKILL.md
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.
ここでの目的:この技法の存在意義(視線誘導+因果点火+セグメンテーション)を提示し、以降の全ルールをこれら3つの利益のために機能させること。

実施する価値:特大カーソルはローンチビデオにおいて最も安価で高効果なモーションソースである——単一要素かつ純粋な transform の tween でありながら、「画面が死んで見える」「変形やトランジションに動機がない」「新シーン切替時に視聴者が古い状態から引き離されない」という3つの課題を同時に解決する。また、「大きいほど良い、実サイズは動画スケールでは見えないに等しい」という実践的な判定基準を提示する。

.claude/skills/oversized-cursor/SKILL.md
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)のいずれかをシーンのコントラストに応じて選択し、映像全体で統一を保つ。

.claude/skills/oversized-cursor/SKILL.md
- **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.
ここでの目的:「大きい」を cqw の数値として定量化して2段階のシーン別プリセットを提供し、「全編統一」をルール化してシーンごとの質感ブレを防ぐこと。

登場の法則:常に画面外から登場させる(標準は下部 top:115–120% から)。最初のターゲットへ1回の減速スライドで進入し、「部屋に入ってきた感覚」を持たせなければならない。配置後のフェードインやマスクによる表示は絶対に禁止——グリッチとして認識されるため(作者が繰り返し観察した実際の失敗パターンとして明記)。

.claude/skills/oversized-cursor/SKILL.md
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).
ここでの目的:「物理的な進入」をルール化し、デフォルトパス(y軸方向の直進。対角線移動はそれ自体が物語性を持つ場合のみ許可)とパラメータ(0.4–0.92s、power3.out、fromTo では immediateRender:false が必須)を規定すること。

ヒットポイントの基準:ホットスポットはバウンディングボックスの中心ではなく矢印の**先端**である。先端がターゲットの中心に重なり、すべての押し込みスケールは先端を支点(transformOrigin: '21% 14%')とする。クリック=非対称な縮小・跳ね返り(1:2 の比率がリアルなクリックとして認識される)。

.claude/skills/oversized-cursor/SKILL.md
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):
ここでの目的:「どこを指すか」「どこを支点に押し込むか」を定量化すること。また、ターゲット側の反応は**並行する独立した tween**(ボタンの scale:0.94 + 押下カラー/シャドウ、同一の t で開始)とし、純粋なフォーカス系クリック(入力欄へのフォーカス等)ではターゲット側の反応を与えないことを明確化する。

クリックで次のビートを点火:変形、タイピングストリーム、ウィンドウ遷移、シーンを決定づけるアニメーションが「勝手に始まる」ことを禁止する——カーソルをトリガーポイントに静止させ、同一フレームでのクリックによって発生させる(メニュー展開/タイピング開始/ウィンドウ縮小/ロゴ点火/再生状態のトグル)。

.claude/skills/oversized-cursor/SKILL.md
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:
ここでの目的:motion-doctrine の因果運動(causal motion)および同フレーム点火(same-frame ignition)と構造を一致させること。また、「カーソルの管轄外となる長時間のビート(タイピング、ナレーション)ではカーソルを脇に漂わせ、動作上で静止させたり無駄に揺らしたりしてはならない」と規定する。

ドリフトと静止の境界:管轄外のビートでは、カーソルは 0.5–0.9s、power2.out で脇へ漂わせ、アクションの真上でフリーズさせたり、アイドル状態で小刻みに揺らしたり(idle wobble)しない。

.claude/skills/oversized-cursor/SKILL.md
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.
ここでの目的:「idle wobble 禁止」という上位の禁止事項をカーソルという具体要素に落とし込むこと(motion-doctrine の idle-sine 禁止と一致)。

退場の法則:許可される2つの退場パスはいずれも物理的でなければならず、その場でのフェードアウトは厳禁——① 画面外への加速退出(最寄りの画面端へ、power2.in、0.5–0.7s);② cut-the-curve ハンドオフ(ハードカットの直前約0.3秒から次シーンの最初のクリックポイントへ向けて加速を開始し、そのパスの前半1/3をカバー。次コンポジションでは gsap.set でハンドオフ姿勢に配置後、速度を合わせて power2.out で継続走行)——このときカーソル自身がカットの継ぎ目を縫合するキャリア要素となる。

.claude/skills/oversized-cursor/SKILL.md
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:
ここでの目的:カーソルを motion-doctrine のキャリア概念(カット点を跨いで位置+速度を整合させハンドオフする)に接続し、そのまま転記可能な GSAP コード(Aシーン tl.to CUT-0.3、Bシーン gsap.set + tl.to 0)を提供すること。

ブランドモチーフカーソルは「強力な一手」だが前提条件あり:メインブランドに識別可能なカーソルアイデンティティがある場合(コラボツールの色付きマルチプレイヤー矢印+ネームタグ、クリエイティブツールの精密な十字カーソル、独自プロダクトのポインタなど)、macOS 矢印の代わりにそのカーソルを採用する——同様の法則がそのまま適用され(特大スケール、物理的な出入場、先端ヒット、クリック点火)、ネームタグ派生形は1つの剛体として全体が移動する。ただしモチーフが真に識別可能な場合に限られ、誰も認識できないカーソルはただの奇妙な矢印に過ぎないため、macOS にフォールバックすべきである。

.claude/skills/oversized-cursor/SKILL.md
Reach for it only when the motif is genuinely referenceable; a cursor nobody recognizes is just a weird arrow — default back to macOS.
ここでの目的:「デフォルト」と「より良い選択肢」を区別し、視認性を犠牲にした装飾を防ぐためのフォールバック基準を設けること。

2コア機能

01サイズ/スタイルのハウス規約(全画面 7cqw、モック内 4.6–5.5cqw、2種の配色塗り、全編一貫性)
02画面外からの登場法則+進入パラメータおよびコード(0.4–0.92s、power3.out、immediateRender:false、フェードイン/マスク表示の禁止)
03先端ヒットと押下支点(transformOrigin '21% 14%'、1:2 の縮小/跳ね返り、ターゲット側の並行独立反応)
04クリックによる次ビート点火+管轄外ビートでの退避ドリフト
052通りの物理的退場+シーンを跨ぐ cut-the-curve ハンドオフコード(速度整合による継続を含む)
06ブランドモチーフカーソルの置換戦略(識別可能な場合のみ使用、それ以外は macOS 矢印へフォールバック)
07納品前セルフチェックリスト(サイズ/登場/命中/点火/ドリフト/退場の6項目)

3外部依存関係

KindDependency / Endpoint
package兄弟 skill 依赖(被指名配对):motion-doctrine(carrier / same-frame ignition 的上位法则)、cut-the-curve(退场交接技法)、cursor-click-ripple 与 press-release-spring(目标侧按压/涟漪)
package运行时库(片段运行于宿主 composition 的 GSAP 时间线;本 skill 不自带库)

4推奨統制措置と判定根拠

安全運用のための推奨統制措置
Agent 向け
自動ロード可能
管理者向け
ソースとバージョンの記録
判定根拠(ファイルパスと抜粋)
  • SKILL.md: 純粋なプロンプト指示およびルールテキストであり、スクリプト実行や外部への影響を持たない
監査ノート: 項目別検証(判定対象=スキル自身のディレクトリ):ディレクトリ内は SKILL.md(6,625バイト)のみ。スクリプトファイルなし、npx/CLI 呼び出しなし、URL/エンドポイントなし、process.env や認証情報の読み取りなし、ディスク書き込み命令なし。`pointer-events: none` や `will-change: transform` は成果物側の CSS プロパティに過ぎない。技法自体(特大カーソル、クリック点火、物理的退場)も外部接触を一切行わないためグリーンと判定。

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結論

  • 「特大カーソル」を定量的な費用対効果(最も安価で高効果なモーションソース)として論証し、判定可能なワンフレーズの基準を提示
  • 登場と退場の両方を物理法則として定義しパラメータを付与、手軽だが不具合に見える「フェードイン/その場フェードアウト」を完全に排除
  • クリックの責務を厳格化:変形/タイピング/トランジションが「勝手に始まる」ことを禁じ、同一フレームのクリックによって引き起こすことを義務付け
  • そのまま流用可能なシーン間ハンドオフコードを提供し、カーソルを継ぎ目を縫合するキャリアへと昇華(motion-doctrine のキャリア概念と直結)
  • 納品前に確認できる6項目のセルフチェックリストを備え、エージェントが感覚ではなく基準に基づいてセルフチェック可能
  • 最適な用途: 適用推奨:カーソルやポインタ主導のアクションが登場するあらゆるシーン、UI シーンの冒頭、クリックで変形/トランジション/タイピング/ウィンドウ縮小/再生状態切り替えを発火させる場合、画面が静的・平坦・陳腐で視線を誘導し停滞から引き離す安価で高産出な演出源が必要な場合、ハードカット部分でカーソルをシーン間キャリアとしてハンドオフする場合。motion-doctrine や cut-the-curve との併読を推奨。
    不向きな用途: 非推奨:① UI/ポインタの文脈がないシーン(純粋なグラフィック、文字のみ、抽象アニメーション)——カーソルを無理に入れると単なる邪魔な装飾になる;② 全シーンへの無分別な適用(画面の主権を奪い、予算抑制機構もない);③ 機械的ゲートによる結果保証を求めるパイプライン——本スキルにはスクリプトやバリデーションゲートは含まれない;④ ビルド時に次シーンの最初のクリック座標を確定できない設計でのシーン間ハンドオフ。
    Install Agent-Ready
    ① Verified Mirror 2026-09-28
    Option A · Direct DownloadDownload oversized-cursor.tar.gz
    sha256: c81758bc876bab42…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit d2f0bc7f34.