X線レンズ（長押しで裏側を覗く）

hover

x-ray lens / reveal lens / cursor mask reveal

X線レンズ（長押しで裏側を覗く）

押さえている間だけカーソル位置に円いレンズが開き、その内側だけ別のレイヤー(設計図・注釈・別の画像)が透けて見える動き。画面全体を切り替えずに「ここの裏側」だけを見せられるのが強みで、レンズが開く速さと指への付いてき方で道具の重さが決まる。

01 — Demo video

Play live →

02 — Prompt template

ページに x-ray lens（長押しで裏側を覗くレンズ）を実装してください。

- 表のレイヤーと、同じ座標に重ねた裏のレイヤー(設計図・注釈など)の2枚を用意する
- 裏のレイヤーは clip-path: circle(r at x y) で切り抜き、普段は r=0 で隠しておく
- pointerdown から {{hold}}ms 押し続けたらレンズを開く。それより前に離せば通常のクリック、途中で12px以上動いたら開かない(タッチは待ちを長めにする)
- 半径は毎フレーム r += (目標 - r) × {{open}} で {{radius}}px まで寄せ、離したら同じ式で0に戻す
- レンズの中心は毎フレーム x += (指の位置 - x) × {{follow}} で追従させる
- 位置と半径の更新は requestAnimationFrame 1本にまとめ、pointermove ではイベントの座標を保存するだけにする
- 縁にはリング線を描き、レンズの中だけ十字線と座標を出して「覗いている」ことを示す
- 長押し中は文字選択とタッチのスクロールを止める(user-select: none / touch-action: none)
- prefers-reduced-motion 時は追従と開閉の補間を切り、押した位置にレンズを即座に開閉する

ページに x-ray lens（長押しで裏側を覗くレンズ）を実装してください。

- 表のレイヤーと、同じ座標に重ねた裏のレイヤー(設計図・注釈など)の2枚を用意する
- 裏のレイヤーは clip-path: circle(r at x y) で切り抜き、普段は r=0 で隠しておく
- pointerdown から {{hold}}ms 押し続けたらレンズを開く。それより前に離せば通常のクリック、途中で12px以上動いたら開かない(タッチは待ちを長めにする)
- 半径は毎フレーム r += (目標 - r) × {{open}} で {{radius}}px まで寄せ、離したら同じ式で0に戻す
- レンズの中心は毎フレーム x += (指の位置 - x) × {{follow}} で追従させる
- 位置と半径の更新は requestAnimationFrame 1本にまとめ、pointermove ではイベントの座標を保存するだけにする
- 縁にはリング線を描き、レンズの中だけ十字線と座標を出して「覗いている」ことを示す
- 長押し中は文字選択とタッチのスクロールを止める(user-select: none / touch-action: none)
- prefers-reduced-motion 時は追従と開閉の補間を切り、押した位置にレンズを即座に開閉する

ページに x-ray lens（長押しで裏側を覗くレンズ）を実装してください。

- 表のレイヤーと、同じ座標に重ねた裏のレイヤー(設計図・注釈など)の2枚を用意する
- 裏のレイヤーは clip-path: circle(r at x y) で切り抜き、普段は r=0 で隠しておく
- pointerdown から {{hold}}ms 押し続けたらレンズを開く。それより前に離せば通常のクリック、途中で12px以上動いたら開かない(タッチは待ちを長めにする)
- 半径は毎フレーム r += (目標 - r) × {{open}} で {{radius}}px まで寄せ、離したら同じ式で0に戻す
- レンズの中心は毎フレーム x += (指の位置 - x) × {{follow}} で追従させる
- 位置と半径の更新は requestAnimationFrame 1本にまとめ、pointermove ではイベントの座標を保存するだけにする
- 縁にはリング線を描き、レンズの中だけ十字線と座標を出して「覗いている」ことを示す
- 長押し中は文字選択とタッチのスクロールを止める(user-select: none / touch-action: none)
- prefers-reduced-motion 時は追従と開閉の補間を切り、押した位置にレンズを即座に開閉する

03 — Params

radius(レンズの半径 px) — 範囲 50〜200 / 初期 110
実測はPC 150px／スマホ 110px。見出し1行と本文2〜3行が同時に収まる大きさが目安。80px未満は覗き穴になって文脈が読めず、画面幅の3分の1を超えると切り替えと変わらなくなる。
follow(追従の強さ 0〜1／フレーム) — 範囲 0.1〜1 / 初期 0.6
毎フレーム、残り距離のこの割合だけ指に寄る。実測は長押し中0.6・待機中の小さな輪0.3。0.5〜0.7で「手に持った道具」の重さが出る。1は貼り付いて軽く、0.25未満は遅れすぎて読みたい場所に止まらない。
open(開閉の速さ 0〜1／フレーム) — 範囲 0.05〜0.5 / 初期 0.16
半径を0→最大へ寄せる割合。実測0.16で、約300msかけて減速しながら開く。0.3を超えるとパッと出て唐突、0.08未満は開ききる前に指を離してしまう。
hold(長押し判定 ms) — 範囲 0〜600 / 初期 170
押してからレンズが開くまでの待ち。実測はマウス170ms・タッチ380ms。これより早く離せば普通のクリック、その間に12px以上動けばドラッグとして諦める。0にするとリンクを押すたびにレンズが出てしまう。

04 — Vocab

clip-path: circle() — 要素を円で切り抜く指定。circle(110px at 40% 60%) のように半径と中心を数値で動かせるので、マスク画像なしでレンズの穴を作れる。
long press(長押し) — 押下から一定時間離さない操作。タイマーで判定し、時間内に離せばクリック、動けばドラッグとして扱い分ける。
lerp(線形補間) — 現在値を目標へ毎フレーム一定割合ずつ寄せる計算。係数が小さいほど遅れて付いてきて、減速しながら止まる。
reveal layer(裏レイヤー) — 表と同じ座標に重ねておく別の描画。設計図・注釈・加工前の写真など「同じ場所の別の顔」を敷くと、レンズで覗く意味が生まれる。

05 — NG → OK examples

言い方: 「「カーソルを当てたところだけ中身が透けて見えるようにして」」

なぜNG: 「透ける」だけでは裏に何を敷くかも、いつ開くかも決まらない。ホバーで常時開く虫眼鏡(ただの拡大)や、radial-gradient で明るくするだけのスポットライトが返ってきやすく、長押しとクリックの区別も抜け落ちる。

言い方: 「「x-ray lensを実装。裏レイヤーを clip-path: circle で切り抜き、170ms長押しで開く。半径110pxへ毎フレーム0.16ずつ寄せ、中心は0.6で追従。reduced-motion時は即開閉」」

なぜOK: 2枚重ね＋円形マスクという構造と、長押しの閾値・開閉と追従の補間係数まで指定している。「長押しで開く」の一言で、リンクのクリックとレンズの操作が衝突しなくなる。