カーソル・ホバー

• 
  H8通った跡に写真が置かれる（重力で落ちる版も）飲食店のトップ。料理写真がこぼれて落ちる
• 
  H22ホログラム・箔押しカードジムの会員証
• 
  H25レンズ・スポットライト・X線・白黒→カラー建築写真。白黒がレンズの所だけカラーに

重さ →重さ ↓ ↑ 驚き驚き → ほぼ0軽中重 ★★★★★★

H1H11H12H23H31 5

H9 1

H2H3H7H10H13H21 6

H28 1

H6H16H17H19H20H24H26H30 8

H29 1

H14H25 2

H4H8H22 3

H15 1

H5H18H27 3

作例あり このサイトで動作中 見立てに幅がある（幅の真ん中に置いています） 数字はその升の件数です。押すと、その升の表現だけを下の一覧に出します。

1. H1
   追従カーソル（点＋遅れる円）

   単体では古い。H2 と組み合わせる

   重さ 軽 驚き ★1

   参考：github.com/Cuberto/mouse-follower

2. H2
   状況で変わるカーソル（VIEW・DRAG・動画）

   要素ごとにカーソルの状態を切替

   重さ 軽 驚き ★2

3. H3
   色が反転するカーソル

   mix-blend-mode:difference

   重さ 軽 驚き ★2

   参考：sfeerentechniek.be

4. H4
   ねばる水滴・メタボールのカーソル

   SVG の閾値フィルター／Three.js

   重さ 軽〜重 驚き ★3

   参考：panascais.net

5. H5
   カーソルで色の煙をかき混ぜる（流体）

   WebGL の流体計算（MIT の手本）

   重さ 重 驚き ★3

   参考：paveldogreat.github.io/WebGL-Fluid-Simulation

6. H6
   粒子の軌跡

   Canvas2D

   重さ 中 驚き ★2

   参考：steven.com/creator-tech

7. H7
   一覧のホバーで写真が付いてくる

   transform で追従

   重さ 軽 驚き ★2 このサイトで動作中サービス一覧のお悩みの行

   参考：leviev-group.com

8. H8
   通った跡に写真が置かれる（重力で落ちる版も）

   一定距離ごとに画像を置く

   重さ 中 驚き ★3

   参考：restaurant-amici.com

   作例を動かす
9. H9
   ホバーで動画が再生

   video の play()

   重さ 中 驚き ★1

   参考：rodeo.film

10. H10
    メニューのホバーで背景の写真が切り替わる

    重ねた写真を不透明度で

    重さ 軽 驚き ★2

    参考：klim.co.nz

11. H11
    吸い付くボタン

    重さ 軽 驚き ★1

12. H12
    描かれる下線・丸囲み

    ::after か stroke-dashoffset

    重さ 軽 驚き ★1

13. H13
    文字が入れ替わってから戻る（スクランブル）

    和文は記号の候補をカタカナ・約物に

    重さ 軽 驚き ★2

14. H14
    カーソルとの距離で文字の太さが変わる

    可変フォントの wght・wdth

    重さ 軽〜中 驚き ★3

    参考：casadisolare.com

15. H15
    文字がカーソルから逃げる

    文字ごとにバネ／Three.js

    重さ 中〜重 驚き ★3

16. H16
    歪みながら別の写真へ（変位マップ）

    WebGL で2枚を補間

    重さ 中 驚き ★2

17. H17
    RGB のずれ（色収差）

    シェーダーでチャンネルをずらす

    重さ 中 驚き ★2

    参考：jesperlandberg.dev

18. H18
    液体のように流れる歪み（フローマップ）

    速度をテクスチャに書き UV をずらす

    重さ 重 驚き ★3

19. H19
    虫眼鏡のようにふくらむ

    シェーダー

    重さ 中 驚き ★2

20. H20
    画素がブロック状に崩れる

    DataTexture

    重さ 中 驚き ★2

21. H21
    3D に傾くカード＋光

    重さ 軽 驚き ★2 このサイトで動作中サービス・事例・ラボのカード

    参考：nicolaspomares.com

22. H22
    ホログラム・箔押しカード

    層を重ねた CSS。手本は GPL なので自作

    重さ 中 驚き ★3

    参考：poke-holo.simey.me

    作例を動かす
23. H23
    カーソルを追う光で縁が光るカード

    radial-gradient＋mask

    重さ 軽 驚き ★1

    参考：cruip.com

24. H24
    カーソルの方を見る物体・キャラクター

    atan2／Three.js の lookAt

    重さ 軽〜重 驚き ★2

25. H25
    レンズ・スポットライト・X線・白黒→カラー

    mask-image／WebGL

    重さ 軽〜中 驚き ★3 このサイトで動作中各ページの画像（写真へ切り替わった後、カーソルの周りに図面が透ける）

    参考：eatgenesis.com

    作例を動かす
26. H26
    なぞった所が削れて現れる（スクラッチ）

    canvas の destination-out。スマホでも同じ体験

    重さ 中 驚き ★2

27. H27
    屈折するガラスのレンズ

    シェーダー

    重さ 重 驚き ★3

    参考：github.com/RaymonDev/liquidweb

28. H28
    方眼・点の背景が反応

    重さ 軽〜中 驚き ★2 このサイトで動作中背景の方眼の波紋

    参考：aristidebenoist.com

29. H29
    粒子がカーソルを避けて戻る

    重さ 中〜重 驚き ★2

30. H30
    網点・ASCII に変わり、カーソルの周りだけ戻る

    重さ 中 驚き ★2

31. H31
    カーソルで奥行きが動く

    transform。酔いやすいので reduced-motion で止める

    重さ 軽 驚き ★1

重さ・驚きは当社の見立てです。調査は2026年10月時点で、参考にした実例は公開後に作り替えられている場合があります。