Hover Distortion
ホバーディストーション
どんな動き？
カーソルを乗せている間、画像がまるで水面や液体のようにぐにゃぐにゃと波打って歪むWebGL演出。ノイズ画像を使ったディスプレイスメントマップで歪み量をコントロールするのが基本の仕組みで、three.jsなどのライブラリで実装されることが多い。アート性の高いポートフォリオサイトなど、印象的なビジュアル体験を狙う場面で使われる。
よく使う場所
アートサイトポートフォリオ画像ヒーロービジュアル
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Distort an image like liquid, warping it with a noise-driven displacement while the cursor hovers over it.Trigger:
Mouse enters the image (hover).
Initial state:
Displacement amount: 0 (image undistorted)
Animation:
A noise-based displacement map warps the image continuously in a wobbling, liquid-like motion, with the distortion amount ramping up while hovered.
Final state:
Displacement amount fades back to 0 on mouse leave, restoring the sharp original image.
Timing:
duration: 0.4–0.6s to ramp distortion in/out, with a continuous 2–3s noise wobble loop while hovered.実装方法の候補
この動きは以下の技術で実装できます。
three.jscurtains.jshover-effect.jsWebGL
別名・関連ワード
Liquid DistortionWebGL Image DistortionRipple Hover